Step them up — visuco

Challenge 12 of 16

Different multipliers off the same base give you a run of sizes rather than one size repeated. Each circle here is 20 times its own multiplier.

Fill them in so the sizes come out 20, 40 and 60 across.

Your code JavaScript

Fill them in so the sizes come out 20, 40 and 60 across.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Drawing with Variables

So far a box has held a number you chose. Here it holds a piece of the window, and the maths works out where things go.

Half the width is the middle across; half the height is the middle down. Divide by a bigger number and you get somewhere nearer the left or the top: width / 4 is a quarter of the way across. Multiply that back up and you can reach any fraction you like — width / 4 * 3 is three quarters.

You do not have to measure the window yourself. It already keeps its own size in two ready-made boxes called width and height.

Why bother, when this window is 400 across and you could just type 200? Because 200 is only right for a 400-wide window. width / 2 is right for any of them, and one challenge in this topic is deliberately not square so you can see the difference.

For a row of shapes, name the gap once — var step = width / 5; — and put each shape some number of steps along. Change that one line and the whole row respaces itself.

The same maths sizes shapes as well as placing them. One box called scale, multiplied into three sizes, resizes all three at once.

A last note: a position on screen cannot be judged to the pixel, so where a challenge needs an exact one it tells you the number to aim for.