C Scale - Music Major X CS

mySketch
xxxxxxxxxx
 
//This code builds upon code from  "piano" by monniqian
//https://editor.p5js.org/monniqian/sketches/TwckaaeGl
​
let page_number = 1 ; 
​
var notes1 = [60, 62, 64, 65, 67, 69, 71, 72];
var notes2 = [61, 63, 65, 66, 68, 70, 72, 73];
var notes3 = [62, 64, 66, 67, 69, 71, 73, 74];
var notes4 = [63, 65, 67, 68, 70, 72, 74, 75];
var notes5 = [64, 66, 68, 69, 71, 73, 75, 76];
var notes6 = [65, 67, 69, 70, 72, 74, 76, 77];
var notes7 = [66, 68, 70, 71, 73, 75, 77, 78];
var notes8 = [67, 69, 71, 73, 74, 76, 78, 79];
​
var osc; 
​
function setup() {
  createCanvas(500, 500);
  //rectMode(CENTER);
  
osc = new p5.TriOsc();
  osc.start();
  osc.amp(0);
  
}
​
function playNote(note, duration){
  osc.freq(midiToFreq(note));
  osc.fade (0.3 ,0.4)
    if (duration){
      setTimeout(function(){
        osc.fade(0.1, 0.2)
}, duration-50);
}
}
​
function draw() {
  background(220);
​
  if(page_number == 1){
  var w = width / notes1.length;
  for (var i = 0; i < notes1.length; i++){
    var x = i * w;
    if (mouseX > x && mouseX < x + w && mouseY < height){
      if(mouseIsPressed){
        fill(100, 150, 255);
      } else{
        fill(50, 50, 255);
      } } else {
        fill (100, 100, 255);
      }
      rect(x, 0, w-1, height-1);
      rect(x, 0, w-1, height-1);
​
  //notes
    
  fill(255) ; 
  textFont('Georgia');
  textSize(30)
  text ("C", 20, 380);
  text ("D", 82, 380);
  text ("E", 144, 380);
  text ("F", 206, 380);
  text ("G", 268, 380);
  text ("A", 330, 380);
  text ("B", 392, 380);
  text ("C", 454, 380);
    }
    
  }
    if(page_number == 1){
  var w = width / notes1.length;
  for (var i = 0; i < notes1.length; i++){
    var x = i * w;
    if (mouseX > x && mouseX < x + w && mouseY < height){
      if(mouseIsPressed){
        fill(100, 150, 255);
      } else{
        fill(50, 50, 255);
      } } else {
        fill (100, 100, 255);
      }
      rect(x, 0, w-1, height-1);
      rect(x, 0, w-1, height-1);
​
  //notes
    
  fill(255) ; 
  textFont('Georgia');
  textSize(35);
  text ("LEARN THE KEY OF 'C'", 55, 60)
  textSize(30);
  text ("C", 20, 380);
  text ("D", 82, 380);
  text ("E", 144, 380);
  text ("F", 206, 380);
  text ("G", 268, 380);
  text ("A", 330, 380);
  text ("B", 392, 380);
  text ("C", 454, 380);
    }
  }
  
​
    } 
  function mousePressed(){
    var key =
        floor(map( mouseX, 0, width, 0, notes1.length)); 
    playNote(notes1[key]);
  }
      
  function mouseReleased(){
    osc.fade (0, 0.5);
  }
​
​