TITLE Rhythmus — A Drum Machine in Primary Colours PROMPT A sixteen-step drum machine designed as a 1920s Bauhaus-school composition: the instrument and the poster are the same object. Circles, squares, triangles and bars in primary colours are the voices; when a voice plays, its shape performs. Concept: geometry as percussion. A new composition, not a copy of any existing poster. Palette: warm paper #F1E9D8, red #D62B1F, yellow #F2B705, blue #1F4E9E, black #141414. Flat colour, light page, with subtle paper tooth and slightly imperfect "printed" edges (tiny SVG displacement on large shapes). Layout: an asymmetric composition on a tilted axis (17 degrees): the title "RHYTHMUS" runs vertically up the left edge in enormous black uppercase geometric lettering, drawn in SVG from heavy bars and arcs so it never depends on an installed font; a diagonal black bar crosses the page carrying the tempo (numerals reversed out of the bar, a ruler of ticks along its edge, and a small lowercase instruction set inside the bar itself); the upper right holds the "stage" where six large shapes live (one per voice), all standing on, hanging from or leaning toward the tilted bar; the lower area is the sequencer grid: six rows × sixteen steps, where each step is a small shape matching its voice (circle for kick, square for snare, triangle for hi-hat, half-circle for clap, thin bar for rim, ring for tom), drawn as outlines when off and filled (slightly off-register, like a second print pass) when on, with every fourth step marked by a thicker baseline. Small labels in lowercase tracked sans (Futura/"Century Gothic"/"Avenir" stack), in the school's all-lowercase manner: "schlag / kick", "wirbel / snare", "becken / hat", "klatsch / clap", "rand / rim", "trommel / tom". The upper left carries the play control, a short bilingual statement, the pattern slots, the swing knob, clear/random and a row of keyboard hints. Sound (Web Audio, all synthesised, off until the viewer presses the large play control, a red circle with a black triangle that becomes a black square while playing): kick (sine with fast pitch drop), snare (noise burst + tone), closed hat (high-passed noise, short), clap (three quick noise bursts), rim (short filtered click), tom (pitched sine drop). Scheduler uses lookahead timing against AudioContext time for tight rhythm; swing control. Signature moment: when playing, a thin black playhead sweeps the grid and the big shapes on the stage perform each hit with distinct, physical choreography: the blue circle squashes against the bar and rebounds like a struck drum skin; the red square snaps a quarter turn, rolling over its own corner on the bar; the yellow triangle flicks and shivers; the black half-circle claps against its outlined mirror image with a small burst of sparks; the thin red bar strikes down onto the black bar like a mallet and recoils; the blue ring ripples outward as concentric rings. Springy easing with overshoot (a custom spring integrator, not CSS default ease), so the poster is visibly dancing in time. The letters of the title count along as a second playhead, one letter nudging out per eighth note, and the play control pulses on each beat. A loaded default pattern makes the page impressive the instant play is pressed, and on load (before sound) the bar wipes in, the title letters slide up, and the shapes assemble with a staggered slide-and-rotate from off-canvas along the diagonal axis. Interaction: click/tap steps to toggle (drag across to paint); click a big shape to audition it; tempo by dragging the numerals along the diagonal bar (60–180 bpm, numerals in big type that grow with the tempo and swell out of the bar while you drag); swing knob as a rotating semicircle; four pattern slots as small coloured squares (A B C D) with distinct preset grooves; "clear" and "random (tasteful)" controls; mute per row by clicking its label. Keyboard: space play/stop, 1–6 audition voices, arrow keys move a focus cursor on the grid, Enter toggles; tempo and swing respond to arrow keys when focused. Phone layout: title up the left edge, stage on top, then controls, then the grid in two pages of eight steps with "1 – 8 / 9 – 16" tabs that show playhead progress and follow the playhead unless the viewer has just been editing; all targets at least 28px. Reduced motion: shapes flash fill instead of springing, the playhead steps instead of sweeping, and the entrance is a simple fade. Visible focus rings in black with a yellow offset. DESCRIPTION Rhythmus is a poster that happens to be an instrument. On warm, toothy paper a wall of hand-drawn geometric capitals climbs the left edge, and a heavy black bar cuts across the sheet at seventeen degrees with the tempo reversed out of it like a ruler. Six flat-colour shapes balance on and hang from that bar: a blue circle resting on the incline, a red square standing on its edge, a yellow triangle, a black half-disc facing its outlined twin, a thin red mallet on a black pivot, a blue ring. Below, a six-by-sixteen grid repeats the same shapes in miniature as the score. Press the red circle and the composition starts to move: every drum hit is performed by its shape with spring physics, the playhead sweeps the grid, the title letters step along with the bar, and the whole print keeps time. Everything is drawn in code, with slightly ragged printed edges and off-register fills, and the layout re-composes for phones with the stage above a two-page grid. VISUAL TECHNIQUES - Single inline SVG composition built on a rotated "axis" group, so the bar, tempo ruler and all six voices share one tilted coordinate system - Title lettering constructed from stroked bars and arcs (no font dependency), clipped to cap height and rotated to run up the left edge - feTurbulence + feDisplacementMap filters for slightly imperfect printed edges on the title, the bar and the large shapes - Paper tooth from a tiled fractal-noise texture multiplied over the whole sheet - Custom spring integrator (semi-implicit Euler, sub-stepped) driving squash, quarter-turn roll, shiver, clap collision with restitution, mallet strike with bounce, and ring pulse - Geometric contact for the square: its centre lifts by half·(|cos|+|sin|) so it truly rolls over its corner on the bar - Pooled expanding ripple rings with eased radius, thinning stroke and fading opacity - Tempo numerals drawn twice (black, and paper clipped to the bar) so they invert as they swell beyond the bar - Staggered entrance: bar wipe, letters sliding up with overshoot, shapes sliding and rotating in along the axis, grid shapes popping in column by column - Sequencer steps as small inline SVG glyphs with outline and off-register fill layers and overshoot transitions - Web Audio synthesis of six drum voices with a lookahead scheduler, swing, accents and a master compressor - Playhead position interpolated from the audio clock; unit-based layout that scales the whole board to the viewport, with a separate stacked composition for narrow screens INTERACTION MODEL Pressing the red circle (or the space bar) starts and stops the machine; sound exists only after that gesture or after auditioning a voice. While it plays, a black playhead sweeps the grid, active steps pop as they are struck, the stage shapes perform their hits, and the title letters count the eighth notes. Clicking or tapping a step toggles it, and dragging across steps paints them on or off; turning a step on while stopped sounds its voice. Clicking a big shape, or pressing 1–6, auditions that voice with its choreography. Dragging along the diagonal bar sets the tempo from 60 to 180 bpm while the numerals swell out of the bar; arrow keys adjust it when the bar is focused. The swing knob rotates by dragging or with arrow keys and delays the off-beat sixteenths; double-click resets it. The four squares A–D switch between distinct editable grooves, "clear" empties the current one and "random" rolls a musically weighted pattern, each change rippling across the grid. Clicking a row's label strikes it through and mutes that voice. Arrow keys move a focus cursor over the grid and Enter toggles the focused step. On phones the grid shows eight steps at a time with two tabs that fill as the playhead passes and follow it automatically unless the viewer has edited within the last few seconds. With reduced motion enabled, shapes flash instead of springing and the playhead moves in steps.