Getting Set Up

BIG IDEAS
  • p5.js is a Javascript library that makes it easy to create visuals, interactive graphics, animations, and more. Javascript is the programming language (meaning, we are using the rules of the Javascript language) and p5.js is the add-on library that provides a bunch of shortcuts (functions) to do visual stuff
  • p5.js has a web editor that is accessible, quick to set up, and simple to use.
LEARN

Intro video from Coding Train explaining what p5.js is and a small bit of its background and history

Saber Khan, the Education Community Director of Processing Foundation, explains how p5.js and its web editor are super useful for K-12 education.

Short article from Khan Academy explaining the concept of a Javascript library with a useful example to illustrate.

MOTIVATE

This being more about set up, I don’t spend too much time with motivating this particular section in class. However, some points I usually bring up:

  • Why Javascript? Javascript is one of hundreds of programming languages in use today. But it is one of the most popular ones, is considered one of the “industry standards” , and is in many ways the language of today’s web. Most websites and apps we interact with daily are written using Javascript.
  • Why p5.js? Not only does the p5.js library make it easy to create animations and interactive projects, I like to show students the community statement and highlight that’s one of the main reasons I choose to use p5.js in classes.
Screenshot of the community statement from the p5.js website
TEACH

The main activity here is to get students to sign up for their p5.js accounts and ensure they can successful run the empty project by clicking the “Play” button.

Sample Slides

These can be useful for walking through the account setup process all together as a class. You can also do this as a live demo during class.

Coding Train Video

This can be useful if you are asking students to go through the account setup process individually (likely best for older and more independent students). Some students may appreciate being able to follow along with Dan.

PLAY
1. Play with the Hello Video

Two playful ideas for getting students familiar with p5.js:

It can be useful for students to get a sense of the many possibilities that p5.js allows before they begin their own explorations. One way to do this is to assign for homework that students go home and play with this interactive intro video for p5.js.

Screenshot from the hello.p5js.org video
2. Explore and Dissect the p5.js Web Editor

Dr. Em, in a curriculum she wrote for the San Mateo County of Education, has a great lesson/activity to get kids to play around, tinker with, and explore the p5.js web editor using the thinking routine Parts, Purposes, Complexities. Check out the page for this lesson and the corresponding video.

Screenshot from Dr. Em's lesson on p5.js. Click through to go to her website.

I would even suggest giving kids a challenge to try to get five (or more) different error messages during their exploration. The idea is to start normalizing getting error messages when we are coding.

REFLECT
  • After playing with the interactive hello video:
    • What delighted you?
    • What was something you learned you can do in p5.js that surprised you?
    • What would be something you are excited to learn how to do in p5.js?
  • After the explore and dissect activity
    • What are the errors you got when you started tinkering with the editor? Do you know why you got these errors? (It’s totally ok for students to say no here!)
    • Now that you had a chance to play with the p5.js editor, what is something you are wondering about?