Showcase 04 · Falling Sand
Zerfall
Unten steht eine kleine, echte Webseite. Lassen Sie sie zerfallen: Sie zerbröselt Pixel für Pixel zu Sand, der zu Boden rieselt und sich zu Dünen häuft. Mit gedrückter Maus oder dem Finger schaufeln Sie darin. „Wiederherstellen“ schickt jedes Korn an seinen Platz zurück, und die Seite ist wieder vollständig und bedienbar.
Neu im Studio
Ideen, die bleiben.
Wir bauen Webseiten und Apps, die schnell laden, lange halten und sich gut anfühlen. Diese Seite ist echtes HTML, sie lässt sich lesen, anklicken und vorlesen.
Projekt
Frozen Glass
Designsystem, Web und App aus einem Guss.
Die Live-Demo benötigt JavaScript und WebGL 2. Die Beispielseite oben ist auch ohne sie vollständig; die Erklärung unten beschreibt den Zerfall.
- Körner
- –
- Zell-Updates/s
- 0
- Bilder/s
- –
- Zustand
- Intakt
- Simulation
- WebGL 2 · GPU
So funktioniert es
Beim Zerfall zeichnet das Skript die Beispielseite mit Canvas 2D nach, aus ihren echten Layoutmaßen: Flächen, Rahmen und jedes Wort an seiner Position, in den Schriften und Farben der Seite. Ein Screenshot-Dienst ist nicht im Spiel. Jede bedeckte Zelle wird zu einem Sandkorn, das sich seine Heimat-Koordinate merkt.
Die Grafikkarte rechnet den Sand als Zellularautomaten. In jedem Durchgang wird das Raster in Blöcke aus 2 × 2 Zellen geteilt (Margolus-Nachbarschaft), deren Versatz von Durchgang zu Durchgang wechselt. So rechnen alle Blöcke gleichzeitig, ohne sich in die Quere zu kommen, und kein Korn geht verloren. Die echte Seite bleibt die ganze Zeit im Dokument, Screenreader lesen sie unverändert; die Animation ist rein visuell.