Keep the pointer in a box

Challenge 13 of 16

A limit works on a number you did not choose. Move your mouse out of the picture and the circle stops at the box instead of following you. The box runs 60 to 340 and the circle is 40 across, so its middle stops 20 short of each side.

Set the two bounds.

Your code JavaScript

Set the two bounds.

Console print() output

0 / 60 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Keeping It On Screen

One new word.

limit(value, min, max) hands back the value, unless it is below the minimum (then you get the minimum) or above the maximum (then you get the maximum). Nothing else. Written on its own line as x = limit(x, 40, 360); it stops x ever leaving that range, so the shape it drives walks to the wall and waits.

Working out the number is the hard part.

A circle is drawn from its middle, so a circle 80 across has 40 either side of its centre and can only reach 360 before its edge leaves a 400-wide window. Ground whose top edge is at 320 holds a ball 80 across with its middle at 280. And if a shape is also growing, the wall depends on how big it ends up — challenge 11 is exactly that.

Both ends earn their keep.

A minimum is not decoration. A shrinking size would pass zero and go negative; a draining colour channel would leave the 0 to 255 that makes it a colour at all. Those are the two places a lower limit stops something meaningless from happening.

Overlay.

When a shape is supposed to come to rest in an exact spot, the Overlay button puts your sketch on top of the target instead of beside it, which is the easiest way to see whether you stopped in the right place or two pixels out.