🔮 ⚡ Mystic Shield:
Eldritch Mandala in p5.js
Rotating sigil rings, 8-satellite orbital circles, interlocked star geometry,
and 300 sinusoidal fire sparks — all driven by HSB color mode.
Version 2 — the fire palette lives natively in HSB, no RGB math needed.
The Sketch
The Mystic Shield is a p5.js creative coding sketch built from three concentric drawing systems running simultaneously. The outer two rings rotate slowly clockwise; the interlocked square star array counter-rotates. Eight satellite sigils orbit the perimeter, each a double-ring concentric detail. Three hundred fire sparks burst outward from the inner core, fade as they travel, and reset to start again.
Version 2 switches the entire sketch from RGB to
HSB color mode (colorMode(HSB, 360, 100, 100, 100)).
Every color is now expressed as a hue angle (0–360°) plus
saturation, brightness, and alpha on a 0–100 scale. The fire palette
(H 26–36 for the rings, H 24–47 random for sparks)
reads as intentional design rather than arbitrary RGB triples.
colorMode(HSB, 360, 100, 100, 100) •
P2D renderer for fast alpha blending •
push()/pop() + rotate() for independent spin layers •
polar → Cartesian spark positions via cos()/sin() •
map() for radial fade •
QUARTER_PI for the 45° star rotation
Live sketch requires a larger screen.
Try rotating to landscape.
Live Sketch — Mystic Shield v2
The mandala rotates continuously.
All colors live in HSB space — no RGB arithmetic required.
Three Languages, One Shield
The same Mystic Shield sketch runs in Java Processing and Python Processing as well as this p5.js version. All three share identical HSB color values and the same geometric logic — the fire is the same in every language. The App Comparison page shows all three side by side on color-keyed paper: yellow for JavaScript, blue for Java, green for Python.
App Comparison (JS / Java / Python) • JS source • Python source • Java source • Interactive version