​

​

// Press each button in a sequence in a right beat. (music I made)

// C6 -> B5 -> A4 -> A3 -> E6 -> A4 -> B5 ->C6 -> D1 -> E1 ->  E5  -> E6 -> F5 -> F1-> E5 -> B3 -> A6 -> E5 -> D6 -> B5 -> A6 -> E6 -> C4 -> E4 ->D1 -> E4 -> E1 -> B5 -> C4 -> D4  -> A5 -> C6 -> D1 - > A5 -> D4 -> D6 -> F6 -> D4 -> B3 -> E5 -> C6 -> D6 -> F6 ...

​

//I would like to animate coordinate above so that users can play music just by playing a beat game. 

//example: https://youtu.be/Hy8UY3wgb5Y

//example2: https://www.youtube.com/watch?v=U0z1cT4MARU

​

//MOTION

// var amp;

​

//SOUNDS

// var kick1;

// var kick2;

// var kick3;

// var synthB;

​

​

function setup() {

  createCanvas(650, 800);

  background(40);

​

​

​

  //loadSounds

​

  //A1

  kick1 = loadSound("kick1.wav", loaded);

  //B1

  kick2 = loadSound("kick2.wav", loaded);

  //C1

  kick3 = loadSound("kick3.wav", loaded);

  //D1

  drum1 = loadSound("drum1.wav", loaded);

  //E1

  drum2 = loadSound("drum2.wav", loaded);

  //F1

  drum3 = loadSound("drum3.wav", loaded);

​

​

  //A2

  hihat1 = loadSound("hi hat 1.wav", loaded);

  //B2

  hihat2 = loadSound("hi hat 2.wav", loaded);

  //C2

  hihat3 = loadSound("hi hat 3.wav", loaded);

  //D2

  drumfill1 = loadSound("drumfill1.wav", loaded);

  //E2

  drumfill2 = loadSound("drumfill2.wav", loaded);

  //F2

  drumfill3 = loadSound("drumfill3.wav", loaded);

​

​

  //A3

  bassloop1 = loadSound("bass loop 1.wav", loaded);

  //B3

  bassloop2 = loadSound("bass loop 2.wav", loaded);

  //C3

  bassloop3 = loadSound("bass loop 3.wav", loaded);

  //D3

  bass4 = loadSound("bass4.wav", loaded);

  //E3

  bass5 = loadSound("bass5.wav", loaded);

  //F3

  bass6 = loadSound("bass6.wav", loaded);

​

  //A4

  leadloop1 = loadSound("lead loop 1.wav", loaded);

  //B4

  leadloop2 = loadSound("lead loop 2.wav", loaded);

  //C4

  leadloop3 = loadSound("lead loop 3.wav", loaded);

  //D4

  leadloop4 = loadSound("lead loop 4.wav", loaded);

  //E4

  fxloop1 = loadSound("fx loop 1.wav", loaded);

  //F4

  fxloop2 = loadSound("fx loop 2.wav", loaded);

​

  //A5

  padloop1 = loadSound("pad loop 1.wav", loaded);

  //B6

  padloop2 = loadSound("pad loop 2.wav", loaded);

  //C5

  padloop3 = loadSound("pad loop 3.wav", loaded);

  //D5

  padloop4 = loadSound("pad loop 4.wav", loaded);

  //E5

  drumloop = loadSound("drum loop 4.wav", loaded);

  //F5

  arploop = loadSound("arp loop 4.wav", loaded);

​

​

  //A6

  synthB = loadSound("synth begin.wav", loaded);

  //B6

  synthM = loadSound("synth mid.wav", loaded);

  //C6

  synthE = loadSound("synth end.wav", loaded);

  //D6

  synth4 = loadSound("synth4.wav", loaded);

  //E6

  synth5 = loadSound("synth5.wav", loaded);

  //F6

  synth6 = loadSound("synth6.wav", loaded);

​

}

​

​

function loaded() {

​

  //synthB.play();

  //kickfill.play();

}

​

​

