A click adds one

Challenge 7 of 16

A handler can push as easily as start can, and then the list grows while you watch. Every click puts the place it happened on the end of the list, and the loop draws one more circle.

Set what the click pushes on.

Your code JavaScript

Set what the click pushes on.

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.