Now that your students have been set up with a p5.js account, it’s time to work on their first creative coding project!
BIG IDEAS
- Drawing shapes in p5.js involves writing out the sequence of steps you want the computer to do, using a “grammar” (syntax) that the computer will understand.
- We can also say that we are writing out a sequence of instructions or commands. This sequence of instructions make up our algorithm.
- Most p5.js projects will include code in both the setup() and the draw() functions. Instructions in setup() run once when you hit the play button. Instructions in draw() run over and over again.
- Note: Functions is a bigger concept in coding that we will dig into more later. For now, we can just think of them as a way to organize our instructions into groups that do a thing. A decent analogy might be that lines of code are like “sentences” and a function is sort of like a “paragraph.
- We set colors using color commands BEFORE we use the shape commands to draw the shapes. Then, we use the X-Y coordinate system to specify where to draw things with the shape commands.
LEARN
In this video from The Coding Train, Dan walks through the details of how to use shape commands to draw on the p5.js canvas. He also talks about the syntax of commands in Javascript.
This video follows the Shapes & Drawing video to talk about how to work with colors in p5.js.
Here’s another video explaining drawing and colors in p5.js created by Dr. Em, as part of the curriculum she wrote for the San Mateo County of Ed. Also check out the full page for this lesson. It also includes a suggested creative project (logo design).
MOTIVATE
How is sketching with code similar to and different from sketching on paper? How do we write code to visually represent something on screen?
If you have time and especially if you did not do the activities in the What is Coding section of this kit, a fun opening to this unit that allows students to practice computational thinking skills can be something based on the famous peanut butter and jelly activity. (Want a giggle? Check out this version of this same activity.)
Ask students to write out steps to drawing a tree on paper, starting with a bunch of whiteboard markers strewn on the table and a blank board. Then you can be the computer to follow those instructions, which will most likely be not specific enough, so you can ham it up and intentionally misinterpret vague instructions. The point to get across is that you have to write out every single step and be super specific (including “pick up the green marker” and “move to the middle of the whiteboard”) and not assume the computer can make guesses.
TEACH
- Explain: setup, draw, coordinates, shape commands, colors
- Live Coding: Mickey by Damien Hirst
- Coding Warm-up
PLAY
Some playful project ideas that will allow students to practice drawing and colors in p5.js: