Teacher and presenter guide · Haar-wavelet reconstruction workspace

Wavelet Lab

Demo 12 of 17 · Part four, Example projects · 8–12 minutes for all three stages

You need: index.html open in any modern browser, on a projector or on each student's phone. No network, no install, no accounts. Nothing is fetched at runtime, so it works with the wi-fi off.

Learning goals

One per stage, in the learner's own words — these are the three Takeaway cards on screen, verbatim. If a student can say these three things and point at the evidence for each, the demo has done its job.

Dropping a coefficient always raises squared error by exactly that coefficient squared, because the transform preserves energy.
Keeping the largest-magnitude coefficients minimizes squared error for this basis, but a small coefficient can still support an edge a viewer notices — the two are related, not identical.
The same squared-error accounting explains why a face and a landscape are not treated equally kindly by one coefficient budget — the cost depends on the image, not just the number.

Where this sits on the path

An AI-built classroom tool from Part four. Its goal is to make "coefficient budget" a checkable number rather than a vibe, its engine runs live in the browser, and its assumptions — no compression, no denoising — are one tap away in Details. It does not depend on any earlier demo, so it can be taught on its own; the habit it shares with the rest of Part four is naming the boundary between mechanism and claim.

One question for the session

How much can you throw away before it costs you — and how do you know exactly how much?

"Every number on this page is something we can compute together, right now. Before I press anything, I want a guess from the room — how much do you think we lose?"

Stage 1 · Signal

Question: For the pair [3,1], if only the coarse coefficient survives, why does the reconstruction become [2,2] rather than [3,1]?

Predict prompt: Press Coarse only on the default signal [3,1,4,1,5,9,2,6]. Before looking, guess what every one of the eight reconstructed values becomes.

Activity (3 minutes): 0:00 read the eight sliders and the coefficient cards · 0:45 press Coarse only and check the room's guess · 1:30 click a retained detail card, commit a predicted rise, then press Drop it and check · 2:30 read the readout: the rise equals the coefficient squared, exactly.

Expected observation: With every coefficient kept, squared error is 0.000. Dropping D1.3 (value −2.828) raises it to exactly 8.000 — and (−2.828)² = 8.000, matching to the third decimal (independently checked in wavelet.test.js). Pressing Coarse only reconstructs every one of the eight values to 3.875, the plain average of the signal, with squared error 52.875.

Check-yourself answer key: "Because the detail coefficient — the only thing that told the two values apart — was dropped." The wrong option, "coarsening always throws away information, even before anything is dropped," is refuted by the demo's own math: the coarse and detail coefficients together reconstruct [3,1] exactly, and nothing is lost until a coefficient is actually zeroed.

Teaching limit: This is a pure squared-error accounting; it says nothing yet about which coefficient a person would notice missing. Stage 2 raises that question with a real image.

Misconception: coarsening means information is destroyed. The coarse coefficient plus the detail coefficient reconstruct the original pair exactly; loss begins only when a coefficient is actually dropped. Point at the 0.000 → 8.000 jump: it happens the instant a card is dropped, not before.

Stage 2 · Image

Question: As the coefficient budget grows, which visual features return first — and does RMSE track what you see?

Predict prompt: Set Mountain lake to a budget of 64. Before looking, guess which shapes survive and which vanish.

Activity (3 minutes): 0:00 note Mountain lake at the default budget of 256 · 0:30 drag the budget down to 64 and compare survivors to the room's guess · 1:30 raise the budget through 256 and 1,024 and watch which boundaries return · 2:30 read Retained energy and RMSE together.

Expected observation, computed for this guide (2026-09-15): at a 64-coefficient budget, Mountain lake keeps 99.1% retained energy (RMSE 14.51); Portrait keeps 95.6% (RMSE 25.88); City at dusk keeps 92.9% (RMSE 20.11). Numerically, this particular procedural city scene is treated less kindly than the portrait at this budget — worth surfacing, because a room asked to guess usually expects the face to be the hardest case.

Check-yourself answer key: "No — largest-magnitude selection minimizes squared error, not perceived sharpness." The wrong option treats RMSE as a guarantee of what looks better, which the page never claims and does not measure.

Teaching limit: Largest-magnitude selection is provably optimal for squared error in this orthonormal basis (checked in wavelet.test.js). Whether a reconstruction looks right to a person is not measured anywhere on this page.

Misconception: lower RMSE always looks better. RMSE and perceived quality are related, not identical — a coefficient that is small in magnitude can still support a sharp edge a viewer notices immediately, and this page runs no perceptual metric that would catch that.

Stage 3 · New case

Question: At a hard 64-coefficient budget, which feature of a portrait survives and which fails — and does the same energy accounting explain why?

