Moving and growing

Challenge 10 of 12

One frame number, two jobs: it drives the across and the size, so the circle sweeps and swells at the same time. Neither line knows about the other.

Set both multipliers to match the target.

Your code JavaScript

Set both multipliers to match the target.

Console print() output

0 / 90 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Every Frame

Every sketch you have written has had its drawing inside everyFrame, and the name is the whole truth: that block runs again for every frame you see, about ten to thirty times a second.

frameNumber counts those runs. On the first frame it is 1, on the second 2, and so on. It appears at the bottom of every picture in this topic so you can watch it climb, and the ‹ › arrows under the picture step one frame at a time so you can take it slowly.

The important thing is that frameNumber is an ordinary number. Everything Course 2 taught about sums works on it, and each sum does something different to the motion:

frameNumber + 150 starts the journey further along.
frameNumber * 6 makes each frame count for more, so it moves faster.
frameNumber / 2 makes each frame count for less, so it moves slower.
380 - frameNumber counts down, so it goes the other way. Order matters here, as it did with any take-away: frameNumber - 380 is not the same thing and sends the shape straight off the left.

And it does not have to be a position. Feed it to a size and the shape grows; feed it to two different arguments and it does two jobs at once.

There is a second way to watch, too. Run grades sixty frames and stops; the Try button just runs your sketch, with no marking and no frame limit, until you press it again. Use it whenever you want to watch something for longer than a run allows.

One thing frameNumber cannot do: stop, turn round, or go home. It only ever counts up. That is what the next few topics fix, by giving you a number of your own that you decide how to change.