# Compression Detective

## Learning goal
Take an image apart into frequency patterns. Round their strengths and compare the reconstructed pixels with the original.

## Model and limits
An orthonormal 8 x 8 grayscale DCT with a frequency-weighted quantisation table. The upload is resampled to 64 x 64 grayscale locally. This is not a complete JPEG encoder: it omits colour subsampling and entropy coding. Nonzero coefficient counts are not file sizes. Quality 100 still rounds coefficients. Negative coefficients extend below the zero plane.

## Primary references
- [JPEG overview](https://jpeg.org/jpeg/)
- [ITU T.81 / JPEG specification](https://www.w3.org/Graphics/JPEG/itu-t81.pdf)

## Experiment design
- **Gentle rounding**: Keep more small coefficients and compare reconstruction error. Parameters: `{"quality":92}`.
- **Make loss visible**: Strong quantisation reveals blocking and ringing. Parameters: `{"quality":12,"pattern":"graphic","block":18}`.
- **Noise is expensive**: Noise distributes energy across many frequencies. Parameters: `{"quality":55,"pattern":"noise"}`.

These presets are design predictions to investigate, not claims from a usability study. All readouts, animation positions and exported observations come from the same local model. The 2D view uses the same state. Saved setups restart from their parameters, rather than claiming to resume exact progress. Captured baselines are stored separately and survive resets and preset changes.

## Verification
Run `node --test apps/shared/discovery/tests/models.test.cjs` for numerical invariants, limiting cases, determinism and failure-state checks. Run `node apps/shared/tests/catalog.test.cjs` for routes and references. Browser and keyboard validation must be reported separately from numerical tests; automated tests are not user research.

## Discovery studio interaction layer
The studio adds selectable model objects, ray-based 3D picking, keyboard-accessible object selection, an inspector, scene editing where appropriate, model-specific stepping, and 24 measured challenges across the twelve labs. This is an interaction redesign, not a claim of measured learning improvement.

Most parameter changes now preserve current state. Structural changes explicitly start a new run; the exact per-app list is in `apps/shared/discovery/studio-model.js`. Current settings, independently captured baselines and challenge progress retain separate storage. Undo/redo keeps up to 30 edit checkpoints; the timeline keeps the latest 80 model snapshots. Resuming from a historical state creates a new branch. Saved setups still restart from parameters; they do not claim to retain the timeline or local particle pin edits.

Additional instruments derive from the existing model and cited references. Camera and light sweeps hold the remaining inputs fixed; neural curves separate training and validation; compression uses actual coefficients and recomputed quality samples; traffic uses recorded car positions/speeds; factory queues and utilisation use actual events and busy time. Visible instruments can continue collecting data while the hidden 3D view stops drawing.

Run `node --test apps/shared/discovery/tests/studio.test.cjs` for live edits, preserved state, all challenge solutions, direct manipulation, rewind, picking, instrument exports and controller integration. These DOM/renderer-double checks do not replace rendered browser and device review.


## Detailed 3D apparatus
Shared procedural geometry in `apps/shared/discovery/apparatus.js` adds mechanical housings, lens and iris parts, cables, wheels, connectors, moving machine heads and subject-specific markings. The scene uses bevelled housings, smoother curved geometry, instanced material families, a key/fill/rim light arrangement and bounded soft shadows. Cloth has a procedural weave bump map attached to its original model coordinates.

Full detail can be switched to Essential detail without resetting the model. All movements use model state or model time: wheel markers use road position, machine heads use scheduled job progress, conveyors use accumulated worker time, iris blades use the illustrated aperture, and network packets use their scheduled flights. Signal and energy markers illustrate direction, not measured transit speed. The fan is an indicator of the wind setting; it does not add a fluid simulation. Shells, grippers, cables and surface textures do not change the underlying collision model. The 2D fallback retains the same state and geometry.

Additional checks: `node --test apps/shared/discovery/tests/apparatus.test.cjs`. Geometry, state preservation, bounded batching, semantic selection, pause/rewind consistency and fallback behavior are checked with renderer doubles; browser pixels and device frame rates remain unverified.


## Authored model assets
The physical-object labs now load original Blender-authored GLB assets through `model-assets.js` and `model-worlds.js`: articulated industrial arm, mirrorless camera, car (overview and inspection versions), network router, gantry station, optical laser and companion character. The geometry, authored material surfaces and packed texture maps replace corresponding primitive bodies only after loading succeeds. Source `.blend` files, reproducible Python generators, manifests and inspected Blender renders are retained in `assets/models/` and `scripts/`. Mathematical data surfaces stay tied to their original calculations.

The robot uses actual solved joints; camera iris hinges respond to the aperture and a Cutaway toggle exposes the sensor/rays; car wheels and brake lights follow model position/acceleration; factory heads use scheduled job progress. GLB equipment covers remain illustrative, not new collision or optical physics. Camera cutaway distances are display distances; numerical thin-lens readings remain authoritative. The companion uses the motion model's translation and squash/stretch.

Assets load on demand, repeated equipment shares instanced geometry/materials, and only the selected close-up car upgrades from the lighter road mesh. Failure preserves the diagram and exposes Retry model. Inspect model fits the selected geometry rather than applying a fixed camera distance. Full/Essential detail, pause, rewind and existing models/data remain available. A procedural studio reflection environment lights PBR surfaces without external network requests.

Run `node --test apps/shared/discovery/tests/model-assets.test.cjs` for real GLB parsing, file loading, texture/UV presence, hierarchy transforms, exact solver alignment, cutaways, pause/rewind, fitting and car detail selection. Asset product renders were visually inspected in Blender. Browser pixels and device frame rates are still unverified; product renders are not screenshots of the web app.

## Bespoke rebuild (2026-10)
The page no longer uses the shared discovery template. It leads with the experience: a 192 × 192 grey countryside picture (drawn procedurally in `scene.js`: smooth sky, soft sun and clouds, a road sign with lettering, grass and a fence), a wipe between original and compressed, a magnifier (before | after), and one Quality slider with live file size, “× smaller”, numbers kept and a plain verdict. Six question presets and the slider sit around the picture so all are visible together at 1366 × 900; on phones the picture and slider stay sticky while the results scroll.

- `scene.js`: built-in pictures and uploads (centre square → 192 × 192 grey, in the browser only). `model.js` handles 64 × 64, so the picture is processed as 3 × 3 independent 64 × 64 pieces by `model.create` unchanged and stitched back. Sizes and squared errors are summed; PSNR is recomputed from the total. The verdict labels map PSNR ≥ 38 / 32 / 27 dB to “looks the same / small flaws / visibly worse / badly damaged”: rules of thumb, not a perceptual test.
- `compression-derive.js`: zig-zag order (T.81 Figure 5) and a size estimate = the bits a baseline JPEG encoder spends on the model’s quantised levels with the standard luminance Huffman tables (T.81 Annex K, Tables K.3/K.5): DC differences, AC run/size symbols with ZRL, end-of-block. Headers are excluded. Also per-tile statistics and the quantiser step formula mirrored from `model.js`.
- `image-view.js`: the big picture (wipe, “what was lost — brighter = more lost”, tile grid, magnifier). Nearest-neighbour scaling only.
- `steps-view.js`: “How it works” in four clickable, animated steps for the tile under the magnifier: cut into tiles → mix of 64 patterns (DCT basis = the model’s own inverse DCT of a unit coefficient) → rounding (fine patterns fade first, in reverse zig-zag) → rebuild (the model’s inverse DCT of the kept levels, added in zig-zag order).
- `block-view.js`: optional “exact numbers” diagram for the tile (pixels → amounts → rounded levels → pixels, zig-zag storage strip with the end-of-block point, and a per-pattern card).
- `coeff3d.js`: optional lazy-loaded three.js bar view (square-root heights, labelled), with orbit/zoom/pan, reset, render on demand, reduced-motion respect, capped pixel ratio and a fallback to the 2D numbers if WebGL fails.
- `rate-chart.js`: file size against quality (fresh model runs), coloured by verdict.

Limits: grey only (no colour subsampling); the quantiser is this lab’s formula, not the JPEG table, so quality numbers do not match other software; each 64 × 64 piece restarts DC prediction (a few extra bits); one model run of the full picture takes roughly 60–170 ms, so dragging the slider updates the picture a few times per second on slower devices.