A grid that grows

Challenge 9 of 16

Twelve circles, one size between them, and that size climbing every frame. The loops decide where they all go and the moving number decides how big they are.

Set the growth and the two gaps.

Your code JavaScript

Set the growth and the two gaps.

Console print() output

0 / 40 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Loops that Move

You have two kinds of number now, and this topic is about what happens where they meet.

The loop counter says which shape you are drawing. It goes 0, 1, 2, 3 and back to 0 on the next frame, over and over, and it never remembers anything.

A number kept outside everyFrame is the other kind. It is made once, above everyFrame, and every frame adds to it, so it carries on from where it got to:

var x = 0;

function everyFrame(){
backgroundColour(BLACK);
x = x + 3;
for (var i = 0; i < 4; i = i + 1) {
circle(30 + x + i * 70, 200, 44);
}
}

The counter spaces the circles out and x carries all four along together. Take x out and you have Topic 2's row. Take the loop out and you have Course 3's single mover. Together they are a row that moves.

Where you put x is the whole of it. In the across sum the row drifts sideways; in the down sum it falls; in a size every shape swells at once.

And you can multiply. Write x * i and every shape gets its own speed, because the counter is bigger further along the row — the first one stands still and the last one races away. That one line is the difference between a row that slides and a row that fans out, and it is worth trying both.

Two numbers can move at two rates. Two loops, two variables, two speeds, and the rows drift apart.

The loop's stop can read the frame number, and then the row gains a shape every frame and draws itself across the canvas.

One thing to know about the number kept outside. It has to live above everyFrame, not inside it. Put var x = 0 inside and it is made afresh every frame, so it goes back to 0 every time and nothing ever moves. That is the commonest way an animation comes out frozen.

Next topic is the last one, and the loops come out. You will write the headers, the bodies and the sums yourself, from a comment and a picture.