Most of the world, is in some form of lockdown caused by the Corona virus, The Netherlands where I live included. Most of us now has to work from home and combine this with teaching since the schools are closed for at least a few weeks.

Since long I wanted to educate my kids on how tech works combined with programming. So here we go. This post will list short single file lessons, which try to make children from 9-13 understand technology better. My children had and will have a lot of fun, I hope yours will have as well.

To teach I chose the more than excellent p5js library based on Processing https://p5js.org/ with the excellent online editor https://editor.p5js.org/

Instruction

• Open the editor https://editor.p5js.org/
• Open the link next to each lesson and copy the all of the code
• Past it into the editor and hit the play button
• Since my children are not up to speed in English most of the naming and comments are in dutch. But adults/ developers should have no difficulty to adapt/translate it.

The core of p5js

• setup() : initializes the canvas, setup variables and such things
• draw() : is the function which probably runs a lot of times per seconds (requestAnimationFrame()) in here you place the code to play with, animations and such

Lesson 1: Displays, screens and Pixels

code 1: Black and white pixels in a 4 x 4 matrix simplified to 1 for white and 0 for black

code 2: Grayscale pixels, introduce the range of the RGB values ranging from 0 to 255

code 3: Color pixels, explain the RGB model and how to create mixes colors with RGB (green and blue becomes yellow ). I also adapted this code live to show them the actual pixels size of what they had created.

code 4: Pixels and Variables introduction of a variable as a magical box and a larger canvas to experiment with variables

Lesson 2: moving things and key presses

code 1: drawing and positioning explained

code 2: moving things around, make sure that your children click the canvas after they run the code otherwise the key presses won’t be handled.

code 3: drawing, activate the canvas again, and perhaps help your children to add a ‘magic’ random color on each keypress

Lesson 3: drawing pixels with the mouse

code 1: mouse position explained and experiment

code 2: condition when moving the mouse, change the color while drawing with a condition

code 3: mirror pixel, let the program do some extra drawing