rdsilver/index.html

## index.html
<head>
  <script language="javascript" src="http://p5js.org/js/p5.min.js"></script>
  <script language="javascript" src="http://p5js.org/js/p5.dom.js"></script>
  <script language="javascript" src="http://p5js.org/js/p5.sound.js"></script>
  <script language="javascript" src="sketch.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
</body>

## sketch.js
var osc;
var rifts = [];

//var frequencies = [24-108] //C1 to C8
//midiToFreq(midiNote) [-10,-8,-5,-3,0, 2, 4, 7, 9,12]
var twelve_tones = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']
var scale_holder = {};
var current_scale = 'Pentatonic';
var cur_index = 0;


var root = 60;
var bpm = 200;
var amp = .1;
var rftl = 18;
var oscOn = false;


function setup() {
  createCanvas(960,222);

  //Create Scales
  addScales();

  //Create Buttons
  start_stop_button = createButton('sound on',100,100);
  start_stop_button.addClass('middle');
  start_stop_button.mousePressed(toggleOsc);

  new_riff_button = createButton('new riff',100,100);
  new_riff_button.addClass('middle');
  new_riff_button.mousePressed(makeRift);

  //Create Sliders
  root_label = createP('Root Note: C2');
  root_label.addClass('middle');
  root_slider = createSlider(36, 96, root);
  root_slider.addClass('middle');

  bpm_label = createP('Beats Per Minute: ' + bpm);
  bpm_label.addClass('middle');
  bpm_slider = createSlider(40, 800, bpm);
  bpm_slider.addClass('middle');

  amp_label = createP('Volume: ' + amp * 100);
  amp_label.addClass('middle');
  amp_slider = createSlider(0, 100, amp * 100);
  amp_slider.addClass('middle');

  rift_length_label = createP('Approximate Rift Length: ' + rftl);
  rift_length_label.addClass('middle');
  rift_length_slider = createSlider(5, 30, rftl);
  rift_length_slider.addClass('middle');

  // Make first riff
  rifts.push(new Rift());
  // Oscillator
  osc = new p5.SinOsc();
  osc.amp(amp);
  osc.setType('sine');
  osc.freq(midiToFreq(root));

  if(oscOn)
    osc.start();

  fill(0);
  textSize(50);
  textAlign(CENTER);
  textFont("Helvetica");
  noStroke();
}

function addScales() {
  scale_holder['Major'] = [-12,-10,-8,-7,-5,-3,-1,0,2,4,5,7,9,11,12];
  scale_holder['Pentatonic'] = [-12,-10,-8,-5,-3,0,2,4,7,9,12];
  scale_holder['Harmonic Minor'] = [-12,-10,-9,-7,-5,-4,-1,0,2,3,5,7,8,11,12];
  scale_holder['Natural Minor'] = [-12,-10,-9,-7,-5,-4,-2,0,2,3,5,7,8,10,12];
  scale_holder['Dorian'] = [-12,-10,-9,-7,-5,-3,-2,0,2,3,5,7,9,10,12];
}

var pastMillis = 0;
var rift_index = 0;
function draw() {

  update_sliders();


  if(millis()-pastMillis>60000.0/bpm) {
    pastMillis = millis();
    cur_rift = rifts[rifts.length-1];
    cur_rift_length = cur_rift.rift_size;

    osc.freq(midiToFreq(root + cur_rift.notes[rift_index%cur_rift_length]));

    rift_index++;
  }


  //text('Frequency: ' + freq, width/2.0 , height/2.0) ;

}

function update_sliders() {
  root = root_slider.value();
  bpm  = bpm_slider.value();
  amp  = amp_slider.value()/100.0;
  rftl = rift_length_slider.value();

  bpm_label.html('Beats Per Minute: ' + bpm);
  root_label.html('Root Note: ' +twelve_tones[root%12] +''+(floor(root/12)-1));
  amp_label.html('Volume: ' + floor(amp*100));
  rift_length_label.html('Approximate Rift Length: '+rftl);
  osc.amp(amp);
}


function toggleOsc() {
  if (oscOn) {
    osc.stop();
    start_stop_button.html('start');
  } else {
    osc.start();
    start_stop_button.html('stop');
  }
  oscOn = !oscOn;
}

function keyPressed() {
  makeRift();
}

function makeRift() {
  rifts.push(new Rift());
}

function Rift() {
  this.rift_size = rftl + round(random(-5,5));
  this.notes = [];
  this.make_rift();
  this.print_rift();
}

Rift.prototype.make_rift = function() {
  good_riff = false;

  while(!good_riff) {
    this.notes = [];
    cur_index = scale_holder[current_scale].indexOf(0);
    for (var i=0; i<this.rift_size; i++) {
      var temp_cur_index = cur_index;
      do {
        cur_index = temp_cur_index + round(random(-3,3));
      }
      while(cur_index <0 || cur_index>=scale_holder[current_scale].length)
      this.notes.push(scale_holder[current_scale][cur_index]);
    }

    if(abs(this.notes[0] - this.notes[this.rift_size-1]) < 12) { //<12
      good_riff=true;
    }
  }
}

Rift.prototype.print_rift = function() {
  background(255);

  var rift_string='';
  for (var i=0; i<this.rift_size; i++) {
    rift_string += ' ' + this.notes[i];
  }
  textSize(10);
  text(rift_string,width/2,height/2);

};

## style.css
body   { padding: 0;}

canvas {
     padding-left: 0;
     padding-right: 0;
     margin-left: auto;
     margin-right: auto;
     display: block;
}

