Murray State University · Part four · Example projects

Wavelet Lab

Murray State University
Demo 12 of 17 · Part four · Applied Mathematics · Stage 1

Predict the cost, then drop it

How much does squared error rise when you drop one Haar coefficient — and can you name the number before it happens?

Before you start. A Haar transform turns every neighboring pair of values (a,b) into a normalized coarse coefficient (a+b)/√2 and a detail coefficient (a−b)/√2, then repeats only on the coarse half to build three levels for eight values. Coarse coefficients carry broad shape; details correct differences at increasingly fine scales.

Predict

Press Coarse only. Before you look: what does every one of the eight reconstructed values become?

Try

Click a retained coefficient card, enter a predicted rise, then press Drop it and check.

Takeaway

Dropping a coefficient always raises squared error by exactly that coefficient squared, because the transform preserves energy.

Live the signal, every coefficient and every squared-error readout, computed here as you edit

Worked signal: predict, then drop

Input values feed a three-level transform. Click a retained card and the lab names the coefficient and asks what it will cost before dropping it; click an omitted card to bring it straight back. Labels show Approximation and Detail by scale.

Check yourself

For the pair [3,1], only the coarse coefficient is kept and the rest is dropped. Why does the reconstruction become [2,2] rather than [3,1]?

Demo 12 of 17 · Part four · Applied Mathematics · Stage 2

Retain a coefficient budget

As you raise the retained-coefficient budget, which visual features return first — and does the RMSE agree with your eye?

Before you start. Stage 1 showed that dropping a coefficient always raises squared error by that coefficient's square. This stage applies the identical rule to a 64×64 grayscale scene: the slider keeps the largest-magnitude coefficients — the choice that minimizes squared error for this orthonormal representation — and zeroes the rest before the inverse transform.

Predict

Set the budget to 64 on Mountain lake. Before you look: which shapes survive, and which vanish?

Try

Drag the Retained coefficients slider and watch Reconstruction and Absolute error update.

Takeaway

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.

Live the transform, reconstruction, retained energy and RMSE, computed here as you move the slider

Image reconstruction: retain a coefficient budget

Illustrative the three scenes themselves — procedural stand-ins, not photographs or measured datasets

Largest-magnitude selection is provably optimal for squared error in this basis (proved by wavelet.test.js). Whether that also looks best to a person is not measured on this page — a small coefficient can still support a sharp edge a viewer notices anyway.

Original
Reconstruction
Absolute error ×3
display clipped only
Retained energy—
RMSE—
Budget—

Error and RMSE use the raw reconstructed values before screen pixels are clipped to 0–255.

Check yourself

A viewer says image B has lower RMSE than image A at the same coefficient budget, so image B must look sharper. Is that guaranteed?

Demo 12 of 17 · Part four · Applied Mathematics · Stage 3

Carry the rule to a new case

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

Before you start. Stage 1 showed a single dropped coefficient raises squared error by exactly its square; Stage 2 applied that identical accounting, summed over thousands of coefficients, to a whole scene. This stage asks what a hard 64-coefficient budget does to a face rather than a landscape, using the same energy and RMSE readouts.

Predict

Before you press the button below: which feature of a portrait survives a 64-coefficient budget, and which one fails?

Try

Press Set up Portrait at 64, then raise the budget in the Image stage until the eyes become recognizable.

Takeaway

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.

Live the same transform and readouts from Stage 2, reused unchanged

New case: Portrait at 64

Press Set up Portrait at 64 below. That is one scene at a hard budget: 64 coefficients out of 4,096. Name one feature that survives and one that fails, then raise the budget until the eyes become recognizable and say what changed.

Explain your observation using scale and this particular image. A large coefficient minimizes squared-error contribution; it does not by itself guarantee that a feature is meaningful or perceptually important.

Then carry Stage 1's check across. The rise you predicted for a single dropped coefficient is the same accounting here, summed over the 4,032 coefficients this budget omits: squared error adds up over an orthonormal basis, which is why Retained energy and RMSE move together.

Compare Portrait with City at dusk at the same budget. Argue which scene the budget treats more kindly, and why that is a statement about the image rather than about the transform.

Check yourself

At the same coefficient budget, a portrait's eyes stay unrecognizable longer than the mountain lake's silhouette. What does that show?

Wavelet Lab · Bryant Harrison · Murray State University
One HTML file · runs offline
Printable guide

Guidehow to use this demo

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

Where this sits: 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 your browser, and its assumptions — no compression, no denoising — are one tap away in Details.

  1. Signal. Predict what Coarse only leaves behind, then click a retained coefficient card and name the rise in squared error before you press Drop it and check.
  2. Image. Drag the Retained coefficients slider and watch Reconstruction and Absolute error update against the metrics row.
  3. New case. Press Set up Portrait at 64, then raise the budget until the eyes become recognizable, and say what changed.

Getting around

The three stage tabs switch stages. Details opens the exact math and boundaries for the current stage. Guide reopens this card; Settings has Open Presenter Notes, Presentation mode and Reset.

Time

About eight to twelve minutes for all three stages.

Settings

Presenter notes

The printable session plan, on screen — the same document as the printable teacher-guide.html.

Presentation mode

Scales the whole page up one notch for projecting to a room, and puts a Notes button in the header.

Reset

Back to a fresh load: the signal, every coefficient toggle, the predicted-rise box, the image preset and the coefficient budget. Presentation mode stays as you set it.

DetailsSignal

What is live

Everything on this page is computed here, now

Live the signal, its coefficients and the reconstruction

The signal values, every Haar coefficient, the reconstruction and squared error are computed on this page every time you edit a slider or drop a coefficient. Nothing is looked up.

How it works

(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 (a−b)/√2, then repeats only on the coarse half. An eight-value vector lays out as [A3, D3, D2.1, D2.2, D1.1 … D1.4]. Because the transform is orthonormal, energy in the data equals energy in its coefficients — so the energy omitted by dropping a coefficient equals the reconstruction's squared error exactly.

Assumptions and simplifications

  • The transform only works on power-of-two vector lengths (eight values here).
  • Predicting the rise is optional — leaving the box empty just reads the cost.
  • A prediction is called "a match" within a small margin (the larger of 0.05 or 1% of the rise), not an exact digit match.

Sources

Boundary: this stage zeroes coefficients and reconstructs. It does not quantize, encode bits, denoise, or promise a file-compression ratio.

Presenter Notesthe printable guide, on screen

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.

  1. Dropping a coefficient always raises squared error by exactly that coefficient squared, because the transform preserves energy.
  2. 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.
  3. 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

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.

Open the printable copy (teacher-guide.html) — the same document, laid out for print; the PDF beside it is a render of that file.
Bryant Harrison · Murray State University