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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
SlidesDownload Present from the browser, or export to PowerPoint or PDF.
WorksheetDownload Print the student copy; the Teacher edition has the answers.
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.
Timing
Engage and Explore 8 min · Explain 8 min · Elaborate 14 min · Evaluate 5 min
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
What you will see
A question to ask
The fix
A student thinks every image is pixels (Sam's mistake).
What does the vector store for the sun?
Shapes: centre, size and colour.
A student moves the sun the wrong way.
Which way does y go on this page?
Down: bigger y is lower.
Answers to the checks
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. The computer draws the shapes again at the new size. The bitmap only has its pixels, so they get bigger.
Zoom in: Zoom in to 8× and compare the two pictures.
The vector's edge stays smooth; the bitmap's edge turns into steps.
More pixels: Try to make the bitmap as sharp as the vector at 8×: give it more pixels. How many numbers does it need now?
64 × 64 × 3 = 12,288 numbers, and it still shows steps at 8×. The vector stays sharp with 13.
Explain: a picture as shapes: Sam fixes the blocky logo. Click the line where it first goes wrong. line 2 Line 2: a logo can be stored as shapes (a vector). Then it's sharp at any size, and the file stays small.
Bigger: Make the sun bigger so it fills the dashed outline. Change one number.
Radius 30: one number changed, and the picture is drawn again.
Move it: Move the sun down to the left to sit in the dashed outline.
x 30, y 50: moving a shape is changing where its centre is.
A 3D model: 3D models are numbers too. Turn the cube into a pyramid: move its four top corners (1 to 4) to one point.
All four at (0, 1, 0): the faces follow the corners. Games and 3D printers store every model as corners and faces like this.
Elaborate: the club badge: Build the club badge: change the numbers until all three shapes fill the dashed outline.
Blue circle (50, 50) radius 40, white circle (50, 50) radius 30, gold triangle (50, 28), (30, 66), (70, 66): 21 numbers, sharp on a sticker or a banner.
Vector or bitmap?: Which should be stored as a vector? The school logo Logos are a few simple shapes and must be sharp at every size.
Solutions
One possible solution for each task. Other correct programs are fine.
Elaborate: change the numbers › Bigger
Open task: any program that does what the step asks.
Elaborate: change the numbers › Move it
Open task: any program that does what the step asks.
Elaborate: change the numbers › A 3D model
Open task: any program that does what the step asks.
Elaborate: the club badge
Open task: any program that does what the step asks.
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.
Exit ticket
Why does a vector logo stay sharp on a banner when a bitmap logo doesn't?
The vector stores shapes as numbers and is drawn again at the new size; the bitmap only has its pixels, which get bigger.
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.