# REPORT — 02-isometric 「LUMEN CITY OS / 微缩智慧城」

## Concept
A miniature smart-city campus assembles itself out of a single glowing seed: ground tiles ripple
outward from the crossroads, towers grow floor by floor with a roof cap landing a beat later, and
then the whole block comes alive — cars, a train, delivery drones, pulsing data links and a wind
turbine — before the camera pulls back to reveal the finished island floating in a pastel void,
its name written flat across the isometric ground plane.

The whole film is one deterministic function of `t`: the page exposes `window.renderAt(t)` and
`window.__ready`, and every frame is computed in closed form (no rAF state, no clocks, no
unseeded randomness).

## Beat sheet (cue sheet — picture and sound read the same list; 120 BPM, beat = 0.5 s)
| time | beat |
|---|---|
| 0.00 | **hook** — the seed core pops at the crossroads with a bright burst + rising ping; the film never opens on an empty frame |
| 0.02–1.95 | ground tiles **drop in as a wave from the centre**, each with a bounce and a ~9 % squash pulse; ripple rings spread on the ground |
| 0.10–1.90 | tile-tick percussion on a 16th grid; rising C-E-G-A pentatonic arpeggio |
| 2.05–4.60 | **buildings grow** — 20 construction slots at 0.135 s; each base lands (sub thud + click), walls scaleY from 0 with overshoot, roof cap lands ~3 frames later, then windows light in sequence |
| 2.55–4.50 | trees pop (overshoot bounce) |
| 4.60–7.55 | **parallel slide** camera (translate only) with 1 : 0.8 : 0.6 parallax (foreground clouds : city : background clouds); cars, train, drones, data streams and the wind turbine come alive |
| 5.00 | life begins — whoosh + hat groove + bass pulse; cars roll in, drones lift off |
| 5.55 | data streams begin pulsing between tower tops |
| **7.00** | **HERO — "system online"**: every window flares cyan, a white surge flash, a bright shockwave ring races across the ground, sparks burst out of the core, orthographic zoom punch, impact + riser peak |
| 7.90–8.65 | **pull back** — the camera reveals the whole island floating in the pastel void (whoosh) |
| 8.70–9.30 | the title **skews onto the isometric plane** and extrudes up off the ground |
| 9.10–9.60 | Chinese subtitle: 微缩智慧城 · 一座会自我生长的数据之城 |
| 9.30–10.00 | composed end frame held ~1.0 s with living micro-motion (turbine, drones, data pulses, drifting clouds) |

## How each signature feature is realised
1. **30° isometric projection, orthographic, no vanishing point** — every point is projected with
   `u = (x−y)·cos30`, `v = (x+y)·sin30 − z`, times an orthographic zoom. There is no perspective
   matrix; the camera only pans and scales, so parallel edges stay parallel at every `t`.
2. **Miniature scene** — a 9×9 tile campus: buildings, a crossroads with lane markings, ponds,
   trees, two wind turbines, cars in two lanes, a train, five delivery drones and glowing data
   links. Present from 0 s to 10 s.
3. **Buildings "grow"** — `t = 2.05…4.60`: the base lands, the two visible walls scaleY from 0
   with an `overshoot` (settles through 1), the roof cap (parapet / pyramid / antenna) drops in
   ~0.24 s later, and windows switch on in a per-window sequence after that (each window has its
   own seeded threshold, so they light in a wave, not all at once).
4. **Parallel-slide camera (no rotation) with 1 : 0.8 : 0.6 parallax** — `t = 4.6…8.65`: the camera
   only translates/scales. Foreground clouds use parallax factor 1.0, the city/ground layer 0.8,
   the background cloud band 0.6, so the layers slide against each other with no rotation at all.
5. **SSR / iso-face construction** — a box is built as three faces: the `x = x1` face (mid tone),
   the `y = y1` face (dark) and the `z = zTop` top rhombus (light). This is the direct-projection
   equivalent of the Scale-86.6 % → skew ±30° → rotate ∓30° recipe: the same three faces, joined
   back to back. Windows are placed in face-local `(u,v)` coordinates and projected per-corner.
6. **Fake 3D by layer sorting; iso-grid travel** — every object is depth-sorted by its grid
   position (`key = x + y`, drones biased by height) before painting, so nearer objects occlude
   farther ones correctly. Cars, the train and the drones move along iso grid directions, so they
   always travel on the 30° grid lines.
7. **Text on the iso plane** — the title's baseline runs along the world +x axis, so on screen it
   descends at exactly 30°, with letter-height along −y: it is literally lying on the ground plane,
   extruded upward in violet, with a gold rule on the same plane.

