Shape dance

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Initialize audio input and FFT analyzer
  mic = new p5.AudioIn(); // Create an audio input object
  // mic.start() is called later on user gesture for mobile compatibility

  fft = new p5.FFT(); // Create an FFT analyzer
  fft.setInput(mic); // Connect the FFT analyzer to the microphone input

  // Set up text for instructions
  textAlign(CENTER, CENTER); // Align text to the center
  textSize(18); // Set font size
  fill(255); // Set text color to white
  noStroke(); // No border for the text

  // Initially draw the instruction message
  background(0); // Black background
  text("Tap or click anywhere to start audio and watch the shapes dance!", width / 2, height / 2);
}

function draw() {
  if (!audioStarted) {
    // If audio hasn't started yet, we don't perform any audio analysis or visualization.
    // The instruction message drawn in setup() remains on screen.
    return; // Exit the draw loop early
  }

  background(0); // Black background for contrast

  // Analyze the audio spectrum using the FFT analyzer
  fft.analyze();

  // Get energy levels for different frequency bands
  // These values range from 0-255, representing the amplitude (loudness)
  // of frequencies in that band.
  let bassEnergy = fft.getEnergy("bass"); // Low frequencies (e.g., kick drums, bass lines)
  let midEnergy = fft.getEnergy("mid");   // Mid-range frequencies (e.g., vocals, guitars)
  let trebleEnergy = fft.getEnergy("treble"); // High frequencies (e.g., cymbals, high hats)

  // Map energy levels to visual parameters
  // The map() function converts a value from one range (0-255) to another
  // (e.g., a size range, an angle range, or a color brightness range).
  let ellipseSize = map(bassEnergy, 0, 255, width * 0.1, width * 0.4);
  let rotationAngle = map(midEnergy, 0, 255, 0, TWO_PI); // Rotate from 0 to 360 degrees
  let lineColor = map(trebleEnergy, 0, 255, 100, 255); // Color brightness based on treble

  // --- Central Pulsating Ellipse (Reacts to Bass) ---
  noStroke(); // No border for the ellipse
  // Fill color is pinkish, with opacity driven by bass energy.
  // Higher bass means more opaque (stronger presence), creating a pulsing effect.
  fill(255, 0, 150, bassEnergy);
  ellipse(width / 2, height / 2, ellipseSize, ellipseSize);

  // Add a subtle inner ellipse for more visual interest
  fill(150, 0, 255, bassEnergy / 2); // Purplish, more transparent
  ellipse(width / 2, height / 2, ellipseSize * 0.7, ellipseSize * 0.7);

  // --- Rotating Rectangles (Reacts to Mid-range) ---
  push(); // Save the current drawing state (translation, rotation, etc.)
  translate(width / 2, height / 2); // Move the origin (0,0) to the center of the canvas
  rotate(rotationAngle); // Rotate the canvas based on mid-range energy
  rectMode(CENTER); // Draw rectangles from their center point

  stroke(255, midEnergy, 0, midEnergy); // Orangish stroke, opacity based on mid-range energy
  noFill(); // No fill for the rectangles
  strokeWeight(2); // Set stroke thickness
  rect(0, 0, width * 0.3, width * 0.3); // Outer rectangle

  stroke(255, midEnergy, 0, midEnergy / 2); // More transparent stroke for the inner rectangle
  rect(0, 0, width * 0.25, width * 0.25); // Inner rectangle

  pop(); // Restore the drawing state (undo translate and rotate)

  // --- Spectrum Analyzer at the bottom (Reacts to Treble/Overall Frequencies) ---
  // fft.spectrum() returns an array of 1024 amplitude values (0-255)
  // across the entire frequency range.
  let spectrum = fft.spectrum();

  noFill(); // No fill for the spectrum shape
  // Stroke color varies with treble energy, creating a dynamic visual effect.
  stroke(lineColor, trebleEnergy, 255 - trebleEnergy);
  strokeWeight(1); // Set stroke thickness
  beginShape(); // Start drawing a custom shape (a series of connected vertices)
  vertex(0, height); // Start drawing from the bottom-left corner
  for (let i = 0; i < spectrum.length; i++) {
    // Map each frequency bin to an x-position across the canvas width
    let x = map(i, 0, spectrum.length, 0, width);
    // Map each amplitude value to a y-position, creating a waveform-like graph
    let y = map(spectrum[i], 0, 255, height, height * 0.6); // Spectrum goes from bottom to 60% up
    vertex(x, y); // Add a point to the shape
  }
  vertex(width, height); // End drawing at the bottom-right corner
  endShape(); // Complete the shape
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-draw instructions if audio hasn't started yet
  if (!audioStarted) {
    background(0); // Clear the canvas
    textAlign(CENTER, CENTER);
    textSize(20);
    fill(255);
    noStroke();
    text("Tap or click anywhere to start audio and watch the shapes dance!", width / 2, height / 2);
  }
}

function startAudio() {
  if (getAudioContext().state !== 'running') {
    getAudioContext().resume(); // Resume the audio context
    mic.start(); // Start the microphone input
    audioStarted = true; // Set flag to true
  }
}

function mousePressed() {
  startAudio();
}

function touchStarted() {
  startAudio();
  // Prevent default touch behavior (e.g., scrolling)
  return false;
}