let playButton;

let cellWidth = 120;

let cellHeight = 60;

​

let cell = [

  [0, 0, 0, 0],

  [0, 0, 0, 0],

  [0, 0, 0, 0],

  [0, 0, 0, 0]

 ];

let nSteps = 4;

let drumTypes = ["hh", "hho", "kick", "snare"];

​

let beat = 0;

let currentStep;

​

​

let kit = new Tone.Players(

  {

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

    "hho": "/samples/hho.mp3",

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

    "snare": "/samples/snare.mp3"

  }

);

​

let synth = new Tone.Synth();

synth.toDestination();

let soundArray = ["C4", "D4", "Eb4", "F4", "G4", "A5", "B5", "C5"];

​

kit.toDestination();

​

Tone.Transport.scheduleRepeat(onBeat, "4n");

​

function onBeat(time) {

  // let currentSound = kit.player("kick");

  // currentSound.start(time);

  currentStep = beat % nSteps;

  for(let drum = 0; drum < drumTypes.length; drum++) {

    if(cell[drum][currentStep]) {

      let currentSound = kit.player(drumTypes[drum]);

      currentSound.start(time);

    }

  }

  let randomNote = soundArray[floor(random(0, soundArray.length))];

  synth.triggerAttackRelease(randomNote, time);

  console.log(beat);

  beat++;

}

​

function setup() {

  createCanvas(480, 240);

  playButton = createButton("play");

  playButton.mousePressed(playSound);

}

​

function playSound() {

  Tone.Transport.start();

}

​

function draw() {

  for (let i = 0; i < drumTypes.length; i++) {

    for(let j = 0; j < nSteps; j++) {

      if (cell[i][j]) {

        fill("gray");

      } else {

        fill("white");

      }

      rect(j*cellWidth, i*cellHeight, cellWidth, cellHeight);

    }

  }

  fill('rgba(0, 255, 0, .5)');

  rect(currentStep*cellWidth, 0, cellWidth, height);

}

​

function mousePressed() {

  if (mouseX < width && mouseX > 0 && mouseY < height && mouseY > 0) {

    let pressedStep = floor(mouseX / cellWidth);

    let pressedDrumType = floor(mouseY / cellHeight);

    cell[pressedDrumType][pressedStep] = !cell[pressedDrumType][pressedStep];

  }

}

​

​