# 11 — 几何构成 / 包豪斯 · 「包豪斯动态海报」

## Concept (two sentences)
A cream sheet of paper behaves like a 1919 Bauhaus press proof coming off the press:
a strict 240 px modular grid draws itself, then eleven red / yellow / blue / black
primitives land one per beat on the 120 BPM grid, every move an exact multiple of one
module. At the drop the whole poster mechanically compresses by one module and snaps
back, then locks into a finished kinetic poster with **BAUHAUS** set vertically in a
heavy geometric sans.

## Tech route
HTML + canvas 2D, one `renderAt(t)` that is a pure, closed-form function of `t`.
Deliberately **no GSAP** — a timeline library is state that has to be advanced; here
every transform is evaluated from `t` directly (transform stack: wave hop → wave
twist/stretch → scripted moves → entrance), which is exactly what determinism asks
for and draws at ~0.1 ms/frame. Static layers (paper texture, the grain plate) are
pre-rendered once to offscreen canvases and blitted. Sound is synthesised in
`audio.py` from the same cue sheet.

## Beat sheet (120 BPM, beat = 0.500 s; picture and sound read the same times)
| t | beat | event |
|---|---|---|
| 0.00 | 0 | grid rules wipe out from the centre; registration marks appear; the red circle is already falling |
| 0.50 | 1 | **hook** — red circle lands dead centre (kick + pitched click) |
| 1.00 | 2 | black quarter-disc sweeps in, rotating 90 deg about its **corner** pivot |
| 1.50 | 3 | yellow square slides exactly one module in from the right |
| 2.00 | 4 | blue triangle flips in about its own midline |
| 2.50 | 5 | yellow ring scales in (top) |
| 3.00 | 6 | black square stamps down (left) |
| 3.50 | 7 | blue semicircle slides up one module |
| 4.00 | 8 | red rule extends along the grid line y = 780 |
| 4.50-4.66 | 9 | three red squares cascade in (2-frame stagger) |
| 5.00 | 10 | quarter-disc rotates 90 deg about its **corner** -> cell (1,0); yellow square rotates 90 deg about its **corner** -> cell (3,0) |
| 5.50 | 11 | both corner rotations return; triangle rotates 90 deg about its **own centre** |
| 4.5-6.0 | — | riser builds |
| 6.00 | 12 | **HERO / drop** — impact + sub + full-frame red flash; the phase-shifted cascade wave starts |
| 6.0-7.65 | — | wave: top half dives one module, bottom half rises one module, left->right phase stagger; the ring also swings 90 deg about the **frame centre** and returns; one audible tick per element hop |
| 7.00 | 14 | clap on the second crest |
| 7.86 | — | triangle unwinds back to its poster orientation |
| 8.00 | 16 | poster locks (impact + kick); the 7 letters of BAUHAUS click in (0.085 s stagger, ascending arpeggio) |
| 9.00 | 18 | FORM · FARBE · FUNKTION + 包豪斯 · 形式、色彩与功能 track in; settle chord |
| 9.0-10.0 | — | held poster with living micro-motion (whole poster floats on a bob/sway/rock, every shape breathes, ring pulses and rings out, letter tracking slowly opens, a constant-velocity sheen rakes across) |

## Signature features -> where they are on screen
- **基本几何形 (circle / triangle / rectangles / quarter- and semi-discs)** — the whole cast; every shape is drawn from primitives in `parts/scene.js`, nothing traced.
- **红黄蓝黑限定色** — paper `#F1E9DA`, red `#E03C31`, yellow `#F2B705`, blue `#1E4FA3`, ink `#111`. Five values, no tints except the misregistration ghost.
- **严格网格对齐 / 位移 = 网格模数整数倍 / 落点必在网格线上** — grid origin (120,60), module 240, 7 x 4 cells. Every entrance displacement is ±240 px or a multiple; the wave hop is exactly one module and returns to the identical coordinate; the triangle / quarter-disc / square rotations move whole cells.
- **旋转以几何中心为轴 + 轴心玩法（自身中心 / 边缘顶点 / 画面中心）** — all three shown: *own centre* (triangle at 5.50 and the wave twist), *corner pivot* (quarter-disc entrance + the 5.00 move into cell (1,0); yellow square 5.00 into cell (3,0)), *frame centre* (ring, 6.2-6.6, swings 90 deg about (960,540) and back).
- **缓动克制，禁用 overshoot** — the only curves used are easeInOutQuad / easeInOutCubic / easeOutQuad (all monotonic). No back / elastic / overshoot anywhere; the piece is meant to feel like a machine.
- **节拍驱动，一拍一个动作** — see the beat sheet: each beat from 0.5 s to 8.0 s adds or moves exactly one subject; nothing else moves at that instant.
- **生成式变体：三角函数相位差批量驱动几何阵列** — the drop wave (`wave()` in `parts/scene.js`) drives all eleven elements from one phase each, `dy = hopDir * M * sin(pi * easeInOutQuad(p))`, staggered left->right.
- **三原色 + 纸质 + 印刷套印偏移** — procedural paper tooth, a single coarse (4 px) *static* full-frame film-grain plate, registration crop marks, and a slow-breathing 3 px misregistration ghost on the hero circle.

## Check numbers (from `out/11-geometric-bauhaus/qa.json`)
| spec | measured |
|---|---|
| duration | **10.000 s** |
| resolution | **1920 x 1080** |
| fps | **30** |
| video | H.264, yuv420p |
| audio | AAC, 48000 Hz, 2 ch |
| integrated loudness | **-14.2 LUFS** (target -14) |
| true peak | **-5.2 dBTP** (<= -1 required) |
| black frames | **0** |
| console errors | **0** |
| bitrate | **6.7 Mbps** (8.4 MB) |
| dead spans | **0** (`rhythm.mjs`, every 0.5 s window >= 0.41 % of pixels moving) |
| end hold (9.5-10 s) | **1.46 %** of pixels moving — the calmest stretch, but alive |

## Honest top-3 weaknesses
1. **The type column is reserved from t = 0 but only pays off at 8.0 s.** The right
   ~19 % of the frame (x 1560-1800) stays empty for most of the film so the vertical
   BAUHAUS has a clean home. It reads as deliberate negative space, but a braver edit
   would move some composition into that band earlier and then clear it.
2. **The assembly (2-6 s) is deliberately metronomic.** One landing per 0.500 s is
   exactly what the brief asks for, but it makes the build evenly weighted - there is
   no accelerando into the drop beyond the riser. One or two half-beat micro actions
   would give the build a slope without breaking the grid.
3. **The master is conservative and the middle is musically sparse.** loudnorm's linear
   gain leaves true peak at -5.2 dBTP, ~4 dB below the legal ceiling, so the film could
   be hotter. The 2-6 s stretch is essentially kick + hats + clicks + a low pad; a bass
   movement or a distant melodic cell would carry it better. (The wave also compresses
   towards the centre rather than travelling left->right as one crest - a deliberate
   choice so every element stays on-grid and inside the frame.)

## Self-score (6 = template, 8 = high-end agency, 9 = award shortlist)
| axis | score |
|---|---|
| style fidelity | 9 |
| concept wow | 8 |
| motion craft | 8 |
| design & typography | 8 |
| finish & texture | 8 |
| sound & sync | 8 |
| technical | 9 |