What you will be able to make

Challenge 14 of 14

A sketch from much further along the course, written for you.

The animation is switched off: change spinning from false to true, then press Run and watch the five circles swing around the middle.

Your code JavaScript

The animation is switched off: change spinning from false to true, then press Run and watch the five circles swing around the middle.

Console print() output

0 / 160 frames · 400×400

Target

Yours

Results

0%

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson How a Sketch Works

A sketch is a list of commands, and each one draws something. They are used one after another, from the top down, and each line ends with a semicolon.

Most commands are a name followed by round brackets, and the brackets hold the details that command needs, separated by commas. What those details are depends on the command. Some want numbers — a position, a size. Some want a colour name. Some want words, in quote marks. A few want nothing at all, and keep their empty brackets anyway. Every challenge names them in a comment just above the line, so you never have to guess.

Your commands go inside one of two parts, between its curly brackets. Commands in start() run once, at the very beginning — it is also where you set how big the canvas is, with canvasSize(). Commands in everyFrame() run again and again, about 30 times a second, once for every frame you see. Both names have to be spelled exactly, or Visuco cannot find your drawing and nothing appears at all.

One detail catches everybody out. A circle and a square both take three numbers — across, down, size — but the pair means different things: a circle sits with its MIDDLE on those numbers, while a square sits with its TOP-LEFT CORNER there. Give both the same pair and they land in different places.

Because everyFrame is used for every frame, a drawing that comes out the same each time looks like a still picture. If something is different from one frame to the next, it moves. frameNumber counts the frames as they go by, so you can watch that happening — and putting frameNumber where a number should go is all movement is.