The other two mixtures

Challenge 8 of 13

The same trick on the other two pairs: green with blue gives cyan, red with blue gives magenta. Each one is two channels full and the third at nothing — the target shows you which is which.

Set both squares.

Your code JavaScript

Set both squares.

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 Colour by Numbers

Named colours are quick, but there are only thirteen of them. Behind every colour on a screen are three numbers: how much red, how much green and how much blue, each from 0 for none to 255 for as much as possible.

shapeColour(255, 0, 0); is pure red. shapeColour(0, 0, 0); is black — no light at all. shapeColour(255, 255, 255); is white — all three full. And every named colour you have used is one of these triples underneath: RED is 255, 0, 0.

Turning a number down does not change which colour it is, it darkens it. 255, 0, 0 is a bright red; 128, 0, 0 is a deep maroon. Shades like that are the real reason to mix your own — there is no name for most of them.

Mixing is the interesting part, and it does not work like paint. A screen ADDS light, so piling colours on always gets brighter. Red and green together make yellow, red and blue make magenta, green and blue make cyan.

Equal amounts of all three give you a grey, and the higher the numbers the lighter that grey is. Because that means typing the same number three times, there is a shortcut: one number on its own, like backgroundColour(210);, means that amount of all three.

In this topic you will build up the three channels, mix the colours you already know by name, and then colour whole pictures by number.