Filters

At a glance

Time: one 50-minute period. Materials: a Chromebook per pair of students (a webcam is optional) and a projector. Before class: open this page yourself and try every challenge below. Teacher mode (the toggle at the top right) shows these notes; with it off, the page shows only what students see: the widget, and then the discussion questions.

Learning goals

Students solidify their understanding that an image is a grid of pixels, and that each pixel is numbers (in bits).
Students see that because an image is numbers, we can compute with it, and that this is powerful (filters, editing, fakes).
Students explore epistemological and legal questions about digital images: can we know one is authentic, and what does it mean to own one?
Students connect a technical fact to their everyday lives.

Lesson plan

Time	Phase	What happens
0-8 min	Recall	Cold-call students to rebuild what they know about images and bits
8-15 min	Demo	You show the widget and explain the matrix
15-32 min	Explore	Pairs work on challenges; you pause to share
32-47 min	Discuss	Whole-class conversation on the key questions
47-50 min	Close	Each student writes one sentence: what do you think now?

Recall (0-8 min). Call on several students, one at a time, and build a summary together on the board: how is an image stored? (a grid of pixels; each pixel has red, green and blue values; each value is a number from 0 to 255, which is one byte, which is 8 bits.) Do not lecture. If a student is unsure, ask another student to add to it. Then say what today is for: "Today we'll see what becomes possible when a picture is just numbers, and what that means for us."

Demo (8-15 min)

Project the widget above and show only the following, in this order:

Hover over a pixel in the left image. Point out the matching pixel on the right, and the three numbers that come in on the left of the matrix.
Ask: "What do you think 255, 0, 0 looks like?" Then find a red pixel (use the Swatches image) and check.
Explain the matrix: each output color is made by adding up a column. With the identity matrix, the R-out column takes 1 times red plus 0 times green plus 0 times blue. Nothing changes. Do one cell by hand with the class by hovering over the cell, which shows the product (for example, 120 × 0.25 = 30). If a sum goes below 0 or above 255, it is stopped at 0 or 255, and the widget shows a *. Save the offset row for later (see challenge 7); leave it at 0 for now.
Show the pixel size slider. All the way to the right, the picture is only 3 × 3 pixels.
Drag one weight and let students see the right image change. Stop. Ask what they predict will happen if you drag another.

Keep the demo short. Students learn the widget by using it, and a long explanation replaces their curiosity with your answers.

The matrix is written so that the input is on the left and the output at the bottom, so you can trace a pixel through it with your finger. Mathematically, we multiply a row of three numbers by a 3 × 3 matrix. If you teach matrices in your algebra course, this is the same idea, written sideways from how many textbooks do it. If a student asks, tell them so, and don't get pulled into a side lesson on matrix multiplication.

Weights come in steps of 0.25, from -1.5 to 2, and offsets in steps of 51 (a fifth of 255), from -255 to 255. These are deliberate limits. They keep the values readable, and they let the widget turn any filter into a short code of words (for example, ocelot-cocoa-nugget-cedar is the identity matrix). A filter with no offsets has four words; a filter with offsets has five. The coarse steps are a trade: fewer distinct settings means a shorter code that students can say aloud, and it also means a filter like greyscale can only be approximated (real greyscale uses 0.30, 0.59 and 0.11). That is worth pointing out: computers often store an approximation on purpose. Students can copy a code to send a filter to another pair, or paste one in to load it.

Explore (15-32 min)

Students work in pairs. Give them the challenges one or two at a time, out loud or on the board, and ask them to predict before they try. Circulate. Every four or five minutes, stop the class and ask one pair to put their screen on the projector and say what they noticed, or ask the whole room: "Someone found something surprising. What was it?" Keep the projector on a specific pixel so the class can examine one case together. The download button saves the filtered image, which students can keep or share.

Pausing to share. Good prompts: "What's one thing you tried that didn't do what you expected?" and "Who found a filter that surprised you?" Ask a second student to explain what the first student said, before you comment.

Challenges, and what to look for

