Gaps that close up

Challenge 10 of 16

Counting down and multiplying the counter by itself puts the widest gap at the left and the narrowest at the right. The shapes are drawn right to left, which the finished picture cannot show you.

Set the multiplier and the height.

Your code JavaScript

Set the multiplier and the height.

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 Patterns with Maths

i is a number like any other. Everything you learned about arithmetic in Course 2 works on it, and the interesting part is what happens when you do the sum on its way into the picture.

You have been writing one of these sums already without naming it:

circle(40 + i * 60, 200, 40);

There are two numbers in there and they do quite different jobs. The 60 is the gap, and it decides how far apart the shapes land. The 40 is the offset, and it decides where the row begins. Change the offset and the whole row slides along with every one of its shapes intact, which is not what happens if you change where the counter starts.

Now the new part. Nothing says the sum has to be a gap and an offset.

Multiply the counter by itself and it climbs faster and faster: 0, then 1, 4, 9, 16, 25. A row built on i * i has gaps that widen as it goes, so the shapes bunch up at one end and spread out at the other. It is the first time a loop has drawn you something that is not evenly spaced.

Take away instead of adding and things run the other way. 360 - i * 40 walks to the left, and 86 - i * 12 makes each shape smaller than the one before it.

Divide, and you can share a distance out rather than choosing a gap. Watch the counting when you do, because five shapes have only four gaps between them, so it is 320 / 4 that puts the last one exactly 320 along.

And the sum need not end up in a position at all. A size is a number too:

circle(60 + i * 70, 210, 24 + i * 15);

That row of circles gets wider as it goes across, out of a sum that looks exactly like the one placing them. One counter can drive an across, a down and a size all at once, in three separate sums, and then a single wrong number moves and resizes everything together.

One thing to watch. A size worked out by a sum can end up at nought or below, and a shape of no size at all draws nothing. If part of your picture has gone missing, work out what the sum comes to on the last turn.

Next topic the drawing itself becomes yours. You write the function, and the loop calls it once for every turn.