let stopButton;

const notes = ["A1", "B1", "C1", "D1", "E1", "F1"];

let index = 0;

const rowLength = 12;

const numRows = 6;

const grid = [];

const sliders = [];

​

function setup() {

  createCanvas(300, 350);

  // create buttons and assign callback functions

  startButton = createButton("start transport");

  stopButton = createButton("stop transport");

  startButton.mousePressed(startTransport);

  stopButton.mousePressed(stopTransport);

​

  // For-loop to create grid of checkboxes

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

    let row = [];

    for (let i = 0; i < rowLength; i++) {

      let cb = createCheckbox();

      cb.position(i * 20 + 25, j * 20 + 60);

      row.push(cb);

    }

    grid.push(row);

  }

  // For-loop to create sliders

  for (let i = 0; i < 4; i++) {

    let s = createSlider(0, 1, 0, 0.01);

    s.position(25, i * 30 + 200);

    s.style("width", "230px");

    sliders.push(s);

  }

  sliders[3].value(0.5)

}

​

function draw() {

  background("gray");

  textSize(18);

  text('Tone.808', width/2-45, 35)

  // Update FX values based on slider values

  if (mouseIsPressed) {

    reverb.wet.value = sliders[0].value();

    crusher.wet.value = sliders[1].value();

    delay.wet.value = sliders[2].value();

    delay.delayTime.value = "16n"

    Tone.Transport.bpm.value = map(sliders[3].value(), 0, 1, 60, 180);

  }

}

​

// Our loop 

const loop = new Tone.Loop((time) => {

  let step = index % rowLength;

  for (let row of grid) {

    for (let box of row) {

      box.style("background-color", "grey");

    }

    let cb = row[step];

    cb.style("background-color", "coral");

    let note = notes[grid.indexOf(row)];

    if (cb.checked()) {

      sampler.triggerAttackRelease(note, "8n", time);

    }

  }

  index++;

}, "8n").start(0);

​

// functions to start and stop transport

function startTransport() {

  Tone.start();

  Tone.Transport.start();

}

​

function stopTransport() {

  Tone.Transport.stop();

}

​