Make the right picture look exactly like the left. Students often think the matrix should be all 1s. Let them try. Ask why the right picture looks washed out (each output is the sum of all three inputs, so it gets too bright, and the * appears). Each output should only "listen" to the matching input.
Make it greyscale. The key insight: all three output columns must be the same, since a grey pixel has equal red, green and blue. Ask students what the weights in a column mean. There are many valid answers. Our eyes see green as much brighter than blue, so weights like 0.25, 0.75 and 0 (see the reference below) look more natural than equal weights. Ask: "Does an equal mix (0.5 red, 0.5 green, 0 blue) look different? Why might it?"
Swap red and blue. A good check that students understand which cell connects which channels. Ask them to point to the cell that sends red-in to blue-out.
Remove all the red. Two ways: zero the R-out column (the new picture has no red), or zero the R-in row (the old red is ignored by every output). Starting from identity these look the same. Ask students to find both, then try each one on top of a different filter (such as swapping red and blue) and explain the difference.
Make it brighter. Weights that sum to more than 1 in a column make brighter pixels, until they hit 255 and clip. Ask: "What happens to detail in the bright parts of the picture?" (They turn to flat white: information is lost.)
Try a negative weight. These surprise students. Let them explore for a couple of minutes without explanation, then ask them to describe what they found.
Make a negative (invert the picture). With only the weights, students will find they can't: a negative weight turns a bright pixel into a very negative number, which is clamped to 0. Let them struggle for a few minutes and ask why. Then point to the offset row: an amount added to the sum, whatever the pixel is. Ask what offset would rescue a weight of -1 (255, since 255 minus the input is what an inverse needs). Then ask what else an offset is good for (make everything a bit brighter, add a tint to the shadows, and so on). Note that a black pixel (0, 0, 0) can only change if there is an offset.
Slide the pixel size all the way to the right. This is the bridge to the discussion. At 3 × 3, students see that a photo can be reduced to a few numbers, and that you can't get the original back from them. What did the computer keep, and what did it throw away?
Make your own filter, and send its code to another pair. Before they load it, can they predict what it will do? This is the fun part, and it is also the best formative assessment. When a pair predicts a filter's behavior from its numbers alone, you know they understand it.

Things to try (reference for you). The widget deliberately has no preset buttons: students should discover these. Here are settings you can use to check your own work, to show a stuck pair, or to seed a prediction game. Type the code into the Matrix code box and press Load, or set the weights yourself. Weights are listed as columns (R-out, G-out, B-out), each column giving the weights from R-in, G-in and B-in.

Filter	R-out column	G-out column	B-out column	Offsets	Code
Greyscale	0.25, 0.75, 0	0.25, 0.75, 0	0.25, 0.75, 0	none	`pelican-pickle-dairy-brook`
Sepia	0.5, 0.75, 0.25	0.25, 0.75, 0.25	0.25, 0.5, 0	none	`daffodil-mantle-nut-brook`
Swap red and blue	0, 0, 1	0, 1, 0	1, 0, 0	none	`ocelot-pigeon-flannel-brook`
Red channel only	1, 0, 0	1, 0, 0	1, 0, 0	none	`rainbow-lime-cymbal-brook`
Invert (negative)	-1, 0, 0	0, -1, 0	0, 0, -1	255, 255, 255	`mountain-jasmine-bolt-neck-dragon`
Brighter	1, 0, 0	0, 1, 0	0, 0, 1	51, 51, 51	`crab-bolt-skylark-stencil-cherry`
Contrast	1.5, 0, 0	0, 1.5, 0	0, 0, 1.5	-102, -102, -102	`rooster-lake-quilt-parsnip-boot`
Warm tint	1, 0, 0	0, 1, 0	0, 0, 1	102, 51, 0	`ranch-wax-hornet-comb-castle`

Other things worth trying with the class:

The identity matrix with one weight changed, one at a time. What does each cell do?
All weights set to 1, then to 0.25. (Too bright, then too dim.)
Greyscale with an equal mix (0.5, 0.5, 0) compared to 0.25, 0.75, 0.
Invert, then invert again with a second copy of the widget (download the first result, load it as a new image). Do you get the original back? (Nearly: rounding and clamping make it inexact.)
Two filters in a row (greyscale, then sepia). Can a single matrix do the same thing?
The Swatches image is the easiest way to see what a filter does to pure colors and greys.

Extension for fast finishers: Can you make a filter that increases contrast (dark things get darker and light things get lighter)? It takes a weight above 1 and a negative offset. Can you make a filter that warms the shadows (even pure black gets a slight orange tint)? Note that the offset can be negative, but the final output can't: it is always clamped to 0-255. Ask students where they see that in the widget (the *). In image software, the offset is called a "bias", and a matrix with an offset column is called an affine transformation.

Questions to discuss

Keep these in mind as you talk. There aren't right answers, but there are better and worse reasons.

Is there any way to know that a digital image is authentic? What would you look for?
How is digital property like physical property? How is it different?
If you pass an image through a filter, is it still the same image?
Copyright law says you own the particular expression of an idea, and not the idea itself. Today, whoever takes a photo owns the image, even if it's a photo of someone else. Should you be allowed to own a filter? Compare this to a performer's style in music.

Discuss (32-47 min)

This is the most important part of the lesson, and it is easy to rush. Protect the time.

Set it up. Connect back to what students just did: "You changed every pixel of a picture in seconds. Now imagine someone doing that with a picture of you." Then take one question at a time and give students 30 seconds to think and talk with a partner before the whole-class conversation. You will probably only get to two or three questions. That is fine. Let students choose which ones to take up.

