Shapes as numbers

A vector picture stores shapes, not pixels: a circle is where its centre is, how big it is and its colour, a few numbers in all. The computer draws it again at any size, so it stays sharp, and it stays small. Photos suit bitmaps; logos, icons and fonts suit vectors. 3D models are numbers too: a list of corners (x, y, z) and the faces that join them.

The club's logo has to go on a sticker and on a banner two metres wide. How can one file be sharp at both sizes?

Put to work in: Shapes on a canvas (Code › Drawing and animation with p5.js)

Your mission: the club needs one logo file that's sharp on a sticker and on a banner. Find out how pictures can be stored as shapes, then build the club badge from numbers.

Engage: Commit to a prediction before you test anything. A wrong guess is fine: it shows you what to look for.
Explore: Try it on the board and compare what happens with your prediction.
Explain: Put a name to what you saw, and why it works.
Elaborate: Use the idea in a new situation.
Evaluate: Look back at your first ideas and what changed.

EngageCommit to a prediction before you test anything. A wrong guess is fine: it shows you what to look for.

Engage: zoom in

A logo is saved two ways: as pixels (a bitmap) and as shapes (a vector). You zoom in 8 times on each. Which stays sharp?The vector: it's drawn again from its shapesBoth stay sharpThe bitmap: it has more detailNeither: zooming always goes blocky

ExploreTry it on the board and compare what happens with your prediction.

Explore: sharp at any size?

Was your prediction right?

Try it yourselfYour edits are saved in this browser.

Zoom in to 8× and compare the two pictures.

Use the board. This ticks when you get there.

Try to make the bitmap as sharp as the vector at 8×: give it more pixels. How many numbers does it need now?

Use the board. This ticks when you get there.

ExplainPut a name to what you saw, and why it works.

Explain: a picture as shapes

A vector picture stores shapes to draw; a bitmap stores every pixel.

Worked exampleBefore each step, say what you think comes next.

$\text{circle } 70\ 35\ 20$ Centre at (70, 35), radius 20: three numbers.
$\text{gold} = 255, 200, 0$ Its colour: three more. 6 numbers for the sun.
$\text{rect } 0\ 70\ 100\ 30 + \text{green}$ The hill: 4 + 3 = 7. The picture is 13 numbers.
$32 \times 32 \times 3 = 3072$ The same picture as a 32 by 32 bitmap.
$\text{which?}$ Shapes (logos, icons, fonts, maps) suit vectors; photos have no shapes to describe, so they're bitmaps.

Find the mistake

Sam fixes the blocky logo. Click the line where it first goes wrong.

ElaborateUse the idea in a new situation.

Elaborate: change the numbers

Try it yourselfYour edits are saved in this browser.

Make the sun bigger so it fills the dashed outline. Change one number.

Use the board. This ticks when you get there.

Move the sun down to the left to sit in the dashed outline.

Use the board. This ticks when you get there.

3D models are numbers too. Turn the cube into a pyramid: move its four top corners (1 to 4) to one point.

Use the board. This ticks when you get there.

ElaborateUse the idea in a new situation.

Elaborate: the club badge

Try it yourselfYour edits are saved in this browser.

Need a hint?

Start with the big blue circle: where is the outline's centre, and how big is it?

Another hint

Both circles share a centre. The triangle's three corners are three x, y pairs.

Build the club badge: change the numbers until all three shapes fill the dashed outline.

Use the board. This ticks when you get there.

EvaluateLook back at your first ideas and what changed.

Evaluate: look back

Which should be stored as a vector?A photo of the classThe school logoA scanned paintingA screenshot of a game

I can explain how a vector picture stores shapes as numbers, and when it beats a bitmap.

For teachers

Students zoom a picture stored as shapes and as pixels, change a vector's numbers to redraw it, turn a 3D cube into a pyramid by moving its corners, and build a badge from numbers (AC9TDI8K03 node 3, vector images). A 5E mission lesson. About 35 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can say how a vector picture is stored.
I can explain why a vector stays sharp when it is enlarged.
I can choose vector or bitmap for a picture.

Before class

Try the boards yourself. The page is 100 by 100: x goes right, y goes down (as on screens).

The one idea: a vector stores shapes as numbers and is drawn again at any size; a bitmap stores pixels. Photos suit bitmaps; logos, icons and fonts suit vectors.

Simplifications: real vector formats (SVG, PDF, fonts) also store curves, strokes and layers; the board's bitmap is made by sampling the middle of each pixel, with no smoothing. The 3D model counts 3 numbers per corner plus one per corner of each face.

Links: SVG is the vector format of the web, and the p5 Shapes lesson (Code) draws with the same kind of numbers.

Running the lesson

Engage: ask where they have seen a blurry logo.
Explore: ask how many numbers the 64 by 64 bitmap needed.
Explain: count the badge's numbers together before the Make.
Elaborate: ask why moving four corners changed six faces.
Evaluate: ask which pictures on their phone are vectors (icons, text).

The hard part (on purpose)

The badge's triangle: students change one corner at a time and lose track. Ask them to find each corner on the outline and read its x and y first.

When students get stuck

A student thinks every image is pixels (Sam's mistake). Ask: What does the vector store for the sun? Fix: Shapes: centre, size and colour.
A student moves the sun the wrong way. Ask: Which way does y go on this page? Fix: Down: bigger y is lower.

Stretch and support

Stretch: Open an SVG file (a logo) in a text editor: find a circle or path and its numbers.

Support: A card with the three shapes and their numbers: circle x y r, rect x y width height, triangle x1 y1 x2 y2 x3 y3.

Where it leads

Next: Sound as numbers.

What each step is for

Engage: zoom in: Committing to which picture stays sharp tests the new move: a vector is drawn again from its numbers at any size.
Explore: sharp at any size?: Students zoom both pictures and try to rescue the bitmap with more pixels, meeting the cost by failing first.
Explain: a picture as shapes: The teacher models counting a vector's numbers and drawing from them. Sam thinks every picture is pixels, the misconception planted after the method.
Elaborate: change the numbers: Each task changes numbers and watches the picture follow, ending with a 3D model stored the same way.
Elaborate: the club badge: Reversing the process: from a picture to the numbers that draw it.

Now you can

Say how a vector picture is stored.
Explain why a vector stays sharp when it is enlarged.
Choose vector or bitmap for a picture.

Next lesson4. Sound as numbersA computer can't store a sound wave itself. It measures the wave's height many times a second (sampling) and rounds each measurement to a level, so a recording is a long list of numbers. More samples and more levels sound closer to the real thing, but need more numbers.

Source: content/systems/data/shapes-as-numbers/lesson.md