Two, evenly — visuco

Challenge 7 of 16

To spread things out evenly, cut the window into as many pieces as you need and count along them. width / 4 is one quarter, 100.

Fill in the multipliers so the two circles sit at a quarter and three quarters, x = 100 and 300.

Your code JavaScript

Fill in the multipliers so the two circles sit at a quarter and three quarters, x = 100 and 300.

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.