Browser-based screensavers, simulations, tilings, and geometric art. Everything runs in a browser — no install needed.
GitHub Pages base: https://raggedr.github.io/reaction-diffusion-screensaver/
GPU-accelerated simulations that detect tempo from your microphone and respond to the beat. Click to start, grant mic access. They also run autonomously without a mic.
| Screensaver | Link | Description |
|---|---|---|
| Reaction-Diffusion | Live | Gray-Scott maze patterns on GPU. Expanding ripple waves clear and regrow the maze on each beat. Colours drift through greens, teals, blues, purples. |
| Fluid Dynamics | Live | 2D Navier-Stokes with Kelvin-Helmholtz instability. Beats inject vortex dipoles at shear boundaries — like a lava lamp that dances to music. |
Files: index.html, fluid.html, src/
Stack: Three.js, WebGL ping-pong framebuffers, GLSL shaders, Web Audio API FFT
Recursive geometry producing form constants — the universal visual hallucination patterns described by Bressloff et al. (2001). Spirals, tunnels, and vortices from pure straight lines.
| Visualization | Link | Description |
|---|---|---|
| DMT Tunnel | Live | Four spiral vortices in a 2x2 grid — 80 nested squares, 3.5deg rotation per step, cosine-eased 20s loop. Pinwheel symmetry from alternating CW/CCW rotation. |
| Zentangle Paradox (animated) | Live | Nested triangles create logarithmic spirals from straight lines only. Time-varying rotation makes spiral cores wind and unwind while the grid stays rigid. |
| Zentangle Paradox (static) | Live | The classic pen-and-ink technique: ~50 iterations of vertex advancement along edges produce the illusion of smooth curves. |
| 3D DMT | — | Development version with parameter comments (dmt/dmt_3d.html). |
| Hexagons | — | Hexagonal variant (dmt/hexagon.html). |
Files: dmt/
Background: These patterns relate to Turing-type instabilities in V1 neural field equations — the symmetry group is determined by the Euclidean symmetry of cortical connection architecture.
Aperiodic tilings — both correct P2/P3 constructions and deliberate "wrong" variants that reveal beautiful star-shaped voids.
| Screensaver | Link | Description |
|---|---|---|
| Substitution Tiling | Live | Cycles through 8 metallic palettes and 3 seed configurations. Sweeps a perturbed deflation ratio back and forth — "wrong" Penrose tilings with star voids. Beveled 3D rendering. |
| Random Penrose | Live | Auto-cycling P2 tiling with palette transitions and opacity cross-fade. |
| De Bruijn Pentagrid | Live | P3 rhombus tiling via dual pentagrid construction. Palettes cycle automatically. |
| Tool | Link | Description |
|---|---|---|
| Interactive Substitution | Live | Same renderer as the screensaver with a control panel (press P) for manual parameter exploration. |
| Penrose Deflation | Live | Correct P2 kite-dart Robinson triangle deflation, step by step. Multiple colour palettes. |
| Tile Placement | Live | Drag-and-drop kite and dart tiles with snap-to-fit at matching edges. |
| Penrose Puzzle | Live | Jigsaw: tiles removed from a tiling, drag them back into the holes. Scroll/R to rotate, N for new puzzle. |
| Phason Flips (Pentagrid) | Live | Research tool: find and execute phason flips on P3 tilings. Hover to highlight, click to flip, Z to undo. |
| Phason Flips (Deflation) | Live | Same interaction on P2 kite-dart tilings via Robinson triangles. |
| Kite Decomposition | Live | 2x2 panel showing kite decomposition geometry. |
penrose-linkedin.html— Static Penrose banner generator for LinkedInflip_graph.py,find_flips.py,verify_flips.py— Python research tools for flip graph analysisenumerate_patches.py— Penrose patch enumeration
Files: Root directory (*.html) + Python scripts
Spanning-tree mazes with real-time restructuring.
| Maze | Link | Description |
|---|---|---|
| Tree Surgery | Live | Click any cell to sever its subtree and regrow it. Supports DFS, Wilson's, Kruskal's, and Prim's algorithms. |
| Knotted Maze | Live | Fullscreen animated screensaver. Some cells become crossings where two strands pass through each other. Periodic tree surgery keeps it evolving. |
Separate tool in mazes/mazegen-rs/ — generates, solves, analyses, and evolves mazes. Five algorithms, SVG export with distance heatmaps, GA with edge-swap mutation, NSGA-II multi-objective evolution.
Files: mazes/
Other visual/simulation repos in the collection:
| Repo | Description |
|---|---|
| reaction-diffusion-playground | Interactive Gray-Scott playground (fork of Jason Webb's original). MIDI-controllable feed/kill parameters. |
| smoke-flow | Real-time GPU smoke — laminar-to-turbulent transition via Navier-Stokes. |
| fluid-dynamics | GA-evolved 2D Navier-Stokes vortex patterns — fitness = Shannon entropy of vorticity. |
| knots | 3D cord physics (Verlet + mass-spring) — random agitation leads to spontaneous tangling. |
| belt-trick | Interactive 3D Dirac belt trick — why spinors need 720deg (SU(2) contraction). |
| burgers | 2D Burgers equation on GPU with GA evolving shock parameters. |
npm install
npm run dev- Reaction-Diffusion:
http://localhost:5173 - Fluid Dynamics:
http://localhost:5173/fluid.html - DMT Tunnel:
http://localhost:5173/dmt/dmt-tunnel.html - Zentangle:
http://localhost:5173/dmt/zentangle-animated.html - Tree Surgery Maze:
http://localhost:5173/mazes/interactive.html
The DMT/Zentangle and Penrose files are standalone HTML — open directly in a browser, no build step needed.
| Layer | Tech |
|---|---|
| Build | Vite + vite-plugin-glsl |
| Rendering (screensavers) | Three.js, WebGL ping-pong framebuffers |
| Physics | GLSL: Gray-Scott, Navier-Stokes |
| Tilings & geometry | Canvas 2D, standalone HTML |
| Audio | Web Audio API FFT, custom tempo detection |
| Mazes (CLI) | Rust, SVG output |
- Gray-Scott shaders adapted from reaction-diffusion-playground by Jason Webb
- DMT geometric hallucination patterns relate to Bressloff, Cowan, Golubitsky, Thomas & Wiener (2001, 2002) on form constants and V1 cortical symmetry