//var bpm = 100;

var beat = 0;

var val;

​

var nSteps = 6;

var currentStep = 0;

​

var nTracks = 6;

var cells = [];

var playButton;

//var bpmSlider;

​

// Visuals

var t = 30;

var l = 30;

var gridWidth, gridHeight, cellWidth, cellHeight;

var gray;

var colors = ["#ffffe1", "#c2eeff", "#abffee", "#d6ffab", "#e8f3fd", "#ffcff2"]

​

​

​

// Sound

var kit;

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

kit = new Tone.Players(

    {

      "kick" : "/44.wav",

      "snare" : "/34.wav",

      "hh" : "/44.wav",

      "hho" : "/58.wav",

      "cym" : "/68.wav",

      "perc" : "/78.wav",

    }

);

kit.toMaster();

​

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

​

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;

    }

  slider = createSlider(15, 100, 20);

  slider.position(10, 10);

  slider.style('width', '160px');

  }

  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(50);

  noStroke;

  var val = slider.value();

  //background(val);

  // 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, 20);

      }

    }

  }

​

Tone.Transport.bpm.value = val;

  // 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;

    noStroke();

    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(255, 60);

      noStroke();

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

    }

  }

}

​

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');

    }

  }

}