Interactive Spiral Animation

AI Overview: Interactive Spiral Animation

The Interactive Spiral Animation is a high-performance visual art piece that renders a fluid, mesmerizing spiral directly in the browser. Its main purpose is to demonstrate the power of GPU-accelerated graphics to create complex, organic patterns. The project features a "fire-themed" color palette and a reactive distortion effect that allows users to interact with the animation using their mouse.

The project is built using WebGL, which allows the browser to run code on the user's graphics card for smooth performance. The HTML provides a container for the visuals, while the CSS ensures the animation fills the entire screen. The actual "drawing" is handled by a fragment shader, a specialized program that calculates the color of every pixel on the screen simultaneously using mathematical functions like sine, cosine, and tangent.

Key Code Insights

1. The Canvas Element
The HTML provides a single <canvas> element, which acts as the drawing surface where the WebGL graphics are rendered.

<canvas id="glcanvas"></canvas>

2. The Fire Palette
Inside the fragment shader, this function defines the color scheme by mixing vectors to create the glowing red, orange, and yellow "fire" effect.

vec3 palette_fire(float t, float factor) {
    vec3 a = vec3(0.5, 0.1, 0.0);
    vec3 b = vec3(0.6, 0.3, 0.1);
    vec3 c = vec3(1.0, 1.0, 0.0);
    vec3 d = vec3(0.8, 0.7, 0.2);
    return a + b * cos(6.28318 * (c * t + d));
}

3. Mouse Interaction Logic
The shader calculates the distance between the current pixel and the mouse cursor to create a "push" effect, warping the spiral as the mouse moves.

float mouse_dist = length(mouse_vec);
float mouse_push = smoothstep(0.7, 0.0, mouse_dist) * 0.5;
if (u_mouse.x > 0.0) {
    st += normalize(mouse_vec) * mouse_push;
}

4. The Animation Loop
In the JavaScript section, the render function runs continuously, updating the "time" and "mouse" variables to keep the animation moving and responsive.

function render(time) {
    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
    gl.uniform1f(timeLocation, time * 0.001);
    gl.uniform2f(mouseLocation, mouseX * devicePixelRatio, mouseY * devicePixelRatio);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(render);
}

By combining polar coordinate math with real-time user input, the project creates a seamless bridge between code and art. The JavaScript handles the setup and data tracking, while the GLSL shader code handles the heavy mathematical lifting to produce the final glowing visuals.