← More Mesmerizing Spirals
This mesmerizing animation creates an infinite rainbow spiral using rotating lines. Here's how it works: 1. The HTML sets up a fullscreen canvas and some controls for adjusting the spiral parameters: - Number of "arms" (lines radiating out) - Number of layers - Line width - Radius factor (how quickly the spiral grows) 2. The JavaScript initializes the canvas context and default settings for each parameter. 3. The updateSettings() function is called whenever a control is changed, updating the corresponding variables. 4. The draw() function, called each animation frame: - Clears the canvas - Loops through each layer (i) - Translates to the center and rotates slightly for each layer - Loops through each arm (j) - Rotates evenly to distribute the arms - Sets the stroke color based on the current layer, arm, and animation progress (t) - Draws a line from the center outwards - Restores the transformation state - Increments the animation progress (t) 5. The requestAnimationFrame() call at the end of draw() creates the loop for continuous animation. 6. The onresize handler ensures the spiral stays centered if the window is resized. The result is a hypnotic spiral with a vibrant, shifting rainbow color scheme. The rotation and layering create an illusion of infinite depth and motion. The parameters exposed in the controls allow for a wide range of spiral designs by changing the density, width, and scale of the lines. The cyclic hue calculations ensure a smooth rainbow effect that progresses down the spiral arms over time. The high opacity and saturation make the colors really pop against the black background. Feel free to play with the code and see what other variations you can create! Spirals are a fascinating foundation for generative art. Let me know if you have any other questions!