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.
- 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