weird xelad ai thing lol

function preload() {
  // No image loading needed anymore as we'll use webcam video.
}

function setup() {
  // Create a canvas that fills the window
  createCanvas(windowWidth, windowHeight);
  // Important for pixel manipulation: ensure pixelDensity is 1
  // This makes sure 1 p5 pixel corresponds to 1 screen pixel,
  // preventing issues on high-DPI (Retina) displays.
  pixelDensity(1);
  // Optional: Set noSmooth() for a sharper, pixel-art look, especially for this effect
  noSmooth();

  // Initialize audio input
  mic = new p5.AudioIn();
  // Initialize amplitude analysis
  amplitude = new p5.Amplitude();
  amplitude.setInput(mic); // Set the microphone as the input for amplitude analysis

  // Create video capture
  // The callback ensures the video stream is ready before we interact with its properties,
  // though p5.js usually handles this gracefully.
  video = createCapture(VIDEO, function() {
    console.log("Video stream ready. Video dimensions:", video.width, "x", video.height);
    // Once video is ready, size it and hide the HTML element
    video.size(width, height);
    video.hide();
    videoStarted = true; // Set flag
  });
  // Hide the HTML video element immediately. It will be resized and shown
  // (or rather, its pixels drawn) in the callback once ready.
  video.hide();
}

function mousePressed() {
  // Start the microphone if it's not already started
  if (mic && !mic.started) {
    mic.start();
    console.log("Microphone started. You can now speak to interact with the sketch.");
  }
  // Ensure the video context is active (createCapture usually handles this,
  // but calling userStartVideo() on interaction is good practice).
  userStartVideo();
  console.log("Video started.");
}

function draw() {
  // Clear the canvas with a background color
  background(220);

  // If video is not yet started, display a message
  if (!videoStarted || video.width === 0 || video.height === 0) {
    textSize(24);
    textAlign(CENTER, CENTER);
    text("Click on the canvas to start your camera and microphone!", width / 2, height / 2);
    return; // Stop draw() if video isn't ready
  }

  // Load the pixels of the canvas for direct manipulation
  // This is more efficient than using get() and set() repeatedly.
  loadPixels();

  // Load the pixels of the video feed
  // This ensures we have access to the most recent frame's data.
  video.loadPixels();

  // --- AUDIO AND TIME REACTIVITY ---

  // Get the current overall amplitude (volume) level from the microphone
  // The level ranges from 0.0 (silent) to 1.0 (loudest)
  let level = amplitude.getLevel();

  // Create a time-based oscillation using sin() function and frameCount
  // frameCount counts the number of frames since the sketch started
  // 0.05 controls the speed of the oscillation
  let timeFactor = sin(frameCount * 0.05);

  // Define the center of the morphing effect
  // It follows the mouse pointer for interactivity.
  let morphCenterX = mouseX;
  let morphCenterY = mouseY;

  // Define the radius of the morphing effect
  // The mouse's X-position controls the base radius, allowing you to make the effect larger or smaller.
  let baseRadius = map(mouseX, 0, width, 50, 300); // Base radius from 50 to 300 pixels
  let morphRadius = baseRadius;

  // Define the strength of the morphing effect (bulge/pinch)
  // Audio level controls the main intensity of the bulge/pinch effect.
  // timeFactor adds a subtle, continuous oscillation on top of the audio reactivity.
  let audioMorphFactor = map(level, 0, 1, -0.7, 0.7); // Stronger audio influence for noticeable effect
  let timeMorphFactor = map(timeFactor, -1, 1, -0.1, 0.1); // Subtle time oscillation for continuous movement
  let morphFactor = audioMorphFactor + timeMorphFactor;

  // --- END REACTIVITY ---

  // Loop through every pixel on the canvas
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      // Calculate the index for the current pixel in the canvas's pixels array
      // Each pixel has 4 values (R, G, B, A)
      let canvasIndex = (x + y * width) * 4;

      // Calculate the distance and angle of the current pixel from the morph center
      let dx = x - morphCenterX;
      let dy = y - morphCenterY;
      let dist = sqrt(dx * dx + dy * dy);

      // Check if the current pixel is within the morphing radius
      if (dist < morphRadius) {
        // Normalize the distance (0 to 1 within the radius)
        let normalizedDist = dist / morphRadius;

        // Calculate a displacement value using a sine wave
        // This creates a smooth bulge/pinch effect that is strongest at the center
        // and fades out towards the edge of the morphRadius.
        let displacement = sin(normalizedDist * PI) * morphFactor * morphRadius;

        // Calculate the new distance from the morph center after displacement
        let newDist = dist + displacement;

        // Calculate the angle of the pixel relative to the morph center
        let angle = atan2(dy, dx);

        // Convert the new polar coordinates back to Cartesian coordinates
        let newX = morphCenterX + newDist * cos(angle);
        let newY = morphCenterY + newDist * sin(angle);

        // Constrain the new coordinates to be within the bounds of the video feed
        // This prevents trying to access pixels outside the video, which would cause errors.
        newX = constrain(newX, 0, video.width - 1);
        newY = constrain(newY, 0, video.height - 1);

        // Calculate the index for the pixel at the new coordinates in the video's pixels array
        // We use floor() because pixel coordinates must be integers.
        let videoIndex = (floor(newX) + floor(newY) * video.width) * 4;

        // Copy the color from the original video at the new coordinates to the current canvas pixel
        pixels[canvasIndex] = video.pixels[videoIndex];       // Red
        pixels[canvasIndex + 1] = video.pixels[videoIndex + 1]; // Green
        pixels[canvasIndex + 2] = video.pixels[videoIndex + 2]; // Blue
        pixels[canvasIndex + 3] = video.pixels[videoIndex + 3]; // Alpha
      } else {
        // If the pixel is outside the morphing radius, just copy the original video pixel
        // Check if the canvas pixel (x, y) is within the bounds of the video feed
        if (x < video.width && y < video.height) {
          let videoIndex = (x + y * video.width) * 4;
          pixels[canvasIndex] = video.pixels[videoIndex];
          pixels[canvasIndex + 1] = video.pixels[videoIndex + 1];
          pixels[canvasIndex + 2] = video.pixels[videoIndex + 2];
          pixels[canvasIndex + 3] = video.pixels[videoIndex + 3];
        } else {
          // If the canvas pixel is outside the video bounds (e.g., if canvas is larger than video),
          // fill it with the background color.
          pixels[canvasIndex] = 220;
          pixels[canvasIndex + 1] = 220;
          pixels[canvasIndex + 2] = 220;
          pixels[canvasIndex + 3] = 255;
        }
      }
    }
  }

  // Apply all the pixel changes to the canvas
  updatePixels();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-apply pixelDensity(1) after resizing
  pixelDensity(1);
  // Also resize the video capture to match the new canvas size
  if (video) {
    video.size(width, height);
  }
}