JavaScript Source Python Source Java Source Cross Training Interactive Shield
Mystic Shield  •  p5.js Showcase  •  09/25/2026
TNT — Creative Coding & Cross Training

🔮 ⚡ 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.

✨  HSB Edition — Version 2

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.

p5.js techniques at work: 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.

    Coming Next — Three Languages, One Shield

    The same Mystic Shield sketch exists 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 cross-training page will show all three side by side on color-keyed paper: yellow for JavaScript, blue for Java, green for Python.

    • Same in all three: colorMode(HSB, 360, 100, 100, 100) • stroke(33, 100, 100, 71) • ellipse() • rotate() • TWO_PI
    • Differs: Java uses pushMatrix()/popMatrix(); Python uses class Spark(object) with dict-style fields; JS uses an ES6 class Spark with dot notation

    Download Python source  •  Download Java source  •  Cross Training page  •  Interactive version