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

This sketch creates an interactive 4x4 grid of colorful musical pads on a dark background. Clicking any pad plays a musical note from a C major scale while triggering a glowing visual feedback effect that fades out over time.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Object-oriented programming with classesp5.sound library and oscillatorsMIDI note to frequency conversionHSB color modeMouse interaction and collision detectionAnimation with decay effectsResponsive canvas sizingAudio context initialization

🔄 Code Flow

Code flow showing setup, initializepads, draw, mousepressed, windowresized, pad

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> initializepads[initializePads] setup --> windowresized[windowResized] setup --> draw[draw loop] draw --> pad-loop[Pad Update Loop] pad-loop --> glow-rendering[Glow Rendering] pad-loop --> collision-check[Pad Collision Detection] pad-loop --> pad-loop click setup href "#fn-setup" click initializepads href "#fn-initializepads" click windowresized href "#fn-windowresized" click draw href "#fn-draw" click pad-loop href "#sub-pad-loop" click glow-rendering href "#sub-glow-rendering" click collision-check href "#sub-collision-check" initializepads --> grid-sizing[Grid Sizing Logic] initializepads --> centering-calculation[Centering Margins] initializepads --> pad-creation-loop[Pad Creation Loop] pad-creation-loop --> color-mapping[Hue Color Mapping] click grid-sizing href "#sub-grid-sizing" click centering-calculation href "#sub-centering-calculation" click pad-creation-loop href "#sub-pad-creation-loop" click color-mapping href "#sub-color-mapping" mousepressed[mousePressed] --> collision-check collision-check --> pad[Pad] pad --> constructor[Constructor Initialization] pad --> play[Play Sound] pad --> pulse[Pulsate Glow] click mousepressed href "#fn-mousepressed" click pad href "#fn-pad" click constructor href "#sub-constructor" click play href "#sub-play" click pulse href "#sub-pulse"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes the canvas, sets up color mode for easier color generation, and prepares the audio system and pads for interaction.

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  userStartAudio();
  initializePads();
}

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window, making the sketch responsive to window size
colorMode(HSB, 360, 100, 100): Switches from RGB to HSB color mode, where colors are defined by Hue (0-360), Saturation (0-100), and Brightness (0-100). This makes it easier to create a rainbow of pad colors
noStroke(): Disables stroke drawing by default, so shapes won't have outlines unless explicitly set
userStartAudio(): Unlocks the Web Audio API context, which modern browsers require for sound to play after user interaction
initializePads(): Calls the function that creates all 16 pad objects and calculates their positions on the canvas

`initializePads()`

initializePads() is called in setup() and windowResized() to create or recreate the pad grid. It handles all the layout calculations to ensure pads are centered, properly sized, and evenly spaced. The nested loop creates all 16 pads in order from left to right, top to bottom.

function initializePads() {
  pads = [];
  const totalGridWidth = width * 0.8;
  const totalGridHeight = height * 0.8;
  padSize = min(totalGridWidth / cols, totalGridHeight / rows);
  const actualGridWidth = padSize * cols;
  const actualGridHeight = padSize * rows;
  marginX = (width - actualGridWidth) / 2;
  marginY = (height - actualGridHeight) / 2;
  let noteIndex = 0;
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const x = marginX + c * padSize;
      const y = marginY + r * padSize;
      const hue = map(noteIndex, 0, midiNotes.length, 0, 360);
      const saturation = 80;
      const brightness = 90;
      const padColor = color(hue, saturation, brightness);
      const note = midiNotes[noteIndex % midiNotes.length];
      pads.push(new Pad(x, y, padSize, padColor, note));
      noteIndex++;
    }
  }
}

🔧 Subcomponents:

calculation Grid Sizing Logic padSize = min(totalGridWidth / cols, totalGridHeight / rows)

Calculates the size of each square pad so the entire grid fits within 80% of the canvas while maintaining square shapes

calculation Centering Margins marginX = (width - actualGridWidth) / 2

Calculates horizontal and vertical margins to center the grid on the canvas

