A picture on a screen is a grid of tiny squares called pixels, and each pixel is stored as three numbers: how much red, green and blue light, from 0 to 255. Light mixes differently from paint: red and green light make yellow. A vector picture is stored differently, as shapes to draw.
Look very closely at a screen and you'll see tiny dots of only three colours. How do three colours make every colour, and how are they stored?
Put to work in:Shapes on a canvas(Code › Drawing and animation with p5.js)
A screen picture is a grid of tiny squares called pixels. Each pixel glows with three lights, red, green and blue, and the computer stores how much of each, from 0 (off) to 255 (full on). So each pixel is three numbers, written in the order red, green, blue (RGB).
Predict: Read the problem and decide what you think before you try anything. A wrong guess is fine: it shows you what to look for.
Try: Try it on the board and compare the result with your prediction.
Investigate: Work out why it happens, one step at a time.
Modify: Change the problem on purpose and see what happens.
Practise: A few on your own, to check you have it.
Make: Make your own problem using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
PredictRead the problem and decide what you think before you try anything. A wrong guess is fine: it shows you what to look for.
255, 255, 0
TryTry it on the board and compare the result with your prediction.
Try: mix a colour
Was your prediction right? Try Blue at 255 too.
Try it yourselfYour edits are saved in this browser.
Set Red to 255, Green to 255 and Blue to 0, then click a pixel to paint it. What colour is it?
Use the board. This ticks when you get there.
InvestigateWork out why it happens, one step at a time.
Worked example: a picture as numbers
Worked exampleBefore each step, say what you think comes next.
255,0,0→redRed full on, green and blue off.
255,255,0→yellowRed and green light together look yellow.
255,255,255→whiteAll three full on.
0,0,0→blackAll off: no light.
4×4=16 pixelsAn image is a grid of pixels.
16×3=48 numbersThree numbers for each pixel.
Each amount is a number from 0 to 255, which fits in one byte (the binary lessons show why). Now count the numbers in a 10 × 10 image.
An image is 10 pixels wide and 10 pixels high, with three numbers for each pixel. How many numbers is that?
Sam works out the colour of 255, 255, 0. Click the line where the working first goes wrong.
ModifyChange the problem on purpose and see what happens.
Vary: one light at a time
Try it yourselfYour edits are saved in this browser.
Paint a pixel white.
Use the board. This ticks when you get there.
Now turn red off and paint a pixel. What colour is 0, 255, 255?
Use the board. This ticks when you get there.
Paint a dark red: red at about half (128), green and blue off.
Use the board. This ticks when you get there.
Paint a grey: all three the same, at 128.
Use the board. This ticks when you get there.
The board starts with every pixel black (0, 0, 0). How many numbers does that 4 × 4 picture store?
PractiseA few on your own, to check you have it.
Colours and counts
A small photo is 100 pixels wide and 50 high, with three numbers a pixel. How many numbers?
MakeMake your own problem using what you have learned. Expect a few tries; that is normal.
Copy a picture
Then press Show numbers. How many of your 48 numbers are 255?
Try it yourselfYour edits are saved in this browser.
Need a hint?
Two colours: yellow around the edge and blue in the middle.
Another hint
Yellow is red and green full, blue off: 255, 255, 0.
Another hint
Blue is 0, 0, 255. Set the brush, then click every pixel that colour.
Copy the picture: set each colour with the sliders, then click the pixels to paint them.
Use the board. This ticks when you get there.
For teachers
Students mix red, green and blue light on a pixel grid to see that a bitmap is a grid of pixels, each stored as three numbers from 0 to 255, and compare bitmaps with vector pictures stored as shapes (AC9TDI8K03 node 3). About 40 minutes.
I can explain the difference between a bitmap and a vector picture.
Before class
Try the Try and Make boards yourself first.
The one idea: a bitmap is a grid of pixels and each pixel is three numbers (red, green, blue), each from 0 to 255. Vector pictures store shapes instead, which is why they stay sharp when scaled.
Simplifications: real images are much bigger and usually compressed (Years 9–10); some formats also store transparency (a fourth number). "0 to 255 fits in one byte" is stated here and explained in the binary lessons.
Hands-on: CS Unplugged's Image representation activity (colour by numbers on grid paper) works well before the board.
Running the lesson
Predict: students who chose brown are thinking of paint. Ask them to hold the thought until the Try.
Try: have students find the colour of 255, 128, 0 (orange) before checking.
Worked example: ask how many numbers a phone photo might need (millions of pixels × 3).
Vary: ask why grey has equal numbers.
Make: ask how many different numbers they actually used.
The hard part (on purpose)
Students mix light like paint (red and green make brown). Let them predict, then see yellow on the board; a magnifier on a white part of a real screen shows the three coloured dots.
When students get stuck
A student says 255, 255, 0 is brown (Sam's mistake). Ask: Does a screen mix paint, or add light? Fix: Light adds up: red and green light look yellow.
A student thinks black pixels store nothing. Ask: Press Show numbers. What does a black pixel hold? Fix: 0, 0, 0: still three numbers.
Stretch and support
Stretch: Find the RGB numbers for your favourite colour with the sliders. Then look at the colour picker in a drawing app: it shows the same three numbers.
Support: Give the six main colours: red 255,0,0; green 0,255,0; blue 0,0,255; yellow 255,255,0; cyan 0,255,255; magenta 255,0,255.
Where it leads
Next: Shapes as numbers (vector pictures and 3D models).
Code links: turtle's color() takes RGB amounts; the Teachable Machine lessons train on images, which the model sees as these numbers. Later: why each amount stops at 255 (How many patterns?), and compressing images (Years 9–10).
255, 255, 0: Committing to the colour of 255, 255, 0 tests the new move before it is used: colours are amounts of red, green and blue light, and light does not mix like paint.
Try: mix a colour: Setting red 255, green 255, blue 0 and painting a pixel settles the prediction directly.
Worked example: a picture as numbers: Building colours from light, then counting the numbers in an image, models the new move. Sam mixes light like paint, the misconception planted after the method; the vector question shows the other way to store a picture.
Vary: one light at a time: Each task changes the brush by one light or one amount: all three full, two lights, half of one light, equal amounts (grey), then counting the numbers a black picture still needs.
colours and counts: Reading RGB values, counting numbers in an image, choosing bitmap or vector, and a review of text codes.
copy a picture: Copying a picture pixel by pixel reverses the process: students choose the numbers for each colour from what they see.
Now you can
Say how a pixel's colour is stored.
Count the numbers an image needs.
Explain the difference between a bitmap and a vector picture.