Norms. Ask students to give reasons, to respond to each other's ideas ("I agree with ___ because..." or "I see it differently because..."), and to say when they change their mind. Change of mind is good. Say so.

Questions and what to listen for.

Authenticity. Students may say "look for weird edges" or "check the source." Push: "What if the edit is done well? What if the source is also fake?" A key idea: the file is just numbers, and numbers can be copied and changed without leaving a trace. Real authenticity efforts (camera signatures, edit histories) work by vouching for the source, not by inspecting the pixels. You do not need to teach that, but you can mention it.
Digital vs. physical property. Start with what's the same (you can sell it, give it away, or be harmed if someone takes credit for it), then what's different. The big difference: copying a digital file is free and perfect, so when someone copies your photo you still have it. If I take your bike, you don't have it. Ask: "Then what is being 'taken' when someone copies a photo?" (Possibly: credit, income, control over where it goes.) Students may bring up real examples such as music sharing or screenshots. Welcome them.
Same image? This is a question about identity, and it has no clean answer. Try a series: the identity filter (same?), a tiny brightness change (same?), greyscale (same?), 3 × 3 pixels (same?). Ask students where they draw the line, and what they are using to decide (what it looks like? what information it contains? where it came from?). Connect to challenge 8: information that's thrown away can't be recovered.
Owning a filter. Give students the premise: copyright protects the specific expression (this photograph, this recording) and not the underlying idea, method or style. Today the person who takes a photo owns it, even if it shows someone else. That means a filter is applied to something owned by someone, and it is also itself a kind of recipe. In this widget a filter is nine numbers, and students exchanged them as a four-word code. Ask: "Can nine numbers be owned?" Then compare with music: a songwriter owns a particular song, but an artist's style (a certain swing, a way of phrasing) is generally not protected, and other musicians learn from and imitate each other constantly. Ask: "Is a filter more like a song or more like a style?" and "What would happen to photography apps if filters could be owned?" Real law is more complicated than this summary (and courts have disagreed about where the line is between style and expression), so don't present it as settled. It is fine to say "lawyers and courts argue about this."

Things to avoid. Avoid steering students toward a "correct" answer, and avoid giving legal advice. If students bring up a real, personal example (for example, someone sharing an edited photo of a classmate), acknowledge it and take care that the class is not discussing a specific person. Redirect to the general question: "What do we think should happen in a case like this?"

Close (47-50 min)

Ask every student to write one sentence: "Something I think now that I didn't think before is..." or "A question I still have is...". Collect these. They tell you what to follow up on tomorrow, and they are the assessment for this lesson: you are looking for students using the ideas (pixels are numbers, copies are identical, edits leave no trace), not for a correct conclusion.

Follow-ups. Open the next class with a follow-up question, using one of the sentences you collected. Consider a homework task: find a picture online and argue, in a paragraph, whether it is authentic.

Why this lesson is designed this way

We hope this lesson is useful as a model, so here are the design choices behind it.

Inquiry before explanation. Students use the tool before they have the theory. The challenges are phrased as "what happens if...?" so students form a prediction, test it, and revise it. This works better than telling students the answer, particularly for students who have been told "you're not a math person." Here, being wrong just means the picture looks odd, and that is interesting rather than embarrassing.
A page that gets out of the way. Students see the tool, and then the questions. All the lesson plan is in these notes. This keeps the student page short (which matters for students who read below grade level), and keeps the teacher, and the conversation, at the center.
One idea, made visible. The matrix is the single new idea. The widget shows the input pixel, every product, and the sum, so students can trace exactly why a pixel got the color it did. Nothing is hidden inside a function.
A limit that motivates the next idea. Students first discover what a matrix alone can't do (invert, or change black), and then meet the offset row as a fix. The offset is introduced as an answer to a problem they have. This is why the demo leaves it at 0.
Pixel size as a way to zoom. The slider lets students make pixels huge. At 3 by 3 the picture is just nine numbers per channel. This makes the "image = numbers" idea concrete, and it is also the first hint that a picture can lose information.
Open-ended challenges. Students are never "done." Most challenges have no single right answer, so students who finish early can go deeper and students who struggle can still make progress.
Matrix codes as a bridge between pairs. The four-word code lets one pair send a filter to another pair, and turns "what does your filter do?" into a prediction game. It also makes the last discussion question concrete: a filter really is something you can hand to someone.
Discussion questions with no answer key. People who study these questions disagree. Your job is to keep the conversation honest, not to steer it toward a conclusion. The questions are ordered from the technical (can we tell?) to the social (should you own it?).
It runs anywhere. Everything happens in the browser, with no accounts and no installation, and it fits on a small Chromebook screen. Images never leave the student's computer, and the stock images are drawn by code, so there are no licensing questions.

If you adapt this lesson, keep this shape (recall, explore with a small tool, discuss what students noticed) and change the details.