function draw() {

​

​

  noStroke();

  fill(255);

  rect(660, 0, 580, 800);

  fill(0);

  rect(40, 660, 530, 100, 20);

​

  fill(255);

  textSize(24);

  text('A', 50, 635);

  text('B', 150, 635);

  text('C', 250, 635);

  text('D', 350, 635);

  text('E', 450, 635);

  text('F', 550, 635);

  text('1', 622, 70);

  text('2', 622, 170);

  text('3', 622, 270);

  text('4', 622, 370);

  text('5', 622, 470);

  text('6', 622, 570);

​

​

​

  fill(buttonColor);

  square(20, 20, 80, 10)

​

  fill(buttonColor2);

  square(120, 20, 80, 10)

​

  fill(buttonColor3);

  square(220, 20, 80, 10)

​

  fill(buttonColor4);

  square(320, 20, 80, 10)

​

  fill(buttonColor5);

  square(420, 20, 80, 10)

​

  fill(buttonColor6);

  square(520, 20, 80, 10)

​

  fill(buttonColor7);

  square(20, 120, 80, 10)

​

  fill(buttonColor8);

  square(120, 120, 80, 10)

​

  fill(buttonColor9);

  square(220, 120, 80, 10)

​

  fill(buttonColor10);

  square(320, 120, 80, 10)

​

  fill(buttonColor11);

  square(420, 120, 80, 10)

​

  fill(buttonColor12);

  square(520, 120, 80, 10)

​

  fill(buttonColor13);

  square(20, 220, 80, 10)

​

  fill(buttonColor14);

  square(120, 220, 80, 10)

​

  fill(buttonColor15);

  square(220, 220, 80, 10)

​

  fill(buttonColor16);

  square(320, 220, 80, 10)

​

  fill(buttonColor17);

  square(420, 220, 80, 10)

​

  fill(buttonColor18);

  square(520, 220, 80, 10)

​

  fill(buttonColor19);

  square(20, 320, 80, 10)

​

  fill(buttonColor20);

  square(120, 320, 80, 10)

​

  fill(buttonColor21);

  square(220, 320, 80, 10)

​

  fill(buttonColor22);

  square(320, 320, 80, 10)

​

  fill(buttonColor23);

  square(420, 320, 80, 10)

​

  fill(buttonColor24);

  square(520, 320, 80, 10)

​

  fill(buttonColor25);

  square(20, 420, 80, 10)

​

  fill(buttonColor26);

  square(120, 420, 80, 10)

​

  fill(buttonColor27);

  square(220, 420, 80, 10)

​

  fill(buttonColor28);

  square(320, 420, 80, 10)

​

  fill(buttonColor29);

  square(420, 420, 80, 10)

​

  fill(buttonColor30);

  square(520, 420, 80, 10)

​

  fill(buttonColor31);

  square(20, 520, 80, 10)

​

  fill(buttonColor32);

  square(120, 520, 80, 10)

​

  fill(buttonColor33);

  square(220, 520, 80, 10)

​

  fill(buttonColor34);

  square(320, 520, 80, 10)

​

  fill(buttonColor35);

  square(420, 520, 80, 10)

​

  fill(buttonColor36);

  square(520, 520, 80, 10)

​

​

​

  fill(255);

  textSize(13);

​

  fill(255, 255, 0);

  text("kick", 50, 65);

  text("kick", 150, 65);

  text("kick", 250, 65);

​

  fill(0, 255, 255);

  text("drum-H", 340, 65);

  text("drum-H", 440, 65);

​

  fill(255, 0, 255);

​

  text("drum-L", 540, 65);

​

  fill(0, 0, 255);

  text("hi hat", 45, 165);

  text("hi hat", 145, 165);

  text("hi hat", 245, 165);

​

  fill(255, 0, 0);

  text("drum-F", 342, 165);

  text("drum-F", 442, 165);

  text("drum-F", 542, 165);

​

​

  fill(0, 255, 255);

  text("", 350, 165);

  text("", 450, 165);

  text("", 545, 165);

​

  fill(0, 255, 255);

  text("bass", 50, 265);

  text("bass", 150, 265);

  text("bass", 250, 265);

  text("bass", 350, 265);

  text("bass", 450, 265);

  text("bass", 550, 265);

​

  fill(0, 255, 0);

  text("lead", 50, 365);

  text("lead", 150, 365);

  text("lead", 250, 365);

  text("lead", 350, 365);

​

  fill(255, 255, 0);

  text("fx", 455, 365);

  text("fx", 555, 365);

​

  fill(255, 0, 255);

  text("pad", 50, 465);

  text("pad", 150, 465);

  text("pad", 250, 465);

  text("pad", 350, 465);

​

  fill(0, 0, 255);

  text("arp", 455, 465);

  text("arp", 555, 465);

​

  fill(255, 255, 0);

  text("synth", 45, 565);

  text("synth", 145, 565);

  text("synth", 245, 565);

​

  fill(0, 255, 255);

  text("synth", 345, 565);

  text("synth", 445, 565);

  text("synth", 545, 565);

​

​

  // motion graphic

  //   amp = new p5.Amplitude();

  //   var vol = amp.getLevel();

  //   var diam = map(vol,0,1,10,400)

​

  //    fill(255,0,255);

  //   ellipse(940,400,30*vol,30*vol);

}