.middle {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     display: block;
}
	<head>
	<script language="javascript" src="http://p5js.org/js/p5.min.js"></script>
	<script language="javascript" src="http://p5js.org/js/p5.dom.js"></script>
	<script language="javascript" src="http://p5js.org/js/p5.sound.js"></script>
	<script language="javascript" src="sketch.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	</body>
	var osc;
	var rifts = [];

	//var frequencies = [24-108] //C1 to C8
	//midiToFreq(midiNote) [-10,-8,-5,-3,0, 2, 4, 7, 9,12]
	var twelve_tones = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']
	var scale_holder = {};
	var current_scale = 'Pentatonic';
	var cur_index = 0;


	var root = 60;
	var bpm = 200;
	var amp = .1;
	var rftl = 18;
	var oscOn = false;


	function setup() {
	createCanvas(960,222);

	//Create Scales
	addScales();

	//Create Buttons
	start_stop_button = createButton('sound on',100,100);
	start_stop_button.addClass('middle');
	start_stop_button.mousePressed(toggleOsc);

	new_riff_button = createButton('new riff',100,100);
	new_riff_button.addClass('middle');
	new_riff_button.mousePressed(makeRift);

	//Create Sliders
	root_label = createP('Root Note: C2');
	root_label.addClass('middle');
	root_slider = createSlider(36, 96, root);
	root_slider.addClass('middle');

	bpm_label = createP('Beats Per Minute: ' + bpm);
	bpm_label.addClass('middle');
	bpm_slider = createSlider(40, 800, bpm);
	bpm_slider.addClass('middle');

	amp_label = createP('Volume: ' + amp * 100);
	amp_label.addClass('middle');
	amp_slider = createSlider(0, 100, amp * 100);
	amp_slider.addClass('middle');

	rift_length_label = createP('Approximate Rift Length: ' + rftl);
	rift_length_label.addClass('middle');
	rift_length_slider = createSlider(5, 30, rftl);
	rift_length_slider.addClass('middle');

	// Make first riff
	rifts.push(new Rift());
	// Oscillator
	osc = new p5.SinOsc();
	osc.amp(amp);
	osc.setType('sine');
	osc.freq(midiToFreq(root));

	if(oscOn)
	osc.start();

	fill(0);
	textSize(50);
	textAlign(CENTER);
	textFont("Helvetica");
	noStroke();
	}

	function addScales() {
	scale_holder['Major'] = [-12,-10,-8,-7,-5,-3,-1,0,2,4,5,7,9,11,12];
	scale_holder['Pentatonic'] = [-12,-10,-8,-5,-3,0,2,4,7,9,12];
	scale_holder['Harmonic Minor'] = [-12,-10,-9,-7,-5,-4,-1,0,2,3,5,7,8,11,12];
	scale_holder['Natural Minor'] = [-12,-10,-9,-7,-5,-4,-2,0,2,3,5,7,8,10,12];
	scale_holder['Dorian'] = [-12,-10,-9,-7,-5,-3,-2,0,2,3,5,7,9,10,12];
	}

	var pastMillis = 0;
	var rift_index = 0;
	function draw() {

	update_sliders();


	if(millis()-pastMillis>60000.0/bpm) {
	pastMillis = millis();
	cur_rift = rifts[rifts.length-1];
	cur_rift_length = cur_rift.rift_size;

	osc.freq(midiToFreq(root + cur_rift.notes[rift_index%cur_rift_length]));

	rift_index++;
	}


	//text('Frequency: ' + freq, width/2.0 , height/2.0) ;

	}

	function update_sliders() {
	root = root_slider.value();
	bpm = bpm_slider.value();
	amp = amp_slider.value()/100.0;
	rftl = rift_length_slider.value();

	bpm_label.html('Beats Per Minute: ' + bpm);
	root_label.html('Root Note: ' +twelve_tones[root%12] +''+(floor(root/12)-1));
	amp_label.html('Volume: ' + floor(amp*100));
	rift_length_label.html('Approximate Rift Length: '+rftl);
	osc.amp(amp);
	}


	function toggleOsc() {
	if (oscOn) {
	osc.stop();
	start_stop_button.html('start');
	} else {
	osc.start();
	start_stop_button.html('stop');
	}
	oscOn = !oscOn;
	}

	function keyPressed() {
	makeRift();
	}

	function makeRift() {
	rifts.push(new Rift());
	}

	function Rift() {
	this.rift_size = rftl + round(random(-5,5));
	this.notes = [];
	this.make_rift();
	this.print_rift();
	}

	Rift.prototype.make_rift = function() {
	good_riff = false;

	while(!good_riff) {
	this.notes = [];
	cur_index = scale_holder[current_scale].indexOf(0);
	for (var i=0; i<this.rift_size; i++) {
	var temp_cur_index = cur_index;
	do {
	cur_index = temp_cur_index + round(random(-3,3));
	}
	while(cur_index <0 \|\| cur_index>=scale_holder[current_scale].length)
	this.notes.push(scale_holder[current_scale][cur_index]);
	}

	if(abs(this.notes[0] - this.notes[this.rift_size-1]) < 12) { //<12
	good_riff=true;
	}
	}
	}

	Rift.prototype.print_rift = function() {
	background(255);

	var rift_string='';
	for (var i=0; i<this.rift_size; i++) {
	rift_string += ' ' + this.notes[i];
	}
	textSize(10);
	text(rift_string,width/2,height/2);

	};
	body { padding: 0;}

	canvas {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	}

	.middle {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: block;
	}