Showcase 01 · Reaction-diffusion
Growth
From a few seeds the Moralo wordmark grows like coral or living tissue. Paint on the stage with your finger or mouse: every stroke becomes new tissue that keeps growing on its own.
The live demo needs JavaScript and WebGL 2. The picture shows the wordmark growing as coral tissue; the explanation below reads fine without it.
- Grid
- –
- Steps/s
- –
- Frames/s
- –
- Simulation
- WebGL 2 · GPU
How it works
Two imaginary chemicals A and B spread across a grid of hundreds of thousands of cells. B consumes A and multiplies, A is fed in steadily and B decays steadily (the Gray-Scott model). The graphics card computes every cell in parallel, several steps per frame, in two floating-point textures that take turns.
The wordmark is a map of feed and decay: tissue can only survive inside the letters and your strokes. The four patterns are four pairs of these rates. The lighting treats the concentration of B as height and derives highlights from its slope; the colours come from the design tokens.