Drawing like a 5-year-old

Dr Ben Swift

Telopea High School STEM Day

who drew pictures as a 5-year-old?

your hour of code

teach the computer to draw a picture

learn to deal with its tantrums

share your stuff with the world

p5.js

open a browser and head to editor.p5js.org

(optional) make a free account if you want to share your work later

edit the code

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(220);
  rect(0, 0, 100, 100);
}

don’t forget to hit play

collaboration

draw the square differently

  • bottom right
  • tall and skinny
  • short and fat
  • filling the whole top-right quarter

then try replacing rect with ellipse

colours

put one of these before your rect line:

fill(255, 0, 0);
stroke(15, 180, 0);

try changing the numbers (each 0–255)

how do you know what instructions the computer understands?

dealing with errors

like a 5-year-old, you need to be specific

don’t drop any brackets or commas — and learn to read the tantrums:

ReferenceError: sdfsd is not defined (line 8)
SyntaxError: missing ) after argument list (line 12)

smiley face

function draw() {
  background(120);
  fill(255, 255, 0);
  ellipse(400, 400, 400, 400);
  fill(0);
  ellipse(300, 350, 70, 70);
  ellipse(500, 350, 70, 70);
  ellipse(400, 500, 120, 70);
}

interaction

replace a number with mouseX

replace a number with frameCount

do some maths (+, -, *, /, %)

going further

it’s just telling your computer what to do, in language it understands

p5js.org/reference · p5js.org/examples

[email protected]