12/12/22

​

Press on Keys z-< to play music notes.

Press with mouse on buttons to play different chords.

​

Michal Shahaf */

​

var doNote;

var reNote;

var miNote;

var faNote;

var solNote;

var laNote;

var siNote;

var doAgainNote;

var weight = 400;

​

var acordCButtonX = 50;

var acordCButtonY = 350;

var acordFButtonX = 140;

var acordFButtonY = 350;

var acordGButtonX = 230;

var acordGButtonY = 350;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  doNote = loadSound("do.mp3");

  reNote = loadSound("re.mp3");

  miNote = loadSound("mi.mp3");

  faNote = loadSound("fa.mp3");

  solNote = loadSound("sol.mp3");

  laNote = loadSound("la.mp3");

  siNote = loadSound("si.mp3");

  doAgainNote = loadSound("do.mp3");

}

​

function setup() {

  createCanvas(400, 400);

​

  doAgainNote.rate(2);

}

​

function keyPressed() {

  if (keyCode === 90) { //Z

    doNote.play();

  }

  if (keyCode === 88) { //X

    reNote.play();

  }

​

  if (keyCode === 67) { //C

    miNote.play();

  }

​

  if (keyCode === 86) { //V

    faNote.play();

  }

​

  if (keyCode === 66) { //B

    solNote.play();

  }

​

  if (keyCode === 78) { //N

    laNote.play();

  }

​

  if (keyCode === 77) { //M

    siNote.play();

  }

​

  if (keyCode === 188) { //<

    doAgainNote.play();

  }

}

​

function draw() {

  background("white");

​

  //chords illustrations

  //chord C:

​

  if (doNote.isPlaying()) {

    background(99, 211, 0);

    fill(0);

    circle(90, 300, 30);

    stroke(0);

    line(60, 300, 120, 300);

  }

​

  if (miNote.isPlaying()) {

    fill(0);

    circle(150, 270, 30);

  }

​

  if (solNote.isPlaying()) {

    fill(0);

    circle(210, 240, 30);

  }

  //chord F:

  if (faNote.isPlaying()) {

    background(211, 0, 0);

    fill(0);

    circle(180, 255, 30);

  }

​

  if (laNote.isPlaying()) {

    fill(0);

    circle(240, 225, 30);

  }

​

  if (doAgainNote.isPlaying()) {

    fill(0);

    circle(300, 195, 30);

  }

  //chord G:

  if (reNote.isPlaying()) {

    background(0, 54, 211);

    fill(0);

    circle(120, 285, 30);

  }

​

  if (solNote.isPlaying()) {

    fill(0);

    circle(210, 240, 30);

  }

​

  if (siNote.isPlaying()) {

    fill(0);

    circle(270, 210, 30);

  }

​

  //Notes illustrations

​

  if (keyIsPressed) {

    if (keyCode === 67) {

      //C:"MI"//

      background(125, 206, 160);

      fill(0);

      circle(150, 270, 30);

    }

​

    if (keyCode === 66) {

      //B:"SOL"//

      background(241, 196, 15);

      fill(0);

      circle(210, 240, 30);

    }

​

    if (keyCode === 78) {

      //N:"LA"//

      background(230, 126, 34);

      fill(0);

      circle(240, 225, 30);

    }

​

    if (keyCode === 77) {

      //M:"SI"//

      background(255, 103, 154);

      fill(0);

      circle(270, 210, 30);

    }

​

    if (keyCode === 188) {

      //<:"DO"//

      background(34, 188, 255);

      fill(0);

      circle(300, 195, 30);

    }

  }

​

  // music lines

​

  fill("black");

  stroke(1);

  for (var y = 150; y < 280; y += 30) {

    line(0, y, weight, y);

  }

  noStroke();

  textSize(15);

  fill("purple");

  text("Press on keys Z-< to play notes", 100, 50);

  text("Click the buttons to play chords", 101, 70);

​

  // draw buttons

  button("C", acordCButtonX, acordCButtonY);

  button("F", acordFButtonX, acordFButtonY);

  button("G", acordGButtonX, acordGButtonY);

}

​

function button(buttonText, x, y) {

  stroke("purple");

  strokeWeight(2);

​

  if (

    mouseX > x &&

    mouseX < x + buttonWidth &&

    mouseY > y &&

    mouseY < y + buttonHeight

  ) {

    fill(243, 156, 18);

  } else {

    fill(215, 189, 226);

  }

​

  rect(x, y, buttonWidth, buttonHeight, 5);

​

  noStroke();

  fill("purple");

  textAlign(LEFT, TOP);

  textSize(20);

  text(buttonText, x + 10, y + 5);

}

​

function mousePressed() {

  // check if mouse is inside button

​

  // chord C

  if (

    mouseX > acordCButtonX &&

    mouseX < acordCButtonX + buttonWidth &&

    mouseY > acordCButtonY &&

    mouseY < acordCButtonY + buttonHeight

  ) {

    doNote.play();

    miNote.play();

    solNote.play();

  }

  // chord F

  if (

    mouseX > acordFButtonX &&

    mouseX < acordFButtonX + buttonWidth &&

    mouseY > acordFButtonY &&

    mouseY < acordFButtonY + buttonHeight

  ) {

    faNote.play();

    laNote.play();

    doAgainNote.play();

  }

​

  // chord G

  if (

    mouseX > acordGButtonX &&

    mouseX < acordGButtonX + buttonWidth &&

    mouseY > acordGButtonY &&

    mouseY < acordGButtonY + buttonHeight

  ) {

    solNote.play();

    siNote.play();

    reNote.play();

  }

}

​