Getting started

Challenge 1 of 14

A sketch is a list of commands, and the ones inside start run once, in order from the top down — these three paint the background, pick a colour and draw a square. Each command ends with a semicolon.

Change one word: make the square YELLOW.

Your code JavaScript

Change one word: make the square YELLOW.

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 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.