AI Synth Pad - Interactive Musical Grid Click the colorful pads to play musical tones! A 4x4 grid o

  constructor(x, y, size, color, noteMIDI) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.note = noteMIDI;
    this.freq = midiToFreq(noteMIDI); // Convert MIDI note number to frequency in Hz

    // Create a p5.Oscillator (sine wave by default)
    this.oscillator = new p5.Oscillator('sine');
    this.oscillator.amp(0); // Start with 0 amplitude (silent)
    this.oscillator.freq(this.freq); // Set the oscillator's frequency to the pad's note
    this.oscillator.start(); // Start the oscillator, but it won't make sound until amp() is > 0

    this.glowAlpha = 0; // Initial glow brightness (0 = fully transparent)
  }

  display() {
    // Draw the pad base square
    fill(this.color);
    stroke(255); // White border
    strokeWeight(2); // Border thickness
    rect(this.x, this.y, this.size, this.size);

    // Draw the glow effect if it's visible
    if (this.glowAlpha > 0.1) {
      noStroke(); // No border for the glow
      fill(this.color, this.glowAlpha); // Use the pad's color with the glow's transparency
      rect(this.x, this.y, this.size, this.size);
    }
  }

  play() {
    const attackTime = 0.05; // Time in seconds for the sound to fade in
    const decayTime = 0.2;  // Time in seconds for the sound to fade out after the attack

    // Fade in to 0.5 amplitude
    this.oscillator.amp(0.5, attackTime);
    // Fade out to 0 amplitude after the attack and decay times
    this.oscillator.amp(0, attackTime + decayTime);

    this.glowAlpha = 200; // Set glow to a bright value
  }

  pulse() {
    this.glowAlpha *= glowDecay; // Multiply glowAlpha by decay factor each frame
  }

  contains(mx, my) {
    return mx > this.x && mx < this.x + this.size &&
           my > this.y && my < this.y + this.size;
  }

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Set color mode to HSB for easier color variations (Hue, Saturation, Brightness)
  colorMode(HSB, 360, 100, 100);
  noStroke(); // By default, don't draw strokes for background
  userStartAudio(); // Important for unlocking audio context in modern browsers on user interaction
  initializePads(); // Set up the pad grid
}

function initializePads() {
  pads = []; // Clear any existing pads

  // Calculate total grid dimensions (e.g., 80% of canvas width/height)
  const totalGridWidth = width * 0.8;
  const totalGridHeight = height * 0.8;

  // Determine pad size. We want square pads, so use the minimum of the two dimensions,
  // divided by the number of columns/rows.
  padSize = min(totalGridWidth / cols, totalGridHeight / rows);

  // Recalculate actual grid dimensions based on the determined padSize
  const actualGridWidth = padSize * cols;
  const actualGridHeight = padSize * rows;

  // Calculate margins to center the grid on the canvas
  marginX = (width - actualGridWidth) / 2;
  marginY = (height - actualGridHeight) / 2;

  let noteIndex = 0; // Index to cycle through our midiNotes array

  // Loop through rows and columns to create each pad
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      // Calculate pad position
      const x = marginX + c * padSize;
      const y = marginY + r * padSize;

      // Generate a unique color using HSB color mode
      // Hue ranges from 0 to 360, so we map our note index to this range
      const hue = map(noteIndex, 0, midiNotes.length, 0, 360);
      const saturation = 80;
      const brightness = 90;
      const padColor = color(hue, saturation, brightness);

      // Get the MIDI note for this pad, cycling through midiNotes if needed
      const note = midiNotes[noteIndex % midiNotes.length];

      // Create a new Pad object and add it to our pads array
      pads.push(new Pad(x, y, padSize, padColor, note));
      noteIndex++;
    }
  }
}

function draw() {
  background(0); // Dark background

  // Loop through all pads and update their glow and display them
  for (let pad of pads) {
    pad.pulse();   // Update the glow effect
    pad.display(); // Draw the pad on the canvas
  }
}

function mousePressed() {
  for (let pad of pads) {
    if (pad.contains(mouseX, mouseY)) {
      pad.play(); // Play the note and trigger glow for the clicked pad
      // No 'break' here, as in some complex layouts, multiple pads might overlap
      // For this simple grid, only one will be clicked at a time.
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  initializePads(); // Re-initialize pads to adapt to the new window size
}