Predict prompt: Before pressing the button: which feature of a portrait survives a 64-coefficient budget, and which one fails?

Activity (2–4 minutes): 0:00 press Set up Portrait at 64, which jumps back to the Image stage already configured · 0:30 name one surviving feature and one failed feature against the room's guess · 1:30 raise the budget until the eyes become recognizable and read the new energy/RMSE numbers · 3:00 compare Portrait with City at dusk at the same budget using the numbers above.

Expected observation: at budget 64, Portrait's large smooth cheek and background regions survive while the eyes and mouth — small, sharp, localized detail — are the last to resolve. The energy/RMSE numbers move together with what the room sees, per Stage 1's identity summed over the 4,032 omitted coefficients.

Check-yourself answer key: "The same budget does not treat every image equally — it depends on where the image concentrates its large coefficients." The wrong option overgeneralizes from one hard case to "64 is too small for any image," which City at dusk's and Mountain lake's own 64-budget reconstructions already refute.

Teaching limit: This exercise does not score or auto-grade an answer; "survives" and "fails" are the learner's own description, checked against the readouts, not a feature detector.

Misconception: a coefficient budget is a compression ratio. It is a precondition for representation sparsity, not a complete file format — no quantization, bit encoding, file upload, or denoising happens anywhere on this page.

Model and boundaries

(a+b)/√2 and (a−b)/√2

For every neighboring pair (a,b), the transform computes a normalized coarse coefficient (a+b)/√2 and detail coefficient (a−b)/√2, then repeats only on the coarse half. Eight values lay out as [A3, D3, D2.1, D2.2, D1.1 … D1.4].
The two-dimensional transform applies the identical row/column step to each successively smaller top-left block of the 64×64 image.
Because the transform is orthonormal, energy in the data equals energy in its coefficients, so omitted energy always equals reconstruction squared error — the identity both Stage 1 and Stage 2 make checkable on screen.
The budget slider keeps exactly the displayed number of largest absolute-value coefficients (ties break by fixed array order); everything else is zeroed before the inverse transform.

This lab does not quantize, encode bits, denoise, or promise a file-compression ratio — only a coefficient-selection reconstruction it computes in real time. The three grayscale scenes are original procedural illustrations, not photographs or measured datasets. Full per-stage assumption lists are in the app's Details drawer, which is the surface students should be sent to when they ask "but is that a real photo?".

Discussion questions

Two omitted detail coefficients have values 5 and −2. How much squared error do they contribute together, and why do the signs not cancel?
Which wavelet scale would record a change confined to one adjacent pair? Which carries a broad change across the whole signal?
At the same coefficient budget, why might a portrait and a city at dusk look differently faithful — and does the room's intuition about which one is "harder" survive the actual numbers?
The page labels some things Live and some Illustrative. Pick one of each and say what the label is promising you.

Presenter controls

The three stage tabs run across the top; none is locked, so a presenter can jump straight to any of them. Details in each stage intro opens that stage's formula, assumptions and sources. ? reopens the Guide. ⚙ Settings offers Open Presenter Notes (this document), Presentation mode and Reset.

Presentation mode scales the page up one notch and adds a Notes button to the header for these cues. Reset returns the demo to its opening state without reloading the page — the default signal, every coefficient restored, the predicted-rise box cleared, Mountain lake at a budget of 256 — and leaves presentation mode as you set it. Stage 3's own button sets up the Portrait scene at budget 64 and jumps to the Image stage so the room watches it happen.

Keep live and illustrative distinct. The signal, every coefficient and every squared-error readout are computed on the page as you interact — labelled Live. The three grayscale scenes themselves, and any claim about what a viewer notices rather than what squared error measures, are labelled Illustrative: procedural stand-ins, not photographs, and not a perceptual-quality measurement.

Sources and attribution

MathWorks, Wavelet Data Compression — the decompose/threshold/reconstruct workflow and the retained-energy metric this lab's Stage 2 follows. Fetched and confirmed live 2026-09-15.
MathWorks, Two-Dimensional Wavelet Packet Analysis — the 2-D context and coefficient thresholding this lab's image transform follows. Fetched and confirmed live 2026-09-15.

These sources support the underlying mathematics; they do not endorse this activity. The three procedural scenes and every readout are this lab's own computation, independently pinned in src/wavelet.test.js, which does not call the production transform it checks against.

Wavelet Lab · Bryant Harrison · Murray State University · Offline teaching model. Open index.html to run the workspace. src/demo-guide.html is the canonical source of this document; the shipped teacher-guide.html, the PDF beside it, and the in-app presenter notes are all generated from it at build time.