Moving art
Use sin and cos to move things in circles, map to turn one range into another, and make a pattern of your own.
A few lines of maths can make a spinning ring of colour, with no pictures drawn by hand.
cos(angle) and sin(angle) give the x and y of a point going round a circle, and map(value, a, b, c, d) turns a number in the range a to b into the matching number in the range c to d. Together with a loop, they make patterns that move.
The hard part is the loop variable. Each circle gets its own i, and that i changes its angle and its colour, so every circle is different.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
function setup() {
createCanvas(300, 300);
background(20, 30, 60);
for (let i = 0; i < 12; i++) {
let angle = i * 30;
circle(150 + cos(radians(angle)) * 100, 150 + sin(radians(angle)) * 100, 20);
}
}
Twelve angles of 30 degrees make a full turn.
Run
frameCount goes up every frame, so each angle grows and the ring turns.
function setup() {
createCanvas(300, 300);
noStroke();
}
function draw() {
background(20, 30, 60);
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);
}
}
Investigate
function setup() {
createCanvas(300, 300);
noStroke();
}
function draw() {
background(20, 30, 60);
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);
}
}
The one number that changes.
Maths in the loop.
Match each piece with what it does.
Modify
Leave trails behind the circles.
Need a hint?
background takes a fourth number for how solid it is, up to 255.
Another hint
Try background(20, 30, 60, 30) so old circles fade slowly.
Spread the circles into a spiral.
Need a hint?
Use a radius that grows with i instead of the fixed 100.
Another hint
let radius = 10 + i * 5; and use radius in place of 100.
Show the expected result
Leave trails behind the circles.
Run your program. This ticks when your code does all of the above.
Make the circles spiral outwards.
Run your program. This ticks when your code does all of the above.
Your own pattern
Make a moving pattern of your own: a wave, a spiral, a spinning flower. Use a loop, sin or cos, and map to change a colour or size. The sketch on this page is one wave.
Where this leads
Maths makes motion smooth. Artists use the same ideas for waves, orbits and growing plants.
For teachers
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. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
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.
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
- The circles all sit in one place. Ask: Does the angle depend on i? Fix: Add i * 0.5 to the angle.
- Everything is in the top left corner. Ask: Is the middle added (150 + ...)? Fix: Add 150 to x and to y.
- The trails are too strong or do not show. Ask: What is the fourth number in background? Fix: Lower it for longer trails, raise it for shorter.
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.
Where it leads
From here, students can start their own sketches or explore p5.js's reference.
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.
- Use sin and cos to place things on a circle.
- Use map to turn one range of numbers into another.
- Make a moving pattern from a loop.