Shapes on a canvas

Students meet p5.js on its own playground, draw circles, rectangles, triangles and lines on a canvas, learn that (0, 0) is the top left and y counts down, fix a fill that comes after its shape, and draw a picture of their own.

Drawing and animation with p5.js · Shapes and movement · about 50 minutes · Open the student lesson

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

Slides Download Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can draw shapes at places on a canvas with p5.js.
I can say where (0, 0) is and which way y counts.
I can colour shapes with fill, and know it affects shapes drawn after it.

Timing

Predict and Run 10 min · Investigate 10 min · Modify 10 min · Make 20 min

Before class

Read the unit primer first. The playground is our own p5.js editor (p5.js is served from this site, so it works with no network beyond the school's own). Run starts the sketch, Stop ends it, and errors show the line and a hint. Students do not need to understand function setup() { ... } yet: it is a recipe for this lesson and the next explains it as the place that runs once. The hard part is that y counts down from the top-left: turtle and maths graphs count up. Expect "where did my shape go?" until students get this. Curly brackets, brackets and semicolons are copied as written; the hint under a red error says which is missing.

Running the lesson

Predict: draw a 300 by 200 rectangle on the board and mark (0, 0) at the top left.
Run: ask each student to point at the line that made the pink rectangle.
Investigate: for the bug, say aloud what each line does in order: fill comes after the circle.
Modify: encourage small changes and re-running often: Ctrl+Enter runs the sketch.
Make: ask for 5 shapes and 3 colours, then swap screens and describe each other's picture.

The hard part (on purpose)

y counts down from the top-left. Ask students to predict which way a shape moves before they change a number.

When students get stuck

What you will see	A question to ask	The fix
A red line saying a name is not defined.	Is the command spelled exactly as in the example, with the same capital letters?	circle, not Circle; rect, not Rect.
Nothing is drawn.	Is the shape inside function setup() { ... }, between the curly brackets?	Move the line inside the braces, before the closing }.
The shape is in the wrong corner.	Which way does y count, up or down?	y counts down from the top, so a bigger y is lower on the canvas.
The new shape is hidden.	Was a bigger shape drawn after it in the same place?	Draw it later in the code, so it lands on top.

Answers to the checks

Predict: Where does the rectangle, rect(20, 20, 60, 40), appear?
Near the top-left corner. The first two numbers of rect are its top-left corner: 20 across and 20 down from (0, 0), which is the canvas's top left. The 60 and 40 are its width and height.
Match the lines: Match each line with what it does.
createCanvas(300, 200); → A. makes a canvas 300 wide and 200 tall; fill(255, 120, 160); → D. sets the colour for the shapes drawn next; circle(150, 100, 80); → C. draws a circle, middle 150 across and 100 down, 80 wide; line(0, 190, 300, 190); → B. draws a line from one point to another
Up the canvas: To move the circle UP the canvas, what do you change?
Make y smaller (100 becomes 40)
y counts down from the top, so a smaller y is higher up. Making x smaller moves the circle left.
Spot the bug: This should draw a gold circle, but it is white. Click the line that is in the wrong place.
line 4
fill only colours the shapes drawn after it. The circle is drawn on line 4, before the fill on line 5, so the fill changes nothing. Put fill(...) above circle(...).
Where this leads: A sketch draws a red circle and then a blue circle in the same place. Which one do you see?
The blue one: later shapes are drawn on top
p5 draws in order, like painting: later shapes cover earlier ones. That is why the sky comes before the sun.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Corner

function setup() {
  createCanvas(300, 200);
  background(20, 30, 60);
  noStroke();
  fill(255, 210, 0);
  circle(250, 160, 80);
  fill(255, 120, 160);
  rect(20, 20, 60, 40);
  fill(120, 220, 255);
  triangle(220, 160, 260, 90, 290, 160);
  stroke(255);
  line(0, 190, 300, 190);
}

Modify › An oval

function setup() {
  createCanvas(300, 200);
  background(20, 30, 60);
  noStroke();
  fill(255, 210, 0);
  circle(150, 100, 80);
  fill(255, 120, 160);
  ellipse(60, 40, 90, 40);
  fill(120, 220, 255);
  triangle(220, 160, 260, 90, 290, 160);
  stroke(255);
  line(0, 190, 300, 190);
}

a picture of your own

function setup() {
  createCanvas(300, 200);
  background(120, 200, 255);
  noStroke();
  fill(90, 170, 90);
  rect(0, 150, 300, 50);
  fill(240, 220, 180);
  rect(90, 80, 120, 80);
  fill(180, 70, 60);
  triangle(80, 80, 150, 30, 220, 80);
  fill(120, 80, 50);
  rect(135, 110, 30, 50);
  fill(255, 210, 0);
  circle(260, 40, 50);
}

Stretch and support

Stretch: Make the picture with only rect and circle commands that use arithmetic, such as circle(100 + 50, 100, 40), or draw a flag from a real country.

Support: Give students the finished picture's code and ask them to change colours and sizes first, then add one shape.

Exit ticket

Which corner is (0, 0), and which way does y count?

The top left; y counts downward.

What each step is for

Investigate: A shape's numbers are its position and size, y counts down from the top, and colours apply to the shapes drawn after them.
Modify: Moving a shape is changing its numbers; a new kind of shape is a new command with its own numbers.
a picture of your own: Goals only: shapes at places, with colours, built up in order.

Where it leads

Next lesson: variables and draw(), so the picture changes while it runs.