## Tech route
A single HTML canvas (2D context, `alpha: false`) at 1920×1080. `parts/film.mjs` owns the
projection, the scene, the camera timeline and the drawing. To stay fast and stable:
- the settled ground (tiles, bevels, road dashes, ponds) is **baked once into an offscreen
  1920×1080 canvas** and blitted with a single scaled draw for `t ≥ 2.0`; before that the 81 tiles
  are drawn individually so they can fall;
- glow, cloud, shadow and grain are **pre-rendered sprites/patterns**, not per-frame gradients;
- measured draw time: **median 0.4 ms, p90 0.5 ms** per frame at 1920×1080 (max 90 ms on the very
  first cold frame), far inside the 250 ms budget. The 0.48 s/frame in the full render is CDP
  screenshot + PNG transport, not drawing.
Sound is `audio.py` (project synthesis toolkit), no samples.

## Check numbers
| spec | required | measured |
|---|---|---|
| duration | 10.000 s | **10.000 s** (300 frames) |
| resolution | 1920×1080 | **1920×1080** |
| fps | 30 | **30** |
| video | H.264 MP4 | h264, yuv420p, 12.0 MB (9.6 Mbps) |
| audio | stereo AAC 48 kHz | **aac 48000 Hz, 2 ch** |
| integrated loudness | −14 LUFS | **−14.7 LUFS** |
| true peak | ≤ −1 dBTP | **−5.8 dBTP** |
| black frames | 0 | **0** |
| console errors | 0 | **0** |
| dead spans (rhythm.mjs) | none | **none** — calmest windows are the composed hold (9.5–10 s, 0.97 % moved) |
| bitrate | ≤ 25 Mbps | **9.6 Mbps** |

## Rhythm pass (post-audit fix)
The first cut had a dead span at ≈1.5–2.0 s (the tile wave had settled at 1.33 s but the
buildings did not start until 2.05 s) and a too-still end hold. Three changes fixed both, all
of them *adding* motion rather than deleting beats:
1. the ground-tile wave was re-timed so the outer ring still lands at ≈1.84 s (the wave now
   fills the whole 0–2 s build beat, as the beat sheet always claimed) — the dead span went
   from 0.04 % to ~5 % moved;
2. a constant-velocity warm light band sweeps across the ground plane (three soft bars, 900 px/s),
   giving an even-speed baseline that never passes through zero;
3. once the island lifts (t ≈ 2.35) the whole model drifts on a slow sine bob/sway, the end-hold
   wordmark gets a lazy sway/bob and a glyph-clipped glint travelling inside the letterforms at
   constant speed, and the subtitle's tracking eases open — the end hold now moves 0.97–1.28 %
   of pixels (was 0.25–0.43 %), above the ~0.6 % "alive" bar, while staying the calmest stretch.

## Honest top-3 weaknesses
1. **The ground-only opening (≈0.2–1.9 s) is the busiest, least designed moment.** Before the
   buildings cover it, the 9×9 tile field shows its per-cell colour assignment (plaza / garden /
   pond) and reads a little like confetti. A more deliberate plaza pattern — explicit blocks, a
   central axis, fewer ponds — would look more art-directed at that scale.
2. **The floating-island reveal is carried by scale, not by mass.** The underside hull is a shallow
   tapered wedge and stays low-contrast, so "floating island in a void" reads more as a shrinking
   plaque than as a landmass with weight. A deeper hull with a modelled rocky underside and a clear
   cast shadow would sell the hero reveal far better.
3. **The life phase (5–8 s) is dense but low on individual beauty.** Cars, the train and the drones
   are all small at the establishing scale and the two wind turbines are visually weak (thin, pale,
   nearly identical). With more time I would give the drone lane a real flight path with banking,
   make the data links read as a network with a visible origin, and differentiate the turbines.
   The 5–8 s stretch is also where the piece is closest to "very good" rather than "award".

Secondary: windows are a uniform 3×4 grid on every building, and the road network is a plain
cross — both readable but generic.

## Self-assessment (1–10; 6 = template, 8 = high-end agency, 9 = award shortlist)
| axis | score | note |
|---|---|---|
| style fidelity | 9 | true iso (no perspective), growth animation, layer sorting, parallel-slide parallax, iso-plane type — all present and correct |
| concept | 8 | seed → city → living city → floating island is clear and charming; not a new idea |
| motion craft | 8 | staggered drops with squash, three-phase building growth, roof lag, per-window light waves, element-carried transitions + hero punch; a few moves are simpler than they could be |
| design & type | 8 | controlled pastel palette, real typographic hierarchy, correct CJK punctuation; opening ground pattern and uniform windows are the weak spots |
| finish & texture | 8 | grain, vignette, soft shadows, bloom, no banding/aliasing/tofu; the island underside is under-modelled |
| sound & sync | 8 | genre-correct plucky tech score, every landing and the hero hit land on their frame; could use one more melodic hook |
| technical | 9 | deterministic, console-clean, 0 black frames, 0.4 ms/frame draws, exact 10.000 s at spec |