🔮 ⚡ Mystic Shield v3:
Three Languages, One Professional Standard
The same professionally documented HSB sketch — named constants, function headers, and painter’s algorithm — in JavaScript (p5.js), Java Processing, and Python Processing.
Seven Concepts at Work in Every Version
v3 adds a seventh concept to v2’s six: named constant sections as curriculum map. The Processing vocabulary stays familiar; the host language changes how constants, classes, transforms, and state are expressed.
Every magic number is replaced by a named constant. How each language declares an immutable value differs significantly: JavaScript uses const, Java requires final type, and Python relies on UPPER_CASE convention alone.
colorMode(HSB, 360, 100, 100, 100) makes the fire palette portable. A ring stroke like stroke(RING_OUTER_HUE, 100, 100, RING_OUTER_ALPHA) is now self-documenting in all three versions.
translate(width / 2, height / 2) moves the origin to the canvas center. The rings, squares, and sparks can then be drawn around (0, 0). v3 makes this explicit with a comment in draw().
Each rotating system is wrapped in a transform stack. JavaScript uses push()/pop(); Java and Python Processing use pushMatrix()/popMatrix(). v3 labels each layer in the draw() comment block.
Sparks store radius and angle, then convert to screen position. v3 names the loop variable orbitAngle and adds a polar coordinates comment at the call site — visible in all three versions.
y = radius * sin(angle)
Every spark owns its properties. JavaScript and Python expose fields dynamically; Java declares every field with explicit types. Java also requires sz instead of size to avoid shadowing Processing’s size() function.
map(radius, SPARK_BIRTH_NEAR, SPARK_MAX_RADIUS, 1.0, 0.0) converts distance into a fading alpha. v3 names the bounds with constants, making the fade formula readable without a comment.
All Three v3 Sketches, Side by Side
Yellow paper = JavaScript • Blue paper = Java • Green paper = Python. Each panel scrolls independently.
What v3 Changes — Across All Three Languages
The core Processing vocabulary is identical in all three: background(), stroke(), ellipse(), rotate(), TWO_PI, map(), and colorMode(HSB, 360, 100, 100, 100). v3’s big addition is that every raw number is gone. Compare ellipse(0, 0, 280, 280) in v2 with ellipse(0, 0, RING_MAIN_RADIUS * 2, RING_MAIN_RADIUS * 2) in v3: the geometry is now self-documenting.
The interesting language differences: JavaScript uses const for block-scoped immutable bindings; Java requires final type NAME and explicit types for every field; Python uses UPPER_CASE as a convention only — the runtime does not enforce it. Java also requires a settings() method (Processing 3+) to call size() with named constants — setup() only accepts integer literals there. Java’s Spark class uses sz instead of size to avoid shadowing Processing’s built-in size() function, and needs pushMatrix()/popMatrix() where JavaScript uses push()/pop(). Python additionally requires a global declaration for angle_mandala and angle_star since they are module-level variables modified inside draw().
One professional standard, three dialects. The named constants make the fire the same in every classroom.
• Compare with v2 App Comparison to see what documentation adds.
• The Java settings() / size() constraint is explained in detail in DWR Entry #34 — including why named constants made it surface for the first time in v3.