var doo, re, mi, fa, sol, la, si, do2, beat, maracas;

var MsImage, McImage;

​

// Preload function to load sounds and images

function preload() {

  doo = loadSound('doo.wav');

  re = loadSound('re.m4a');

  mi = loadSound('mi.m4a');

  fa = loadSound('fa.m4a');

  sol = loadSound('sol.m4a');

  la = loadSound('la.m4a');

  si = loadSound('si.m4a');

  do2 = loadSound('do2.m4a');

  beat = loadSound('beat.wav'); 

  maracas = loadSound('maracas.wav');

  MsImage = loadImage("ms.png");

  McImage = loadImage("mc.png");

}

​

// Function to play specific sounds when keys are pressed

function keyPressed() {

  if (keyCode == 65) { doo.play(); }  // A key

  if (keyCode == 83) { re.play(); }   // S key

  if (keyCode == 68) { mi.play(); }   // D key

  if (keyCode == 70) { fa.play(); }   // F key

  if (keyCode == 72) { sol.play(); }  // H key

  if (keyCode == 74) { la.play(); }   // J key

  if (keyCode == 75) { si.play(); }   // K key

  if (keyCode == 76) { do2.play(); }  // L key

  if (keyCode == 82) { beat.play(); } // R key

  if (keyCode == 89) { maracas.play(); } // Y key

}

​

// Setup function to create canvas

function setup() {

  createCanvas(400, 400);

}

​

// Draw function to render shapes and images on the canvas

function draw() {

  background(220);

  fill("white");

  createPiano(); // Function to create the piano keys

  // Drawing shapes and images on the canvas

  noStroke();

  fill("yellow");

  ellipse(100, 100, 100, 100);

  fill("blue");

  rect(250.100,50,100);

  image(MsImage, 60, 50, 70, 100);

  image(McImage, 250, 50, 100, 100);

}

​

// Function to create piano keys and highlight them when pressed

function createPiano() {

  // White keys

  if (keyIsPressed && key == "a") { fill("lightgrey"); } else { fill(255); }

  stroke(1);

  rect(0, 200, 50, 200);

​

  if (keyIsPressed && key == "s") { fill("lightgrey"); } else { fill(255); }

  rect(50, 200, 50, 200);

​

  if (keyIsPressed && key == "d") { fill("lightgrey"); } else { fill(255); }

  rect(100, 200, 50, 200);

​

  if (keyIsPressed && key == "f") { fill("lightgrey"); } else { fill(255); }

  rect(150, 200, 50, 200);

​

  if (keyIsPressed && key == "h") { fill("lightgrey"); } else { fill(255); }

  rect(200, 200, 50, 200);

​

  if (keyIsPressed && key == "j") { fill("lightgrey"); } else { fill(255); }

  rect(250, 200, 50, 200);

​

  if (keyIsPressed && key == "k") { fill("lightgrey"); } else { fill(255); }

  rect(300, 200, 50, 200);

​

  if (keyIsPressed && key == "l") { fill("lightgrey"); } else { fill(255); }

  rect(350, 200, 50, 200);

  // Black keys

  fill("black");

  rect(35, 200, 30, 120);

  rect(85, 200, 30, 120);

  rect(185, 200, 30, 120);

  rect(235, 200, 30, 120);

  rect(285, 200, 30, 120);

  rect(385, 200, 30, 120);

  // Key labels

  textSize(30);

  text('A', 15, 380);

  text('S', 65, 380);

  text('D', 115, 380);  

  text('F', 165, 380);

  text('H', 215, 380);

  text('J', 265, 380);

  text('K', 315, 380);

  text('L', 365, 380);

  // Additional text for R and Y keys

  text('(R)', 85, 180);

  text('(Y)', 285, 180);

  // Title text

  text('play keyboard music', 60, 30);

}

​

​

​

​

​

​

​

​

/* old version

​

var doo;

var re;

var mi;

var fa;

var sol;

var la;

var si;

var do2;

var beat;

var maracas;

​

var MsImage;

var McImage;

​

​

​

function preload(){

  doo = loadSound('doo.wav');

  re = loadSound('re.m4a');

  mi = loadSound('mi.m4a');

  fa = loadSound('fa.m4a');

  sol = loadSound('sol.m4a');

  la = loadSound('la.m4a');

  si = loadSound('si.m4a');

  do2 = loadSound('do2.m4a');

  beat = loadSound('beat.wav'); 

  maracas = loadSound('maracas.wav');

  MsImage = loadImage("ms.png");

  McImage = loadImage("mc.png");

​

}

​

​

function keyPressed(){

​

if (keyCode == 65){

    doo.play();}

  if (keyCode == 83){

    re.play();}

  if (keyCode == 68){

    mi.play();}

  if (keyCode == 70){

    fa.play();}

  if (keyCode == 72){

    sol.play();}

  if (keyCode == 74){

    la.play();}

  if (keyCode == 75){

    si.play();}

  if (keyCode == 76){

    do2.play();}

    if (keyCode == 76){

    do2.play();}

    if (keyCode == 82){

    beat.play();}

  if (keyCode == 89){

    maracas.play();}

​

​

} // keyPressed is closed

​

​

function setup() {

  createCanvas(400, 400);}

​

​

function draw() {

  background(220);

​

  fill("white");

  createPiano();

  noStroke();

fill("yellow");

  ellipse(100,100,100,100);

  fill("blue");

  rect(250.100,50,100);

  image(MsImage,60,50,70,100);

  image(McImage,250,50,100,100);

} 

​

​

function createPiano() {

  if (keyIsPressed == true && key == "a"){

      fill("lightgrey")}

  stroke(1)

  rect(0,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "s"){

      fill("lightgrey")}

  rect(50,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "d"){

      fill("lightgrey")}

  rect(100,200,50,200)

  fill(255)

 if (keyIsPressed == true && key == "f"){

      fill("lightgrey")}

  rect(150,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "h"){

      fill("lightgrey")}

  rect(200,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "j"){

      fill("lightgrey")}

  rect(250,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "k"){

      fill("lightgrey")}

  rect(300,200,50,200)

  fill(255)

  if (keyIsPressed == true && key == "l"){

      fill("lightgrey")}

  rect(350,200,50,200) 

  fill(255)

  // Black keys and text

   fill("black")

  rect(35,200,30,120)

  rect(85,200,30,120)

  rect(185,200,30,120)

  rect(235,200,30,120)

  rect(285,200,30,120)

  rect(385,200,30,120)

  textSize(30);

  text('A', 15, 380);

  text('S', 65, 380);

  text('D', 115, 380);  

  text('F', 165, 380);

  text('H', 215, 380);

  text('J', 265, 380);

  text('K', 315, 380);

  text('L', 365, 380);

  text('(R)',85,180)

   text('(Y)',285,180)

  text('play keyboard music' , 60,30)

}

​

*/