A drawing you build by clicking

Challenge 16 of 16

Everything this topic has, in one sketch you make yourself: each click stores a point, a size worked out from the count, and a colour, and the loop draws whatever is there.

Set the two values a click pushes.

Your code JavaScript

Set the two values a click pushes.

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 Growing a List

Every list you have written has been the length you typed and stayed that way. push changes that.

sizes.push(140);

That puts 140 on the end of sizes. The list is one longer than it was, and sizes[sizes.length - 1] is the new value. It always goes on the end, never in the middle and never at the front, whatever the value is.

Notice the shape of it: a dot, the word, and round brackets with the value inside. .length was a thing the list is, and had no brackets. push is a thing the list does, and has them.

Where you put a push decides when the list grows.

In start, it happens once, before the first frame. The sketch draws the longer list from the very beginning and nothing appears to change.

In a handler, it happens when someone does something. That is the interesting one:

function whenMouseClicked(){
xs.push(mouseX);
ys.push(mouseY);
}

Click, and the point where you clicked goes on the end of the lists. everyFrame loops over them and draws one more circle than it did a moment ago. Click again and there is another. You are building the drawing rather than reading one out of the source.

Not in everyFrame, though. A push there happens twelve times a second and never stops.

Two things this rests on, both of which you already have.

A handler changes a variable rather than drawing — and pushing to a list is changing a variable, even though there is no equals sign anywhere in the line.

And the loop has to be asking the list how long it is. A loop that stops at a number somebody counted will keep drawing that many shapes for ever, and the pushed items will sit in the list unread with nothing anywhere to say so. That is what the last topic was for.

A list can start with nothing in it: var spots = []; is an empty list, its length is 0, and a loop over it runs no turns at all. Perfectly correct, and it draws nothing until the first click.

From challenge 7 on, the picture is live the moment the page loads, because there is real input in it. Click on it yourself and watch the row grow; nothing is marked until you press Run, and the graded run then replays a scripted set of clicks rather than yours.

The line along the bottom is showing you the length. Watch it climb.

One thing a list still cannot do after this topic: none of these pictures move on their own. Everything in them is decided the moment it is drawn. The next topic puts a value back INTO a list every frame, which is how a whole swarm of shapes each ends up remembering where it has got to.