​

​

​

​

//BUTTONS

function mousePressed() {

​

  //BUTTON 1

  if (mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 100 && buttonColor === 100) {

​

    buttonColor = 255

    togglePlaying1();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 100 && buttonColor === 255) {

      buttonColor = 100

      kick1.stop();

    }

  }

​

​

  //BUTTON 2

  if (mouseX > 120 && mouseX < 200 && mouseY > 20 && mouseY < 100 && buttonColor2 === 100) {

    buttonColor2 = 255

    togglePlaying2();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 20 && mouseY < 100 && buttonColor2 === 255) {

      buttonColor2 = 100

      kick2.stop();

    }

  }

​

​

  //BUTTON 3

  if (mouseX > 220 && mouseX < 300 && mouseY > 20 && mouseY < 100 && buttonColor3 === 100) {

    buttonColor3 = 255

    togglePlaying3();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 20 && mouseY < 100 && buttonColor3 === 255) {

      buttonColor3 = 100

      kick3.stop();

    }

​

  }

​

​

  //BUTTON 4

  if (mouseX > 320 && mouseX < 400 && mouseY > 20 && mouseY < 100 && buttonColor4 === 100) {

    buttonColor4 = 255

    togglePlaying4();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 20 && mouseY < 100 && buttonColor4 === 255) {

      buttonColor4 = 100

      drum1.stop();

    }

​

  }

​

​

  //BUTTON 5

  if (mouseX > 420 && mouseX < 500 && mouseY > 20 && mouseY < 100 && buttonColor5 === 100) {

    buttonColor5 = 255

    togglePlaying5();

  } else {

    if (mouseX > 420 && mouseX < 500 && mouseY > 20 && mouseY < 100 && buttonColor5 === 255) {

      buttonColor5 = 100

      drum2.stop();

    }

​

  }

​

​

  //BUTTON 6

  if (mouseX > 520 && mouseX < 600 && mouseY > 20 && mouseY < 100 && buttonColor6 === 100) {

    buttonColor6 = 255

    togglePlaying6();

  } else {

    if (mouseX > 520 && mouseX < 600 && mouseY > 20 && mouseY < 100 && buttonColor6 === 255) {

      buttonColor6 = 100

      drum3.stop();

    }

  }

​

​

  //BUTTON 7

  if (mouseX > 20 && mouseX < 100 && mouseY > 120 && mouseY < 200 && buttonColor7 === 100) {

    buttonColor7 = 255

    togglePlaying7();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 120 && mouseY < 200 && buttonColor7 === 255) {

      buttonColor7 = 100

      hihat1.stop();

    }

  }

​

  //BUTTON 8

  if (mouseX > 120 && mouseX < 200 && mouseY > 120 && mouseY < 200 && buttonColor8 === 100) {

    buttonColor8 = 255

    togglePlaying8();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 120 && mouseY < 200 && buttonColor8 === 255) {

      buttonColor8 = 100

      hihat2.stop();

    }

  }

​

​

  //BUTTON 9

  if (mouseX > 220 && mouseX < 300 && mouseY > 120 && mouseY < 200 && buttonColor9 === 100) {

    buttonColor9 = 255

    togglePlaying9();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 120 && mouseY < 200 && buttonColor9 === 255) {

      buttonColor9 = 100

      hihat3.stop();

    }

  }

​

​

  //BUTTON 10

  if (mouseX > 320 && mouseX < 400 && mouseY > 120 && mouseY < 200 && buttonColor10 === 100) {

    buttonColor10 = 255

    togglePlaying10();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 120 && mouseY < 200 && buttonColor10 === 255) {

      buttonColor10 = 100

      drumfill1.stop();

    }

  }

​

​

  //BUTTON 11

  if (mouseX > 420 && mouseX < 500 && mouseY > 120 && mouseY < 200 && buttonColor11 === 100) {

    buttonColor11 = 255

    togglePlaying11();

  } else {

    if (mouseX > 420 && mouseX < 500 && mouseY > 120 && mouseY < 200 && buttonColor11 === 255) {

      buttonColor11 = 100

      drumfill2.stop();

    }

  }

​

