Sketch 2026-02-07 15:33

function preload() {
  // Load the image file
  // Make sure the filename matches exactly 'paul-on-tractor-pencil-pixels.jpg'
  img = loadImage('paul-on-tractor-pencil-pixels.jpg');
}

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 image
  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
}

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.");
  }
}

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

  // 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 image
  // This ensures we have access to the original image data.
  img.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 original image
        // This prevents trying to access pixels outside the image, which would cause errors.
        newX = constrain(newX, 0, img.width - 1);
        newY = constrain(newY, 0, img.height - 1);

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

        // Copy the color from the original image at the new coordinates to the current canvas pixel
        pixels[canvasIndex] = img.pixels[imgIndex];       // Red
        pixels[canvasIndex + 1] = img.pixels[imgIndex + 1]; // Green
        pixels[canvasIndex + 2] = img.pixels[imgIndex + 2]; // Blue
        pixels[canvasIndex + 3] = img.pixels[imgIndex + 3]; // Alpha
      } else {
        // If the pixel is outside the morphing radius, just copy the original image pixel
        // Check if the canvas pixel (x, y) is within the bounds of the image
        if (x < img.width && y < img.height) {
          let imgIndex = (x + y * img.width) * 4;
          pixels[canvasIndex] = img.pixels[imgIndex];
          pixels[canvasIndex + 1] = img.pixels[imgIndex + 1];
          pixels[canvasIndex + 2] = img.pixels[imgIndex + 2];
          pixels[canvasIndex + 3] = img.pixels[imgIndex + 3];
        } else {
          // If the canvas pixel is outside the image bounds (e.g., if canvas is larger than image),
          // 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);
}