AI Liquid Chrome Mirror - Mouse Velocity Metallic Distortion - xelsed.ai

function preload() {
  // Create the shader from the embedded vertex and fragment shader strings
  // The 'this.renderer' argument is important for p5.js 1.x shaders
  myShader = new p5.Shader(this.renderer, vert, frag);
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke(); // No outlines for the rectangle that draws the shader
  
  // Apply the shader to the canvas
  shader(myShader);
  
  // Initialize previous mouse position to current mouse position
  prevMouseX = mouseX;
  prevMouseY = mouseY;
}

function draw() {
  // 1. Calculate mouse velocity
  let dx = mouseX - prevMouseX;
  let dy = mouseY - prevMouseY;
  
  // Lerp (linear interpolate) velocity for smoothing and decay
  // This makes the ripples settle slowly when the mouse stops moving
  velocityX = lerp(velocityX, dx, 0.1);
  velocityY = lerp(velocityY, dy, 0.1);

  // Update previous mouse position for the next frame's calculation
  prevMouseX = mouseX;
  prevMouseY = mouseY;

  // 2. Pass uniforms to the shader
  // Uniforms are variables that you pass from p5.js to your shader
  myShader.setUniform('u_resolution', [width, height]);
  
  // Invert Y for mouse position and velocity to match WebGL coordinate system
  myShader.setUniform('u_mouse', [mouseX, height - mouseY]);
  myShader.setUniform('u_velocity', [velocityX, -velocityY]);
  
  // Pass time for animations within the shader (e.g., color shifts, ripple speed)
  myShader.setUniform('u_time', frameCount * 0.01); // frameCount is a p5.js built-in, 0.01 controls time speed

  // 3. Draw a rectangle that covers the entire canvas
  // This triggers the fragment shader for every pixel on the screen
  rect(0, 0, width, height);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-apply the shader after canvas resize to ensure it's still active
  shader(myShader);
}

attribute vec3 aPosition; // Vertex position
attribute vec2 aTexCoord; // Texture coordinates

varying vec2 vTexCoord; // Pass texture coordinates to fragment shader

void main() {
  vTexCoord = aTexCoord; // Assign texture coordinates
  vec4 positionVec4 = vec4(aPosition, 1.0); // Convert position to 4D vector
  gl_Position = positionVec4; // Set the final vertex position
}

float sdSphere(vec3 p, float r) {
    return length(p) - r;
}

float rippleSDF(vec3 p, float strength, float speed) {
    float d = length(p.xy); // Calculate distance from the sphere's vertical axis
    // Use a sine wave to create the ripple pattern, influenced by time and speed
    float ripple = sin(d * 15.0 - u_time * speed) * strength;
    return ripple;
}

float df(vec3 p) {
    float sphereRadius = 1.0;
    float baseDist = sdSphere(p, sphereRadius); // Base sphere shape

    // Mouse velocity determines the strength of the ripples
    float velLen = length(u_velocity) * 0.01; // Scale velocity for appropriate ripple strength
    velLen = clamp(velLen, 0.0, 0.5); // Cap the ripple strength to a maximum value

    // Apply the ripple deformation
    float rippleDist = rippleSDF(p, velLen, 2.0); // strength, speed
    
    return baseDist + rippleDist; // Combine sphere and ripple SDFs
}

vec3 calcNormal(vec3 p) {
    vec2 e = vec2(EPSILON, 0.0); // Small offset for finite difference calculation
    return normalize(vec3(
        df(p + e.xyy) - df(p - e.xyy), // Calculate x-component of normal
        df(p + e.yxy) - df(p - e.yxy), // Calculate y-component of normal
        df(p + e.yyx) - df(p - e.yyx)  // Calculate z-component of normal
    ));
}

vec3 fakeEnvReflection(vec3 refDir) {
    refDir = normalize(refDir); // Ensure reflection direction is a unit vector

    // Convert reflection direction to spherical coordinates for pattern generation
    float u = atan(refDir.z, refDir.x) / TWO_PI + 0.5;
    float v = asin(refDir.y) / PI + 0.5;

    // Create various patterns using sin/cos functions
    float pattern1 = sin(u * 10.0 + u_time * 0.1) * 0.5 + 0.5;
    float pattern2 = cos(v * 8.0 + u_time * 0.05) * 0.5 + 0.5;

    // Define base colors for the chrome reflection (blues and purples)
    vec3 color1 = vec3(0.1, 0.2, 0.5); // Deep blue
    vec3 color2 = vec3(0.4, 0.2, 0.6); // Purple
    vec3 color3 = vec3(0.7, 0.8, 0.9); // Light metallic sheen

    // Mix colors based on patterns to create the reflective effect
    vec3 reflectionColor = mix(color1, color2, pattern1);
    reflectionColor = mix(reflectionColor, color3, pattern2 * 0.5);
    
    // Add subtle, time-based color shifts for more dynamism
    reflectionColor += sin(u_time * 0.2) * vec3(0.05, 0.0, 0.05); // Subtle purple shift
    reflectionColor += cos(u_time * 0.15) * vec3(0.0, 0.05, 0.05); // Subtle cyan shift

    return reflectionColor;
}

void main() {
    // Convert vTexCoord (0-1) to fragment coordinates (0-resolution)
    vec2 fragCoord = vTexCoord * u_resolution;
    vec2 uv = fragCoord / u_resolution;
    uv = uv * 2.0 - 1.0; // Map to -1 to 1 range

    // Adjust for aspect ratio
    uv.x *= u_resolution.x / u_resolution.y;

    // Raymarching setup
    vec3 camPos = vec3(0.0, 0.0, -2.0); // Camera position slightly back along Z-axis
    vec3 rayDir = normalize(vec3(uv, 1.0)); // Direction of the ray from camera through current pixel

    vec3 currentPos = camPos; // Start ray at camera position
    float totalDist = 0.0;    // Total distance traveled by the ray
    bool hit = false;         // Flag to check if the ray hit the object

    // Raymarching loop
    for (int i = 0; i < MAX_STEPS; i++) {
        float dist = df(currentPos); // Get distance to the object from current ray position
        totalDist += dist;           // Accumulate total distance
        currentPos += rayDir * dist; // Move the ray forward by the distance

        if (dist < EPSILON) { // If distance is very small, we've hit the object
            hit = true;
            break;
        }
        if (totalDist > MAX_DIST) { // If ray traveled too far, it missed the object
            break;
        }
    }

    vec3 finalColor = vec3(0.05, 0.05, 0.1); // Dark background color

    if (hit) {
        vec3 N = calcNormal(currentPos); // Calculate normal at the hit point
        vec3 R = reflect(rayDir, N);     // Calculate reflection vector

        vec3 reflectionColor = fakeEnvReflection(R); // Get the reflective color

        // Fresnel effect: Makes surfaces more reflective at grazing angles
        float fresnel = pow(1.0 + dot(rayDir, N), 5.0);
        fresnel = clamp(fresnel, 0.0, 1.0); // Clamp fresnel to 0-1 range

        // Mix reflection color with a brighter color based on fresnel for edge glow
        finalColor = mix(reflectionColor, vec3(1.0), fresnel * 0.5);
    }

    gl_FragColor = vec4(finalColor, 1.0); // Set the final pixel color
}