A ball in a box

Challenge 5 of 16

Two numbers moving and four questions watching them, which is a ball loose in a box. Across and down know nothing about each other — each has its own speed and its own pair of walls.

Set the right-hand wall and the floor.

Your code JavaScript

Set the right-hand wall and the floor.

Console print() output

0 / 48 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Choices in Animation

You have seen this line before. It has been sitting in your animation challenges since the bouncing topic, always written for you, always with a comment above it explaining what it did:

if (x > 360) {
speed = -speed;
}

Now you know exactly what it is. A question asked once on every single frame, and a line that only runs on the frames where the answer is true.

Nothing about it is special. x climbs by the speed every frame; on most frames the question is false and nothing happens; on the one frame where x finally gets past 360 the speed is turned into its own negative, and from then on adding it takes the ball back the other way.

Two walls are two questions, one for each end, and only one of them can be true at a time. Two numbers moving is a ball in a box: across and down each get a speed and a pair of questions, and they know nothing about each other.

The number that turns round does not have to be a place. Make it a size and the same recipe gives you something that swells and then shrinks.

Instead of turning round, a question can put a number back where it started:

if (x > 440) {
x = 0;
}

which runs the ball off one edge and back on at the other. Wait until it is properly off the canvas or it will jump while you are still watching it.

distance works out how far apart two points are, so a question about it is how a sketch knows two things have met:

if (distance(x, y, 200, 180) < 110) {

Everything from the last seven topics still works here. A chain turns a journey into three coloured stretches. A joined question makes a gate the ball lights up as it passes through. A loop with a question inside it gives every ball in a row its own answer, on every frame.

Press Try to watch any of these run past the frames the marking uses. Run is what gets marked, and the readout along the bottom shows you what your numbers are doing on the frame you are looking at — drag the playbar and step through it one frame at a time if a wall is not doing what you expected.