"kick": "samples/505/kick.mp3", 

  "snare": "samples/505/snare.mp3",

  "hh": "samples/505/hh.mp3",

  "hho": "samples/505/hho.mp3"

});

kit.toDestination();

​

var cells = [0, 0, 0, 0];

​

Tone.Transport.scheduleRepeat(playBeat, "8n"); // Schedule to repeat every quarter note

​

function playBeat(time) {

  // Make sure the sound files have been completely loaded

  if (kit.loaded) {

    // Use the position in the transport to determine which beat we are on

    let beat = Math.floor(Tone.Transport.position.split(":")[1]) % 4; // Get the current quarter note position

​

    // Play sounds based on the current beat

    if (cells[beat] == 1) {

      switch (beat) {

        case 0: // Top-left (snare)

          kit.player("snare").start(time);

          break;

        case 1: // Top-right (kick)

          kit.player("kick").start(time);

          break;

        case 2: // Bottom-left (hh)

          kit.player("hh").start(time);

          break;

        case 3: // Bottom-right (hho)

          kit.player("hho").start(time);

          break;

      }

    }

  }

}

​

let colors = [

  [184, 186, 207],  // Default color for top-left (kick)

  [210, 213, 221],  // Default color for top-right (snare)

  [210, 213, 221],  // Default color for bottom-left (hh)

  [184, 186, 207]   // Default color for bottom-right (hho)

];

​

const clickColor = [70, 77, 119]; // The color when a quadrant is clicked

​

function setup() {

  createCanvas(400, 400); 

  noStroke();

  drawQuadrants();

}

​

function drawQuadrants() {

  fill(cells[0] ? clickColor : colors[0]);

  rect(0, 0, width/2, height/2, 0, 0, 70, 0); // Top-left

  fill(cells[1] ? clickColor : colors[1]);

  rect(width/2, 0, width/2, height/2, 0, 0, 0, 70); // Top-right

  fill(cells[2] ? clickColor : colors[2]);

  rect(0, height/2, width/2, height/2, 0, 70, 0, 0); // Bottom-left

  fill(cells[3] ? clickColor : colors[3]);

  rect(width/2, height/2, width/2, height/2, 70, 0, 0); // Bottom-right

}

​

function mousePressed() {

  if (kit.loaded) {

    if (mouseX < width/2 && mouseY < height/2&& (mouseX < width/2-20 && mouseY < height/2-10  )) { // Top-left (snare)

      cells[0] = !cells[0];

    }

    if (mouseX > width/2 && mouseY < height/2&& (mouseX >width/2+20 && mouseY <height/2-10 )) { // Top-right (kick)

      cells[1] = !cells[1];

    }

    if (mouseX < width/2 && mouseY > height/2 && (mouseX < width/2-20 && mouseY >height/2+10)) { // Bottom-left (hh)

      cells[2] = !cells[2];

    }

    if (mouseX > width/2 && mouseY > height/2 && (mouseX >width/2+20 && mouseY >height/2-10 )) { // Bottom-right (hho)

      cells[3] = !cells[3];

    }

  }

​

  if(mouseX > width/2-25 && mouseX < width/2+25 && mouseY > height/2-25 && mouseY < height/2+25) {

    cells = [random([0, 1]), random([0, 1]), random([0, 1]), random([0, 1])]; // Randomize sounds on click

  }

  drawQuadrants(); // Redraw the quadrants with the click color

}

​

// Once all audio files have been loaded, start the Tone playhead

Tone.loaded().then(function() {

  console.log("loaded");

  Tone.Transport.start();

});

​

function draw() {

  fill(134, 108, 142);

  ellipse(width/2, height/2, 50);

  fill(255);

  text('Random', width/2-22, height/2+4);

}

​