🔮 Interactive Mystic Shield
Move the mouse across the canvas and the static shield wakes up: the glow shifts color, the rings breathe, sparks accelerate, and energy tethers respond as if the robot-human scene is alive in real time.
Live Canvas
Move left/right for hue and rotation. Move up/down for lift and energy.
How the Illusion Works
The base image is drawn first. The sketch then overlays new geometry directly on top of the static shield: glowing rings, counter-rotating star geometry, satellite circles, energy tethers, and particles. Because the overlay is positioned and colored to match the image, the original shield appears to respond to the novice’s mouse in real time.
The sketch uses blendMode(ADD), HSB color values, eased mouse coordinates,
and polar-to-Cartesian spark motion. If the base image is missing, the sketch falls
back to a neutral HSB background so the code still runs in the p5.js editor. The p5.js
editor can reconstruct the project with the source file and the base image below.