🔮 ⚡ Mystic Shield:
Three Languages, One Fire Ring
The same HSB Processing sketch — identical geometry, identical color values, identical animation logic — in JavaScript (p5.js), Java Processing, and Python Processing.
Six Concepts at Work in Every Version
These design decisions drive all three sketches. The Processing vocabulary stays familiar; the host language changes how state, classes, transforms, and numeric types are expressed.
colorMode(HSB, 360, 100, 100, 100) makes the fire palette portable. A ring stroke like stroke(33, 100, 100, 71) means the same orange glow 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), which makes the geometry much easier to reason about.
Each rotating system is wrapped in a transform stack. JavaScript uses push()/pop(); Java and Python Processing use pushMatrix()/popMatrix().
Sparks store radius and angle, then convert to screen position with:
y = radius * sin(angle)
The math is identical across all three languages.
Every spark owns its radius, angle, speed, size, and alpha offset. JavaScript and Python expose fields dynamically; Java declares every field in a formal class Spark.
map(radius, 40, 300, 1.0, 0.0) converts distance from the center into a fading alpha value. As radius grows, opacity shrinks; when a spark travels too far, reset() gives it a fresh start.
All Three Sketches, Side by Side
Yellow paper = JavaScript • Blue paper = Java • Green paper = Python. Each panel scrolls independently.
What’s the Same — and What’s Different
All three versions use the same Processing vocabulary: background(), stroke(), ellipse(), rotate(), TWO_PI, map(), and colorMode(HSB, 360, 100, 100, 100). The interesting differences are the host-language habits: JavaScript uses ES6 classes and push()/pop(); Java uses typed fields, ArrayList<Spark>, and pushMatrix(); Python uses snake_case and class Spark(object).
One sketch, three dialects. The fire is the same in every language.