Showcase 03 · Fluidsimulation
Tinte
Tinte in Violett, Pink und Frozen-Blau treibt durch eine Glasschale. Die Moralo-Wortmarke steht in der Strömung, dahinter lösen sich Wirbel. Rühren Sie mit Maus oder Finger; ein Klick löst die Marke in Tinte auf, ein zweiter zieht sie wieder zusammen.
Die Live-Demo benötigt JavaScript und WebGL 2. Das Bild zeigt die Wirbel hinter der Wortmarke; die Erklärung unten ist auch ohne sie lesbar.
- Raster
- –
- Druckiterationen
- –
- Bilder/s
- –
- Simulation
- WebGL 2 · GPU
So funktioniert es
Die Grafikkarte löst die Gleichungen einer inkompressiblen Flüssigkeit nach dem Verfahren „Stable Fluids“ von Jos Stam. In jedem Bild wird die Strömung mit sich selbst mitgetragen, kleine Wirbel werden verstärkt (Vorticity Confinement) und ein Druckfeld sorgt in vielen Jacobi-Iterationen dafür, dass nirgends Flüssigkeit entsteht oder verschwindet.
Die Wortmarke ist ein festes Hindernis: Eine Maske setzt die Strömung in den Buchstaben auf null und macht ihre Kanten zu Wänden. Vorgezeichnet ist sonst nichts. Die Wirbel, die sich hinter den Buchstaben abwechselnd oben und unten ablösen, entstehen allein aus der Physik, wie die Kármán-Wirbelstraße hinter einem Brückenpfeiler. Drei Farbstoffe treiben mit der Strömung; im dunklen Design leuchten sie mit Bloom, im hellen mischen sie sich wie Tinte auf Papier. Die Farben stammen aus den Design-Tokens.