Bigger together

Challenge 11 of 16

One box, three circles: scale multiplies all of them, so a single change resizes the lot. That is the whole reason for putting it in a box instead of typing three sizes out.

Set scale so all three circles are 75 across.

Your code JavaScript

Set scale so all three circles are 75 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.