var img2;

var img3;

var img4;

​

var note_A;

var note_B;

var note_D;

var note_G;

var note_Fsharp;

var background_music;

​

​

​

function preload() {

  img1 = loadImage("make_it_right.jpg");

  img2 = loadImage("purple_heart.png");

  img3 = loadImage("army_logo.png");

  img4 = loadImage("m.i.r_2.png");

  note_A = loadSound("A_piano.m4a");

  note_B = loadSound("B_piano.m4a");

  note_D = loadSound("D_piano.m4a");

  note_Fsharp = loadSound("F_sharp.m4a");

  note_G = loadSound("G_piano.m4a")

  background_music = loadSound("music_box.mp3");

}

​

function setup() {

  createCanvas(400, 350); }

​

function keyTyped() {

  if (key ==='a') {

      note_A.play(); }

  else {

    triangle (100,140, 65, 200,120, 200); }

  if(key === 'b') {

    note_B.play(); }

  else{

  triangle (40, 280, 25, 230, 115, 290); } 

  if(key === 'd') {

    note_D.play(); }

  else{

  triangle (35, 60, 25, 90, 95, 130); }

  if(key === 'f') {

    note_Fsharp.play(); }

  else{

  triangle (25, 96, 45, 225, 97, 136); }

  if(key === 'g') {

    note_G.play(); }

  else{

    triangle (102, 80, 95, -1, 200, 25); }

}

​

​

function draw() {

  noCursor();

  background(220);

  imageMode(CORNER);

  image(img1, 0, 0);  

​

  if (mouseY < 200) {

//Purple Heart

    imageMode(CENTER);

    image(img2, mouseX, mouseY); }

​

  else {

//ARMY Logo

  imageMode(CENTER);

  image(img3, mouseX, mouseY);

}

​

​

  //1

  fill('#FDBECF');

  triangle (100, 140, 65, 200, 120, 200); 

  //2

  fill("#FDECE3");

  triangle (40, 280, 25, 230, 115, 290);

  //3

  fill("#FDA6CF");

  triangle (35, 60, 25, 90, 95, 130);

  //4

  fill("#FDB3CF");

  triangle (25, 96, 45, 225, 97, 136);

  //5

  fill("#FD74CF");

  triangle (102, 80, 95, -1, 200, 25);

  //6

  fill("#A06BBF");

  triangle (265, 6, 395, 6, 395, 80);

  //7

  fill("#CB6BBF");

  triangle (262, 10, 350, 60, 223, 80);

  //8

  fill("#B400F0");

  triangle (355, 105, 397, 90, 398, 190);

  //9

  fill("#9439C7");

  triangle (285, 87, 350, 103, 380, 165);

​

fill("#FDC9CF");

  beginShape();

  vertex (46, 236);

  vertex (64, 205);

  vertex (120, 205);

  vertex (117, 283);

  endShape (CLOSE);

​

fill("#FD8CCF");  

  beginShape();

  vertex (101, 130);

  vertex (33, 50);

  vertex (33, 15);

  vertex (86, -15);

  endShape (CLOSE); 

​

fill("#DB6BBF");  

  beginShape();

  vertex(260, 6);

  vertex(155, 6);

  vertex(215, 25);

  vertex(155, 60);

  vertex(220, 75);

  endShape(CLOSE);  

fill("#8550B3");  

  beginShape();

  vertex(275, 80);

  vertex(355, 65);

  vertex(395, 85);

  vertex(355, 100);

  endShape(CLOSE);

fill("#BF69FF");  

  beginShape();

  vertex(383, 172);

  vertex(399, 200);

  vertex(340, 280);

  vertex(360, 210);

  vertex(375, 185);

  vertex(300, 105);

  endShape(CLOSE);

  fill('black');

  text('B', 55, 160);  

  fill('black');

  text('A', 45, 95);

  fill('black');

  text('A', 65, 45);

  fill('black');

  text('B', 130, 45);

  fill('black');

  text('F', 220, 40);

  fill('black');

  text('F', 270, 45);

  fill('black');

  text('G', 345, 88);

  fill('white');

  text('Play the piano notes from left to right by pressing the letter of the note on ', 5, 330)

  fill('white');

  text('your keyboard.', 5, 343);

  if(mouseIsPressed) {

      background(220);

      imageMode(CORNER);

      image(img4, 0, 0);  

​

    fill("#FDC9CF");

    strokeWeight (4);

    fill("red");

    triangle (100, 140, 65, 200, 120, 200); 

    triangle (40, 280, 25, 230, 115, 290);

    triangle (35, 60, 25, 90, 95, 130);

    triangle (25, 96, 45, 225, 97, 136);

    triangle (102, 80, 95, -1, 200, 25);

    triangle (265, 6, 395, 6, 395, 80);

    triangle (262, 10, 350, 60, 223, 80);

    triangle (355, 105, 397, 90, 398, 190);

    triangle (285, 87, 350, 103, 380, 165);

  beginShape();

  vertex (46, 236);

  vertex (64, 205);

  vertex (120, 205);

  vertex (117, 283);

  endShape (CLOSE);

​

  beginShape();

  vertex (101, 130);

  vertex (33, 50);

  vertex (33, 15);

  vertex (86, -15);

  endShape (CLOSE); 

​

  beginShape();

  vertex(260, 6);

  vertex(155, 6);

  vertex(215, 25);

  vertex(155, 60);

  vertex(220, 75);

  endShape(CLOSE);  

  beginShape();

  vertex(275, 80);

  vertex(355, 65);

  vertex(395, 85);

  vertex(355, 100);

  endShape(CLOSE);

  beginShape();

  vertex(383, 172);

  vertex(399, 200);

  vertex(340, 280);

  vertex(360, 210);

  vertex(375, 185);

  vertex(300, 105);

  endShape(CLOSE);

  beginShape();

  vertex(110, 90);

  vertex(150, 67);

  vertex(190, 75);

  vertex(175, 115);

  vertex(195, 158);

  vertex(170, 190);

  vertex(190, 220);

  vertex(170, 250);

  vertex(140, 280);

  endShape(CLOSE);

  fill('black');

  text('B', 55, 160);  

  fill('black');

  text('A', 45, 95);

  fill('black');

  text('G', 65, 45);

  fill('black');

  text('F', 130, 45);

  fill('black');

  text('G', 220, 40);

  fill('black');

  text('D', 270, 45);

  fill('white');

  text('Play the piano notes from left to right by pressing the letter of the note on ', 5, 330)

  fill('white');

  text('your keyboard.', 5, 343);

​

  }

  else {

  strokeWeight(1);

}

}