Changing the shape itself

Challenge 10 of 12

A shape's name is a word you type, the same as a colour is, and typing a different name draws a different shape. The target here is a square, but the code draws a circle.

Type over the name to fix it.

Your code JavaScript

Type over the name to fix it.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Colours

Colours, now that you know the shape of a sketch. Everything here happens inside everyFrame, on the lines that draw each frame.

Colours have names you can simply type, in capital letters: RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE, PINK, BROWN, CYAN, MAGENTA, WHITE, BLACK and GREY. You never have to remember them — the Reference button above your code lists all thirteen, with a patch of each colour beside its name, and clicking one types it in for you.

shapeColour(RED); chooses the colour for shapes drawn after it. Think of it as picking up a coloured pen: everything you draw from then on uses that colour, until you pick up another one. So one shapeColour line can serve several shapes, and shapes that need different colours need a line each — placed just above the shape it should reach. Moving the same line higher or lower changes which shapes it affects.

backgroundColour(BLUE); paints the whole canvas instead, which is why it belongs at the top: anything drawn above it gets painted over and disappears.

In this topic you will name colours from the target picture, learn where a colour reaches, paint the canvas, and finish by changing a shape's name as well as its colour — which is where the next topic picks up.