Code of Music: Melody Sequencer

// Sequencer

var nSteps = 32;

var nTracks = 16;

var cells = [];

var playButton;

var beats = 0;

var currentStep = 0;

var rValue = 250;

var gValue = 145; 

var bValue = 1;

​

// Sound

var kit;

var noteNames = ["c1", "c2", "c3", "c4", "e1", "e2", "e3", "e4", "g1", "g2", "g3", "g4", "a1", "a2", "a3", "a4"];

kit = new Tone.Players(

    { 

      "a4" : "a.mp3",

      "g4" : "g.mp3",

      "e4" : "e.mp3",

      "c4" : "c.mp3",

      "a3" : "a.mp3",

      "g3" : "g.mp3",

      "e3" : "e.mp3",

      "c3" : "c.mp3",

      "a2" : "a.mp3",

      "g2" : "g.mp3",

      "e2" : "e.mp3",

      "c2" : "g3.mp3",

      "a1" : "a.mp3",

      "g1" : "g.mp3",

      "e1" : "e.mp3",

      "c1" : "c2.mp3"

    }

);

kit.toMaster();

Tone.Transport.scheduleRepeat(onBeat, 0.5);

​

// Visuals

​

function setup() {

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

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

    cells[track] = [];

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

        cells[track][step] = -1;

    }

  }

  playButton = createButton('play');

  playButton.position(0,608);

  playButton.mouseClicked(togglePlay);

  createCanvas(1200,600);

  cellWidth = width / nSteps;

  cellHeight = height / nTracks;

}

​

function onBeat(time){

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

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

      var notes = kit.get(noteNames[track]);

      notes.start(time);

    }

  }

  beats++;

  currentStep = beats % nSteps;

}

​

function draw(){

  background(225);

  stroke(0);

  // 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(("255,255,255") - track*120);

        rect(step*cellWidth, track*cellHeight, cellWidth, cellHeight);

      }

    }

  }

  // Draw horizontal lines

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

    var y = i*cellHeight;

    line(0, y, width, y);

  }

  // Draw vertical lines

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

    stroke(0);

    line(i*cellWidth, 0, i*cellWidth, height);

  }

  // Highlight current step

  var highlight = (beats - 1 )% nSteps

  noStroke();

  fill(255,0,255,50);

  rect(highlight*cellWidth, 0, cellWidth, height)

}

​

​

function mousePressed(){

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

  if( 0 < mouseX && mouseX < width &&

      0 < mouseY && mouseY < height){

    // Determine which cell the mouse is on

    var i = floor(mouseX / cellWidth);

    var j = floor(mouseY / 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{

    Tone.Transport.start();

    playButton.html('stop');

  }

}