🔮 ⚡ Mystic Shield v3:
Professional Teaching Edition
Same eldritch mandala as v2 — every magic number is now a named constant,
every function has a header comment, and the drawing order is explicitly documented.
The capstone of a 12-stage teaching progression for new programmers.
What’s Different in v3
v3 produces exactly the same visual as v2: rotating concentric rings, eight orbital satellite sigils, an interlocked counter-rotating star, and 300 fire sparks. The difference is entirely in the code. v2 has 3 named constants and no comments. v3 has five named constant sections covering canvas size, animation speeds, geometry, color palette, and spark behavior — every raw number is gone. Every function has a header block that names what it draws, what coordinate system is active when it runs, and which constants it uses.
The draw() function opens with a numbered painter’s list explaining
the layer order. The Spark class has a lifecycle comment in plain English,
and the map() fade formula is explained step by step. The first use of
polar coordinates gets a comment: x = r × cos(θ),
y = r × sin(θ).
Live sketch requires a larger screen.
Try rotating to landscape.
Live Sketch — Mystic Shield v3
Same eldritch mandala as v2.
Every number in the code now has a name and a reason.
The 12-Stage Teaching Progression
The planning chat log documents how v3’s
structure maps to a 12-stage teaching sequence: Stage 0 (blank canvas with
setup() and draw()) through Stage 12 (full integration).
Each stage adds exactly one new concept. Every concept has a named constant section
or documented function in this file that a student can find immediately.
Planning Chat Log & Teaching Stages • Compare with v2 • App Comparison (JS / Java / Python)