Growing while it moves

Challenge 7 of 12

Nothing stops a sketch changing two things at once: one number for where it is, another for how big, each with its own sum.

Start x at 30 and howBig at 20, add 8 to x and 3 to howBig every frame, and draw a PINK circle at x, 260 sized howBig, on BLACK.

Your code JavaScript

Start x at 30 and howBig at 20, add 8 to x and 3 to howBig every frame, and draw a PINK circle at x, 260 sized howBig, on BLACK.

Console print() output

0 / 35 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Code it yourself

This topic takes the last thing away. There is no code in the editor at all: no everyFrame, no background, no readout line along the bottom. You write the animation from the first character.

The buttons above the editor do the fiddly part. Click everyFrame and the whole block appears with the cursor inside it. Click circle and you get a circle line with numbers to change. Click var and you get a box to name. Nothing a button gives you is ever the answer — it is the shape of the code, and the choosing is still yours.

Two rules decide whether an animation works, and both are about where a line sits rather than what it says. A var that must remember goes above everyFrame: made inside, it is remade every frame and the number never grows. And the background goes first inside everyFrame, because it paints over whatever was there before — leave it out and every frame smears on top of the last.

The order inside everyFrame is the order things happen. Change the number, then draw with it. Draw first and you are always one frame behind.

Everything else here you have already met: frameNumber counting itself up, mouseX and mouseY, a variable plus a speed, two of them for down as well as across, a size that grows, a colour built from three numbers, limit for walls, and an if that flips a speed to make a bounce.

There is no readout line in this topic, so the picture is all you have to go on. Press Run early, one line at a time. If nothing appears, check that the drawing lines are inside everyFrame's curly brackets and that everyFrame has its capital F.