for-loop Nested Loop for Pad Creation for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) {

Iterates through all 16 grid positions (4 rows × 4 columns) to create a Pad object for each position

calculation Hue Color Mapping const hue = map(noteIndex, 0, midiNotes.length, 0, 360)

Maps the pad's index to a hue value between 0-360, creating a rainbow effect across the grid

Line by Line:

pads = []: Clears the pads array, removing any previously created pads. This allows the function to be called multiple times (like on window resize) without duplicating pads
const totalGridWidth = width * 0.8: Sets the grid to occupy 80% of the canvas width, leaving 10% margin on each side
const totalGridHeight = height * 0.8: Sets the grid to occupy 80% of the canvas height, leaving 10% margin on top and bottom
padSize = min(totalGridWidth / cols, totalGridHeight / rows): Calculates pad size by dividing available space by number of columns/rows, then takes the minimum to ensure square pads fit without overlapping
const actualGridWidth = padSize * cols: Calculates the actual width of the grid based on the determined pad size
const actualGridHeight = padSize * rows: Calculates the actual height of the grid based on the determined pad size
marginX = (width - actualGridWidth) / 2: Calculates the left margin needed to center the grid horizontally on the canvas
marginY = (height - actualGridHeight) / 2: Calculates the top margin needed to center the grid vertically on the canvas
let noteIndex = 0: Initializes a counter to track which note in the midiNotes array to assign to each pad
for (let r = 0; r < rows; r++): Outer loop iterates through each row (0 to 3) of the 4×4 grid
for (let c = 0; c < cols; c++): Inner loop iterates through each column (0 to 3) for the current row
const x = marginX + c * padSize: Calculates the x position of the pad by adding the left margin to the column index multiplied by pad size
const y = marginY + r * padSize: Calculates the y position of the pad by adding the top margin to the row index multiplied by pad size
const hue = map(noteIndex, 0, midiNotes.length, 0, 360): Maps the note index (0-15) to a hue value (0-360), so the first pad is red (0°) and colors progress through the spectrum
const padColor = color(hue, saturation, brightness): Creates a color using HSB mode with the calculated hue, 80% saturation, and 90% brightness
const note = midiNotes[noteIndex % midiNotes.length]: Gets the MIDI note for this pad from the midiNotes array using modulo to wrap around if needed
pads.push(new Pad(x, y, padSize, padColor, note)): Creates a new Pad object with the calculated position, size, color, and note, then adds it to the pads array
noteIndex++: Increments the note index counter so the next pad gets the next note and color

`draw()`

draw() runs continuously at 60 frames per second. Each frame, it clears the canvas with a black background, then updates and redraws all pads. This creates the animation of the glow effects fading out over time.

function draw() {
  background(0);
  for (let pad of pads) {
    pad.pulse();
    pad.display();
  }
}

🔧 Subcomponents:

for-loop Pad Update Loop for (let pad of pads)

Iterates through all pads to update their glow effects and redraw them each frame

Line by Line:

background(0): Fills the entire canvas with black (0 in HSB mode), clearing the previous frame and creating the dark background
for (let pad of pads): Uses a for-of loop to iterate through each Pad object in the pads array
pad.pulse(): Calls the pulse() method on each pad, which decays its glow effect by multiplying glowAlpha by 0.95
pad.display(): Calls the display() method on each pad, which draws the pad square and its glow effect on the canvas

`mousePressed()`

mousePressed() is a p5.js event function that runs whenever the mouse button is pressed. It checks each pad to see if the click was inside it, and plays the corresponding note if so. The loop continues checking all pads even after finding a match, allowing for potential overlapping pads in more complex layouts.

function mousePressed() {
  for (let pad of pads) {
    if (pad.contains(mouseX, mouseY)) {
      pad.play();
    }
  }
}

🔧 Subcomponents:

conditional Pad Collision Detection if (pad.contains(mouseX, mouseY))

Checks if the mouse click position is inside the current pad's boundaries

Line by Line:

for (let pad of pads): Loops through all pads to check which one (if any) was clicked
if (pad.contains(mouseX, mouseY)): Calls the pad's contains() method to check if the mouse position is inside the pad's rectangular area
pad.play(): If the mouse is inside the pad, calls the play() method to start the note and trigger the glow effect

`windowResized()`

windowResized() is a p5.js event function that runs whenever the browser window is resized. It ensures the sketch remains responsive by adjusting the canvas and recalculating the pad grid layout.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  initializePads();
}

Line by Line:

resizeCanvas(windowWidth, windowHeight): Resizes the canvas to match the new window dimensions whenever the browser window is resized
initializePads(): Recalculates the pad layout and recreates all pads to fit the new canvas size, ensuring the grid stays centered and properly sized

