xesled.ai synth pad

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

  // Enable audio playback. This is crucial for p5.sound.
  // userStartAudio() must be called in response to a user gesture
  // (like a mouse click or key press) to bypass browser autoplay policies.
  userStartAudio();

  // Calculate pad size based on window dimensions and desired spacing
  padSizeX = (width - (cols + 1) * padSpacing) / cols;
  padSizeY = (height - (rows + 1) * padSpacing) / rows;

  // Generate musical frequencies (e.g., a chromatic scale over two octaves)
  // Starting from C4 (261.63 Hz)
  const baseFrequency = 261.63; // C4
  for (let i = 0; i < rows * cols; i++) {
    // Each pad corresponds to a note in a chromatic scale
    // frequency = baseFreq * 2^(noteIndex / 12)
    const freq = baseFrequency * pow(2, i / 12);
    frequencies.push(freq);

    // Create a sine oscillator for each frequency
    let osc = new p5.Oscillator('sine'); // 'sine', 'triangle', 'sawtooth', 'square'
    osc.freq(freq);
    osc.amp(0); // Start with 0 amplitude (silent)
    osc.start(); // Start the oscillator, but it won't be audible yet
    oscillators.push(osc);
  }

  // Generate colorful pads using HSB color mode
  colorMode(HSB, 360, 100, 100);
  for (let i = 0; i < rows * cols; i++) {
    // Vary hue for different colors
    padColors.push(color(i * (360 / (rows * cols)), 80, 90));
  }
  colorMode(RGB, 255); // Switch back to RGB for background

  // Initialize activePads 2D array to all false
  for (let i = 0; i < rows; i++) {
    activePads[i] = [];
    for (let j = 0; j < cols; j++) {
      activePads[i][j] = false;
    }
  }
}

function draw() {
  background(220); // Light gray background

  // Draw the 4x4 grid of pads
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      // Calculate pad position
      let x = padSpacing + j * (padSizeX + padSpacing);
      let y = padSpacing + i * (padSizeY + padSpacing);

      // Determine pad color
      let padColor = padColors[i * cols + j];

      // If the pad is currently playing, make it brighter for visual feedback
      if (activePads[i][j]) {
        // Switch to HSB to easily brighten the color
        colorMode(HSB, 360, 100, 100);
        let h = hue(padColor);
        let s = saturation(padColor);
        let b = brightness(padColor);
        fill(h, s, min(100, b + 20)); // Increase brightness, cap at 100
        colorMode(RGB, 255); // Switch back to RGB
      } else {
        fill(padColor);
      }

      noStroke(); // No border for pads
      rect(x, y, padSizeX, padSizeY, 10); // Draw rectangle with rounded corners
    }
  }
}

function mouseClicked() {
  // Determine which pad was clicked
  let gridX = floor((mouseX - padSpacing) / (padSizeX + padSpacing));
  let gridY = floor((mouseY - padSpacing) / (padSizeY + padSpacing));

  // Check if the click is within the grid boundaries
  if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows) {
    let padIndex = gridY * cols + gridX;
    let osc = oscillators[padIndex];

    // Check if the oscillator is already playing
    if (!activePads[gridY][gridX]) {
      // Set amplitude (volume) and play the tone
      osc.amp(0.5, 0.05); // Fade in to 0.5 amplitude over 0.05 seconds
      activePads[gridY][gridX] = true; // Mark pad as active

      // Stop the tone after a short delay (e.g., 200 milliseconds)
      setTimeout(() => {
        osc.amp(0, 0.2); // Fade out to 0 amplitude over 0.2 seconds
        activePads[gridY][gridX] = false; // Mark pad as inactive
      }, 200);
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized

  // Recalculate pad size for responsiveness
  padSizeX = (width - (cols + 1) * padSpacing) / cols;
  padSizeY = (height - (rows + 1) * padSpacing) / rows;
}