Moving art

Students place circles on a ring with sin and cos, make the ring turn with frameCount, colour it with map, add trails and a spiral, and make a moving pattern of their own.

Drawing and animation with p5.js · Final challenge: Catch the circle · about 45 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 use sin and cos to place things on a circle.
I can use map to turn one range of numbers into another.
I can make a moving pattern from a loop.

Timing

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

Before class

Optional enrichment after the challenge. Students need no trigonometry beyond "sin and cos give the x and y of a point going round a circle"; angles here are in radians (frameCount * 0.02), apart from the Predict, which converts degrees with radians(). Skip the explanation of radians unless asked. map is the most useful new tool: it turns any range into any other.

Running the lesson

Predict: sketch a clock face and the 12 circles on it.
Run: ask what would change if the 0.02 was 0.05.
Investigate: ask which number makes it turn.
Modify: let students guess the effect of the fourth number in background before trying.
Make: encourage waves, orbits and flowers; share the best.

The hard part (on purpose)

Seeing why a loop with i makes different circles. Print i or draw just one circle first.

When students get stuck

What you will see	A question to ask	The fix
The circles all sit in one place.	Does the angle depend on i?	Add i * 0.5 to the angle.
Everything is in the top left corner.	Is the middle added (150 + ...)?	Add 150 to x and to y.
The trails are too strong or do not show.	What is the fourth number in background?	Lower it for longer trails, raise it for shorter.

Answers to the checks

Predict: What shape do the 12 circles make?
A ring. Each circle is placed at 100 pixels from the middle (150, 150), at an angle 30 degrees further round than the last.
What makes it turn?: What makes the ring turn?
frameCount grows every frame, so every angle grows
angle = frameCount * 0.02 + i * 0.5. i never changes inside one frame, but frameCount goes up by 1 each frame.
Which piece does what?: Match each piece with what it does.
cos(angle) * 100 → A. how far right or left of the middle, up to 100; 150 + ... → C. moves the middle of the ring to the middle of the canvas; map(i, 0, 11, 255, 120) → B. turns i from 0 to 11 into a number from 255 down to 120; frameCount * 0.02 → D. an angle that grows a little every frame
Where this leads: A friend's sketch uses sin(frameCount * 0.05). What does it do over time?
Goes up and down smoothly between -1 and 1
sin repeats a smooth wave between -1 and 1. Multiply it by a number to make the wave bigger.

Solutions

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

Modify › Trails

function setup() {
  createCanvas(300, 300);
  noStroke();
}

function draw() {
  background(20, 30, 60, 30);
  for (let i = 0; i < 12; i++) {
    let angle = frameCount * 0.02 + i * 0.5;
    let x = 150 + cos(angle) * 100;
    let y = 150 + sin(angle) * 100;
    fill(map(i, 0, 11, 255, 120), map(i, 0, 11, 120, 220), 200);
    circle(x, y, 20);
  }
}

Modify › A spiral

function setup() {
  createCanvas(300, 300);
  noStroke();
}

function draw() {
  background(20, 30, 60);
  for (let i = 0; i < 24; i++) {
    let angle = frameCount * 0.02 + i * 0.5;
    let radius = 10 + i * 5;
    let x = 150 + cos(angle) * radius;
    let y = 150 + sin(angle) * radius;
    fill(map(i, 0, 23, 255, 120), map(i, 0, 23, 120, 220), 200);
    circle(x, y, 12);
  }
}

your own pattern

function setup() {
  createCanvas(300, 300);
  noStroke();
}

function draw() {
  background(20, 30, 60);
  for (let i = 0; i < 20; i++) {
    let x = map(i, 0, 19, 20, 280);
    let y = 150 + sin(frameCount * 0.05 + i * 0.5) * 80;
    fill(255, map(i, 0, 19, 100, 220), map(i, 0, 19, 200, 100));
    circle(x, y, 14 + sin(frameCount * 0.1 + i) * 6);
  }
}

Stretch and support

Stretch: Make the circles change size with sin, or draw two rings turning opposite ways.

Support: Give the Run sketch and ask for one change, such as colours or speed.

Exit ticket

What does map(i, 0, 11, 255, 120) do?

It turns i from the range 0 to 11 into a number from 255 down to 120.

What each step is for

Investigate: i gives each circle its own angle and colour; frameCount makes every angle grow, so the whole ring turns.
Modify: A background with low opacity leaves trails; a radius that depends on i makes a spiral.
your own pattern: Goals only: a moving pattern using a loop, sin or cos, and map.

Where it leads

From here, students can start their own sketches or explore p5.js's reference.