The line that draws

Challenge 1 of 20

Everything else is here: the list, the loop and the colour. The one line missing is the one that actually puts something on the canvas, and the comment above the gap says exactly what it has to be.

Write the missing line.

Your code JavaScript

Write the missing line.

Console print() output

0 / 30 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 Write the Lists Yourself

No numbers are missing in this topic. Whole lines are.

Each gap has a comment directly above it saying what the line has to do, and that comment is the only instruction there is. Read it, write the line underneath it, press Run.

The comments name the call and where its numbers go, like this:

// circle at xs[i] across, ys[i] down, 60 wide

so you never have to guess the order of the arguments. What you do have to supply is the shape of the line itself — which list, which item number, and what to do with the value once you have it.

Two kinds of line come up over and over, and it is worth being able to write both without thinking.

Reading: shapeColour(colours[i]), circle(xs[i], ys[i], 60). Take the item at the counter and use it.

Writing: xs[i] = xs[i] + speeds[i]. Take the item at the counter, work something out, put the answer back in the same place.

Some lines are not lines you can leave blank, so you will find those given to you with something wrong in them instead. A for header, a function header, an else, a var declaration — blanking any of those breaks the brackets and the sketch will not run at all, which teaches nothing. Where the loop header is the question, it is sitting there with the wrong stopping point in it.

The first fifteen are still pictures. From sixteen the frame readout comes back along the bottom, the sketches animate, and the lines you are writing are the ones that put a new value back into a list every frame.

Work down the comments in order. If a shape does not appear at all, the usual reasons are that the item number is past the end of its list, or that the line drawing it is inside the wrong pair of curly brackets.