​

// Add a snare drum sound

// Play a kick/snare/snare/snare pattern

​

var w = 60;

​

// PATTERN

var totalBeats = 0;

var currentStep = 0;

​

// Change these lines to change your pattern. 

// 1 is ON; 0 is OFF

// for convenience, let's combine the following two patterns into one array 

// var snarePattern = [0, 1, 0, 1];

// var kickPattern = [1, 0, 1, 0]; 

​

var cells = [

  [0, 1, 0, 1], //cells[0] holds the snare pattern

  [1, 0, 1, 0] //cells[1] holds the kick pattern

]

​

​

// SOUNDS

​

// Create a Players object and load the "kick.mp3" and "snare.mp3" files

var kit = new Tone.Players({

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

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

});

​

// Connect the player output to the computer's audio output

kit.toMaster();

​

// Create a loop: call playBeat every half a second

// Try other durations, like "1s" and "0.25s"

Tone.Transport.scheduleRepeat(playBeat, "0.5s");

​

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

Tone.Buffer.on('load', play);

​

function play() {

  Tone.Transport.start();

}

​

// Audio playback loop

function playBeat(time) {

  // Make sure the sound files have been completely loaded

  if (kit.loaded) {

    currentStep = totalBeats % 4;

​

    if (cells[0][currentStep] == 1) {

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

    }

    if (cells[1][currentStep] == 1) {

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

    }

​

    totalBeats++;

  }

}

​

// GRAPHICS

​

function setup() {

  createCanvas(240, 120);

}

​

function draw() {

  background(255);

​

  fill(100);

  noStroke();

  for (var step = 0; step < 4; step++) { // we have 4 steps

    for (var track = 0; track < 2; track++) { //we have 4 tracks

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

        rect(step * w, track * w, w, w);

      }

    }

  }

​

  // Highlight current step

  fill(0, 200, 200, 50);

  rect(currentStep * w, 0, w, w * 2);

}

​

​

function mousePressed(){

  // Determine which cell the mouse is on

  var i = floor(mouseX / w);

  var j = floor(mouseY / w);

  // Toggle cell on/off

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

}