var bpm = 60;

var beat = 0;

​

var nSteps = 8;

var currentStep = 0;

​

var nTracks = 4;

var cells = [];

var playButton;

​

// Visuals

var t = 30;

var l = 25;

var gridWidth, gridHeight, cellWidth, cellHeight;

var gray;

var colors = ["#999999", "#909090", "#707070", "#505050", "#303030"]

​

// Sound

var kit;

var drumNames = ["kick", "snare", "hh", "hho"];

kit = new Tone.Players(

    {

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

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

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

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

    }

);

kit.toMaster();

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

​

function setup() {

  // Initialize all sequencer cells.ON: 1. OFF: 0.

  for(var track = 0; track < nTracks; track++){

    cells[track] = [];

    for(var step = 0; step < nSteps; step++){

        cells[track][step] = 0;

    }

  }

  playButton = createButton('play');

  playButton.position(540, 10);

  playButton.mouseClicked(togglePlay);

​

  createCanvas(600, 300);

  gridWidth = width - 2*l;

  gridHeight = height - 2*t;

  cellWidth = gridWidth / nSteps;

  cellHeight = gridHeight / nTracks;

  gray =  color(178, 178, 188);

​

}

​

function onBeat(time){

  var velocity = 0.5;

  currentStep = beat % nSteps;

  for(var track = 0; track < nTracks; track++){

    if(cells[track][currentStep]){

      var hh = kit.get(drumNames[track]);

      hh.start(time);

    }

  }

  beat++; 

}

​

function draw(){

  background(255);

  stroke(gray);

  // Draw cells that are on

  for(var step = 0; step < nSteps; step++){

    for(var track = 0; track < nTracks; track++){

      if(cells[track][step] == 1){

        fill(colors[track]);

        rect(l+ step*cellWidth, t + track*cellHeight, cellWidth, cellHeight);

      }

    }

  }

  // Draw horizontal lines

  for(var i = 0; i <= nTracks; i++){

    var y = t + i*cellHeight;

    right = width - l;

    line(l, y, right, y);

  }

  // Draw vertical lines

  for(var i = 0; i <= nSteps; i++){

    right = width - l;

    stroke(gray);

    line(l + i*cellWidth, t, l + i*cellWidth, t + gridHeight);

    // Highlight the step that is playing

    // var step = (currentStep - 1) % nSteps;

    // if(step == 0 && currentStep != 0) step = nSteps - 1;

    var step = (beat - 1) % nSteps;

    if(i == step && Tone.Transport.state == "started"){

      fill(234, 30, 83, 60);

      noStroke();

      rect(l + i*cellWidth, t, cellWidth, gridHeight)

    }

  }

}

​

function mousePressed(){

  // If the mouse is within the bounds of the canvas

  if(   l < mouseX && mouseX < l + gridWidth &&

        t < mouseY && mouseY < t + gridHeight){

    // Account for margins

    var x = mouseX - l;

    var y = mouseY - t;

    // Determine which cell the mouse is on

    var i = floor(x / cellWidth);

    var j = floor(y / cellHeight);

    // Toggle cell on/off

    cells[j][i] = !cells[j][i];

  }

}

​

function togglePlay(){

  if(Tone.Transport.state == "started"){

    Tone.Transport.stop();

    playButton.html('play');

  }

  else{

    if(kit.loaded){

        Tone.Transport.start();

        playButton.html('stop');

    }

  }

}