​

  //BUTTON 12

  if (mouseX > 520 && mouseX < 600 && mouseY > 120 && mouseY < 200 && buttonColor12 === 100) {

    buttonColor12 = 255

    togglePlaying12();

  } else {

    if (mouseX > 520 && mouseX < 600 && mouseY > 120 && mouseY < 200 && buttonColor12 === 255) {

      buttonColor12 = 100

      drumfill3.stop();

    }

  }

​

​

  //BUTTON 13

  if (mouseX > 20 && mouseX < 100 && mouseY > 220 && mouseY < 300 && buttonColor13 === 100) {

    buttonColor13 = 255

    togglePlaying13();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 220 && mouseY < 300 && buttonColor13 === 255) {

      buttonColor13 = 100

      bassloop1.stop();

    }

  }

​

  //BUTTON 14

  if (mouseX > 120 && mouseX < 200 && mouseY > 220 && mouseY < 300 && buttonColor14 === 100) {

    buttonColor14 = 255

    togglePlaying14();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 220 && mouseY < 300 && buttonColor14 === 255) {

      buttonColor14 = 100

      bassloop2.stop();

    }

  }

​

​

  //BUTTON 15

  if (mouseX > 220 && mouseX < 300 && mouseY > 220 && mouseY < 300 && buttonColor15 === 100) {

    buttonColor15 = 255

    togglePlaying15();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 220 && mouseY < 300 && buttonColor15 === 255) {

      buttonColor15 = 100

      bassloop3.stop();

    }

  }

​

​

  //BUTTON 16

  if (mouseX > 320 && mouseX < 400 && mouseY > 220 && mouseY < 300 && buttonColor16 === 100) {

    buttonColor16 = 255

    togglePlaying16();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 220 && mouseY < 300 && buttonColor16 === 255) {

      buttonColor16 = 100

      bass4.stop();

    }

  }

​

​

  //BUTTON 17

  if (mouseX > 420 && mouseX < 500 && mouseY > 220 && mouseY < 300 && buttonColor17 === 100) {

    buttonColor17 = 255

    togglePlaying17();

  } else {

    if (mouseX > 420 && mouseX < 500 && mouseY > 220 && mouseY < 300 && buttonColor17 === 255) {

      buttonColor17 = 100

      bass5.stop();

    }

  }

​

​

  //BUTTON 18

  if (mouseX > 520 && mouseX < 600 && mouseY > 220 && mouseY < 300 && buttonColor18 === 100) {

    buttonColor18 = 255

    togglePlaying18();

  } else {

    if (mouseX > 520 && mouseX < 600 && mouseY > 220 && mouseY < 300 && buttonColor18 === 255) {

      buttonColor18 = 100

      bass6.stop();

    }

  }

​

​

  //BUTTON 19

  if (mouseX > 20 && mouseX < 100 && mouseY > 320 && mouseY < 400 && buttonColor19 === 100) {

    buttonColor19 = 255

    togglePlaying19();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 320 && mouseY < 400 && buttonColor19 === 255) {

      buttonColor19 = 100

      leadloop1.stop();

    }

  }

​

  //BUTTON 20

  if (mouseX > 120 && mouseX < 200 && mouseY > 320 && mouseY < 400 && buttonColor20 === 100) {

    buttonColor20 = 255

    togglePlaying20();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 320 && mouseY < 400 && buttonColor20 === 255) {

      buttonColor20 = 100

      leadloop2.stop();

    }

  }

​

​

  //BUTTON 21

  if (mouseX > 220 && mouseX < 300 && mouseY > 320 && mouseY < 400 && buttonColor21 === 100) {

    buttonColor21 = 255

    togglePlaying21();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 320 && mouseY < 400 && buttonColor21 === 255) {

      buttonColor21 = 100

      leadloop3.stop();

    }

  }

​

​

  //BUTTON 22

  if (mouseX > 320 && mouseX < 400 && mouseY > 320 && mouseY < 400 && buttonColor22 === 100) {

    buttonColor22 = 255

    togglePlaying22();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 320 && mouseY < 400 && buttonColor22 === 255) {

      buttonColor22 = 100

      leadloop4.stop();

    }

  }

​

​

  //BUTTON 23

  if (mouseX > 420 && mouseX < 500 && mouseY > 320 && mouseY < 400 && buttonColor23 === 100) {

    buttonColor23 = 255

    togglePlaying23();

  } else {

    if (mouseX > 420 && mouseX < 500 && mouseY > 320 && mouseY < 400 && buttonColor23 === 255) {

      buttonColor23 = 100

      fxloop1.stop();

    }

  }

​

