Frame the window

Challenge 6 of 16

Taking away works here too: width - 40 is the full width less a 20-pixel margin at each side. Written that way the frame fits whatever window it finds itself in.

Type the two names so the rectangle always fits.

Your code JavaScript

Type the two names so the rectangle always fits.

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.