`Pad class`

The Pad class represents a single interactive square on the grid. Each pad has its own oscillator for sound generation, position, color, and glow state. The constructor initializes all properties, display() renders the pad visually, play() triggers both sound and glow, pulse() updates the glow decay, and contains() handles collision detection for mouse clicks.

class Pad {
  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);
    this.oscillator = new p5.Oscillator('sine');
    this.oscillator.amp(0);
    this.oscillator.freq(this.freq);
    this.oscillator.start();
    this.glowAlpha = 0;
  }

  display() {
    fill(this.color);
    stroke(255);
    strokeWeight(2);
    rect(this.x, this.y, this.size, this.size);
    if (this.glowAlpha > 0.1) {
      noStroke();
      fill(this.color, this.glowAlpha);
      rect(this.x, this.y, this.size, this.size);
    }
  }

  play() {
    const attackTime = 0.05;
    const decayTime = 0.2;
    this.oscillator.amp(0.5, attackTime);
    this.oscillator.amp(0, attackTime + decayTime);
    this.glowAlpha = 200;
  }

  pulse() {
    this.glowAlpha *= glowDecay;
  }

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

🔧 Subcomponents:

calculation Constructor Initialization this.freq = midiToFreq(noteMIDI)

Converts MIDI note number to frequency and initializes the oscillator with that frequency

conditional Glow Rendering if (this.glowAlpha > 0.1)

Only draws the glow effect when it's visible enough to see, improving performance

Line by Line:

constructor(x, y, size, color, noteMIDI): Defines the constructor function that runs when a new Pad is created, accepting position, size, color, and MIDI note parameters
this.x = x: Stores the pad's x position as a property of the object
this.y = y: Stores the pad's y position as a property of the object
this.size = size: Stores the pad's size (width and height, since pads are square) as a property
this.color = color: Stores the pad's color as a property
this.note = noteMIDI: Stores the MIDI note number as a property for reference
this.freq = midiToFreq(noteMIDI): Converts the MIDI note number to a frequency in Hz and stores it. Note: midiToFreq() is a built-in p5.sound function
this.oscillator = new p5.Oscillator('sine'): Creates a new sine wave oscillator object that will generate the sound for this pad
this.oscillator.amp(0): Sets the oscillator's amplitude (volume) to 0, so it's silent initially
this.oscillator.freq(this.freq): Sets the oscillator's frequency to the calculated frequency for this pad's note
this.oscillator.start(): Starts the oscillator running. It won't make sound until its amplitude is increased above 0
this.glowAlpha = 0: Initializes the glow transparency to 0, making the glow invisible until the pad is played
fill(this.color): Sets the fill color to the pad's color for drawing the main pad square
stroke(255): Sets the stroke color to white (255 in HSB mode) for the pad's border
strokeWeight(2): Sets the border thickness to 2 pixels
rect(this.x, this.y, this.size, this.size): Draws the main pad square at its position with its size
if (this.glowAlpha > 0.1): Only draws the glow if it's visible (alpha greater than 0.1), avoiding unnecessary drawing of invisible effects
noStroke(): Removes the stroke for the glow effect so it doesn't have a border
fill(this.color, this.glowAlpha): Sets the fill to the pad's color with the current glow transparency value
rect(this.x, this.y, this.size, this.size): Draws a second square on top of the pad with the glow color and transparency, creating the glowing effect
const attackTime = 0.05: Sets the fade-in time to 50 milliseconds for a quick attack when the note starts
const decayTime = 0.2: Sets the decay time to 200 milliseconds for a smooth fade-out after the attack
this.oscillator.amp(0.5, attackTime): Fades the oscillator's amplitude from its current value to 0.5 over 50 milliseconds, creating the attack phase
this.oscillator.amp(0, attackTime + decayTime): Fades the oscillator's amplitude to 0 over a total of 250 milliseconds (50ms attack + 200ms decay), creating the decay phase
this.glowAlpha = 200: Sets the glow to a bright value (200 out of 255 in HSB mode) when the pad is played
this.glowAlpha *= glowDecay: Multiplies the glow alpha by 0.95 each frame, causing it to fade out gradually over time
return mx > this.x && mx < this.x + this.size && my > this.y && my < this.y + this.size: Returns true if the mouse position (mx, my) is within the pad's rectangular boundaries, false otherwise

📦 Key Variables