​

  //BUTTON 24

  if (mouseX > 520 && mouseX < 600 && mouseY > 320 && mouseY < 400 && buttonColor24 === 100) {

    buttonColor24 = 255

    togglePlaying24();

  } else {

    if (mouseX > 520 && mouseX < 600 && mouseY > 320 && mouseY < 400 && buttonColor24 === 255) {

      buttonColor24 = 100

      fxloop2.stop();

    }

  }

​

  //BUTTON 25

  if (mouseX > 20 && mouseX < 100 && mouseY > 420 && mouseY < 500 && buttonColor25 === 100) {

    buttonColor25 = 255

    togglePlaying25();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 420 && mouseY < 500 && buttonColor25 === 255) {

      buttonColor25 = 100

      padloop1.stop();

    }

  }

​

  //BUTTON 26

  if (mouseX > 120 && mouseX < 200 && mouseY > 420 && mouseY < 500 && buttonColor26 === 100) {

    buttonColor26 = 255

    togglePlaying26();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 420 && mouseY < 500 && buttonColor26 === 255) {

      buttonColor26 = 100

      padloop2.stop();

    }

  }

​

​

  //BUTTON 27

  if (mouseX > 220 && mouseX < 300 && mouseY > 420 && mouseY < 500 && buttonColor27 === 100) {

    buttonColor27 = 255

    togglePlaying27();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 420 && mouseY < 500 && buttonColor27 === 255) {

      buttonColor27 = 100

      padloop3.stop();

    }

  }

​

​

  //BUTTON 28

  if (mouseX > 320 && mouseX < 400 && mouseY > 420 && mouseY < 500 && buttonColor28 === 100) {

    buttonColor28 = 255

    togglePlaying28();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 420 && mouseY < 500 && buttonColor28 === 255) {

      buttonColor28 = 100

      padloop4.stop();

    }

  }

​

​

  //BUTTON 29

  if (mouseX > 420 && mouseX < 500 && mouseY > 420 && mouseY < 500 && buttonColor29 === 100) {

    buttonColor29 = 255

    togglePlaying29();

  } else {

    if (mouseX > 420 && mouseX < 500 && mouseY > 420 && mouseY < 500 && buttonColor29 === 255) {

      buttonColor29 = 100

      drumloop.stop();

    }

  }

​

​

  //BUTTON 30

  if (mouseX > 520 && mouseX < 600 && mouseY > 420 && mouseY < 500 && buttonColor30 === 100) {

    buttonColor30 = 255

    togglePlaying30();

  } else {

    if (mouseX > 520 && mouseX < 600 && mouseY > 420 && mouseY < 500 && buttonColor30 === 255) {

      buttonColor30 = 100

      arploop.stop();

    }

  }

​

​

  //BUTTON 31

  if (mouseX > 20 && mouseX < 100 && mouseY > 520 && mouseY < 600 && buttonColor31 === 100) {

    buttonColor31 = 255

    togglePlaying31();

  } else {

    if (mouseX > 20 && mouseX < 100 && mouseY > 520 && mouseY < 600 && buttonColor31 === 255) {

      buttonColor31 = 100

      synthB.stop();

    }

  }

​

  //BUTTON 32

  if (mouseX > 120 && mouseX < 200 && mouseY > 520 && mouseY < 600 && buttonColor32 === 100) {

    buttonColor32 = 255

    togglePlaying32();

  } else {

    if (mouseX > 120 && mouseX < 200 && mouseY > 520 && mouseY < 600 && buttonColor32 === 255) {

      buttonColor32 = 100

      synthM.stop();

    }

  }

​

​

  //BUTTON 33

  if (mouseX > 220 && mouseX < 300 && mouseY > 520 && mouseY < 600 && buttonColor33 === 100) {

    buttonColor33 = 255

    togglePlaying33();

  } else {

    if (mouseX > 220 && mouseX < 300 && mouseY > 520 && mouseY < 600 && buttonColor33 === 255) {

      buttonColor33 = 100

      synthE.stop();

    }

  }

​

​

  //BUTTON 34

  if (mouseX > 320 && mouseX < 400 && mouseY > 520 && mouseY < 600 && buttonColor34 === 100) {

    buttonColor34 = 255

    togglePlaying34();

  } else {

    if (mouseX > 320 && mouseX < 400 && mouseY > 520 && mouseY < 600 && buttonColor34 === 255) {

      buttonColor34 = 100

      synth4.stop();

    }

  }

​

​

  //BUTTON 35

  if (mouseX > 420 && mouseX < 500 && mouseY > 520 && mouseY < 600 && buttonColor35 === 100) {