pads array

Stores all 16 Pad objects created in the grid. Used in draw() and mousePressed() to update and interact with all pads

let pads = [];

cols number

Constant that defines the number of columns in the grid (4). Used in initializePads() to calculate grid layout

const cols = 4;

rows number

Constant that defines the number of rows in the grid (4). Used in initializePads() to calculate grid layout

const rows = 4;

padSize number

Stores the calculated width and height of each square pad. Recalculated in initializePads() based on canvas size

let padSize;

marginX number

Stores the left margin used to center the grid horizontally on the canvas. Recalculated when window resizes

let marginX, marginY;

marginY number

Stores the top margin used to center the grid vertically on the canvas. Recalculated when window resizes

let marginX, marginY;

glowDecay number

Constant that controls how fast the glow effect fades (0.95 means 95% brightness retained each frame). Used in the pulse() method

const glowDecay = 0.95;

midiNotes array

Array of 16 MIDI note numbers representing a C major scale from C4 to D6. Each pad is assigned one note from this array

const midiNotes = [60, 62, 64, 65, 67, 69, 71, 72, 74, 76, 77, 79, 81, 83, 84, 86];

🧪 Try This!

Experiment with the code by making these changes:

Change the glowDecay value from 0.95 to 0.90 to make the glow fade out faster, or to 0.98 to make it fade slower. Notice how this affects the visual feedback when you click pads
Modify the midiNotes array to use different notes, like a pentatonic scale: [60, 62, 64, 67, 69, 72, 74, 76, 79, 81, 84, 86, 88, 91, 93, 95]. This changes the musical scale of the synth pad
Change the attackTime and decayTime values in the play() method (currently 0.05 and 0.2) to create different sound envelopes. Try 0.1 and 0.5 for a slower, more dramatic sound
Modify the oscillator type from 'sine' to 'triangle' or 'square' in the Pad constructor to change the sound timbre. Each wave type creates a different tone quality
Adjust the grid size by changing the 0.8 multiplier in initializePads() to 0.6 or 1.0 to make the pads smaller or larger on the canvas
Change the saturation and brightness values in initializePads() from 80 and 90 to different numbers like 100 and 70 to create more vibrant or darker pad colors
Modify the oscillator amplitude in play() from 0.5 to 0.3 or 0.8 to make the sound quieter or louder

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG Pad class constructor

The code calls midiToFreq() but this function is not defined in the sketch. It relies on p5.sound library's built-in function, which may not be available or could cause errors if the library isn't loaded properly

💡 Add a comment explaining that midiToFreq() is from p5.sound, or implement a custom conversion function: const midiToFreq = (midi) => 440 * Math.pow(2, (midi - 69) / 12);

PERFORMANCE mousePressed() function

The loop continues checking all pads even after finding a match. For a 4x4 grid this is fine, but for larger grids it wastes processing time

💡 Add a break statement after pad.play() to exit the loop once a pad is found: if (pad.contains(mouseX, mouseY)) { pad.play(); break; }

FEATURE Pad class

All pads use the same oscillator amplitude (0.5) and envelope times (0.05 and 0.2). This creates uniform sound for all notes, which can sound less musical

💡 Vary the amplitude or envelope based on the note frequency. Higher notes could have shorter decay times, or lower notes could have higher amplitude for better balance

STYLE initializePads() function

The saturation and brightness values (80, 90) are hardcoded inside the loop, making them difficult to adjust globally

💡 Define these as constants at the top of the file: const PAD_SATURATION = 80; const PAD_BRIGHTNESS = 90; Then use them in the loop

BUG Pad class display() method

The glow effect is drawn by overlaying a second rectangle with transparency. If glowAlpha is very high, it can completely obscure the pad's border and make it look flat

💡 Draw the glow effect behind the pad instead of on top, or use a larger rectangle with lower opacity to create a halo effect: rect(this.x - 5, this.y - 5, this.size + 10, this.size + 10)

FEATURE sketch.js global scope

There's no visual indication of which pad is currently playing or any feedback about the audio state

💡 Add text display showing the current note name or MIDI number when a pad is played, or add a visual indicator like a pulsing border

Preview

Code flow diagram showing the structure of AI Synth Pad - Interactive Musical Grid Click the colorful pads to play musical tones! A 4x4 grid o - Code flow showing setup, initializepads, draw, mousepressed, windowresized, pad — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview