var BPM;

​

let song;

​

let song2;

​

let song3;

​

let song4;

​

let song5;

​

var possible_sounds;

​

function preload(){

 possible_sounds = [

   loadSound("/assets/sound2.mp3"),

   loadSound("/assets/sound3.mp3"),

   loadSound("assets/piggy.mp3"),

   loadSound("assets/sound4.mp3"),

   loadSound("assets/sound5.mp3"),

  loadSound("assets/sound6.mp3"),

   ]

    //create an array of image files names

    possible_images = [

        loadImage("/images/blue.jpeg"),

              loadImage("/images/blue 1.jpeg"),

      loadImage("/images/blue 2.jpeg"),

      loadImage("/images/blue 3.jpeg"),

      loadImage("/images/blue 4.jpeg"),

      loadImage("/images/blue 5.jpeg"),

      loadImage("/images/blue 6.jpeg"),

      loadImage("/images/blue 7.jpeg"),

      loadImage("/images/blue 8.jpeg"),

      loadImage("/images/blue 9.jpeg"),

      loadImage("/images/blue 10.jpeg"),

      loadImage("/images/blue 11.jpeg"),

      loadImage("/images/blue 12.jpeg"),

      loadImage("/images/blue 13.jpeg"),

      loadImage("/images/blue 14.jpeg"),

      loadImage("/images/blue 15.jpeg"),

      loadImage("/images/blue 16.jpeg"),

      loadImage("/images/blue 17.jpeg"),

      loadImage("/images/blue 18.jpeg"),

      loadImage("/images/blue 19.jpeg"),

      loadImage("/images/blue 20.jpeg"),

      loadImage("/images/blue 21.jpeg"),

      loadImage("/images/blue 22.jpeg"),

      loadImage("/images/blue 23.jpeg"),

      loadImage("/images/blue 24.jpeg"),

      loadImage("/images/blue 25.jpeg"),

      loadImage("/images/blue 26.jpeg"),

      loadImage("/images/blue 27.jpeg"),

      loadImage("/images/blue 28.jpeg"),

      loadImage("/images/blue 29.jpeg"),

      loadImage("/images/blue 30.jpeg"),

      loadImage("/images/blue 31.jpeg"),

      loadImage("/images/blue 32.jpeg"),

      loadImage("/images/blue 33.jpeg"),

      loadImage("/images/blue 34.jpeg"),

      loadImage("/images/blue 35.jpeg"),

      loadImage("/images/blue 36.jpeg"),

      loadImage("/images/blue 37.jpeg"),

      loadImage("/images/blue 38.jpeg"),

      loadImage("/images/blue 39.jpeg"),

      loadImage("/images/blue 40.jpeg"),

      loadImage("/images/blue 41.jpeg"),

      loadImage("/images/blue 42.jpeg"),

      loadImage("/images/blue 43.jpeg"),

      loadImage("/images/blue 44.jpeg"),

      loadImage("/images/blue 45.jpeg"),

      loadImage("/images/blue 46.jpeg"),

      loadImage("/images/blue 47.jpeg"),

      loadImage("/images/blue 48.jpeg"),

      loadImage("/images/blue 49.jpeg"),

      loadImage("/images/blue 50.jpeg"),

      loadImage("/images/blue 51.jpeg"),

      loadImage("/images/blue 52.jpeg"),

      loadImage("/images/blue 53.jpeg"),

      loadImage("/images/blue 54.jpeg"),

      loadImage("/images/red.jpeg"),

      loadImage("/images/red 1.jpeg"),

      loadImage("/images/red 2.jpeg"),

      loadImage("/images/red 3.jpeg"),

      loadImage("/images/red 4.jpeg"),

      loadImage("/images/red 5.jpeg"),

      loadImage("/images/red 6.jpeg"),

      loadImage("/images/red 7.jpeg"),

      loadImage("/images/red 8.jpeg"),

      loadImage("/images/red 9.jpeg"),

      loadImage("/images/red 10.jpeg"),

      loadImage("/images/red 11.jpeg"),

      loadImage("/images/red 12.jpeg"),

      loadImage("/images/red 13.jpeg"),

      loadImage("/images/red 14.jpeg"),

      loadImage("/images/red 15.jpeg"),

      loadImage("/images/red 16.jpeg"),

      loadImage("/images/red 17.jpeg"),

      loadImage("/images/red 18.jpeg"),

      loadImage("/images/red 19.jpeg"),

      loadImage("/images/red 20.jpeg"),

      loadImage("/images/red 21.jpeg"),

      loadImage("/images/red 21.jpeg"),

      loadImage("/images/red 22.jpeg"),

      loadImage("/images/red 23.jpeg"),

      loadImage("/images/red 24.jpeg"),

      loadImage("/images/red 25.jpeg"),

      loadImage("/images/red 26.jpeg"),

      loadImage("/images/red 27.jpeg"),

      loadImage("/images/red 28.jpeg"),

      loadImage("/images/red 29.jpeg"),

      loadImage("/images/red 30.jpeg"),

      loadImage("/images/red 31.jpeg"),

      loadImage("/images/red 32.jpeg"),

      loadImage("/images/red 33.jpeg"),

      loadImage("/images/red 34.jpeg"),

      loadImage("/images/red 35.jpeg"),

      loadImage("/images/red 36.jpeg"),

      loadImage("/images/red 37.jpeg"),

      loadImage("/images/red 38.jpeg"),

      loadImage("/images/red 39.jpeg"),

      loadImage("/images/red 40.jpeg"),

      loadImage("/images/red 41.jpeg"),

      loadImage("/images/red 42.jpeg"),

      loadImage("/images/red 43.jpeg"),

      loadImage("/images/red 44.jpeg"),

      loadImage("/images/red 45.jpeg"),

      loadImage("/images/red 46.jpeg"),

      loadImage("/images/red 47.jpeg"),

      loadImage("/images/red 48.jpeg"),

      loadImage("/images/red 49.jpeg"),

      loadImage("/images/red 50.jpeg"),

      loadImage("/images/red 51.jpeg"),

      loadImage("/images/red 52.jpeg"),

      loadImage("/images/red 53.jpeg"),

      loadImage("/images/red 54.jpeg"),

      loadImage("/images/red 55.jpeg"),

      loadImage("/images/yellow.jpeg"),

      loadImage("/images/yellow 1.jpeg"),

      loadImage("/images/yellow 2.jpeg"),

      loadImage("/images/yellow 3.jpeg"),

      loadImage("/images/yellow 4.jpeg"),

      loadImage("/images/yellow 5.jpeg"),

      loadImage("/images/yellow 6.jpeg"),

      loadImage("/images/yellow 7.jpeg"),

      loadImage("/images/yellow 8.jpeg"),

      loadImage("/images/yellow 9.jpeg"),

      loadImage("/images/yellow 10.jpeg"),

      loadImage("/images/yellow 11.jpeg"),

      loadImage("/images/yellow 12.jpeg"),

      loadImage("/images/yellow 13.jpeg"),

      loadImage("/images/yellow 14.jpeg"),

      loadImage("/images/yellow 15.jpeg"),

      loadImage("/images/yellow 16.jpeg"),

      loadImage("/images/yellow 17.jpeg"),

      loadImage("/images/yellow 18.jpeg"),

      loadImage("/images/yellow 19.jpeg"),

      loadImage("/images/yellow 20.jpeg"),

      loadImage("/images/yellow 21.jpeg"),

      loadImage("/images/yellow 22.jpeg"),

      loadImage("/images/yellow 23.jpeg"),

      loadImage("/images/yellow 24.jpeg"),

      loadImage("/images/yellow 25.jpeg"),

      loadImage("/images/yellow 26.jpeg"),

      loadImage("/images/yellow 27.jpeg"),

      loadImage("/images/yellow 28.jpeg"),

      loadImage("/images/yellow 29.jpeg"),

      loadImage("/images/yellow 30.jpeg"),

      loadImage("/images/yellow 31.jpeg"),

      loadImage("/images/yellow 32.jpeg"),

      loadImage("/images/yellow 33.jpeg"),

      loadImage("/images/yellow 34.jpeg"),

      loadImage("/images/yellow 35.jpeg"),

      loadImage("/images/yellow 36.jpeg"),

      loadImage("/images/yellow 37.jpeg"),

      loadImage("/images/yellow 38.jpeg"),

      loadImage("/images/yellow 40.jpeg"),

      loadImage("/images/yellow 41.jpeg"),

      loadImage("/images/yellow 42.jpeg"),

      loadImage("/images/yellow 43.jpeg"),

      loadImage("/images/yellow 44.jpeg"),

      loadImage("/images/yellow 45.jpeg"),

      loadImage("/images/yellow 46.jpeg"),

      loadImage("/images/yellow 47.jpeg"),

      loadImage("/images/yellow 48.jpeg"),

      loadImage("/images/yellow 49.jpeg"),

      loadImage("/images/yellow 50.jpeg"),

      loadImage("/images/yellow 51.jpeg"),

      loadImage("/images/yellow 52.jpeg"),

      loadImage("/images/yellow 53.jpeg"),

      loadImage("/images/yellow 54.jpeg"),

      loadImage("/images/yellow 55.jpeg"),

​

​

    ];

​

    //pick a random image

    // var pos = floor(random(possible_images.length));

    // //load the picked image

    // BPM = loadImage(possible_images[pos]);

}

​

function setup() {

​

createCanvas(800, 800);

    background(66,89,168);

//song = loadSound('assets/piggy.mp3');

//song2 = loadSound('assests/sound2.mp3');

//song3 = loadSound('assets/sound3.mp3');

​

}

​

function draw() {

//    var pos = floor(random(possible_images.length));

//   BPM = possible_images[pos];

​

//   image(BPM, 500, 0);

​

​

//function mousePressed() {

  //if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    //song.stop();

  //} else {

    //song.play();

  //}

  //}

}

​

function mouse(Pressed) {

   // var rand = floor(random(3));

  // if (rand==0) {

  //}

​

}

​

mouseClicked = function() {

  // var rand = floor(random(5));

  // if (rand==0) { 

  //}

  var pos = floor(random(possible_sounds.length));

  var s = possible_sounds[pos];

  s.play();

​

    if(mouseX > 0 && mouseX < 200 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 0, 0, 200,200);

    }

      if(mouseX > 200 && mouseX < 400 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 200, 0, 200,200);

    }

   if(mouseX > 400 && mouseX < 600 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 400, 0, 200,200);

    }

     if(mouseX > 600 && mouseX < 800 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 600, 0, 200,200);

    }

     if(mouseX > 0 && mouseX < 200 && mouseY > 200 && mouseY < 400) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 0, 200, 200,200);

    }

  if(mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 400) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 200, 200, 200,200);

    }

  if(mouseX > 400 && mouseX < 600 && mouseY > 200 && mouseY < 400) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 400, 200, 200,200);

    }

    if(mouseX > 600 && mouseX < 800 && mouseY > 200 && mouseY < 400) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 600, 200, 200,200);

    }

    if(mouseX > 0 && mouseX < 200 && mouseY > 400 && mouseY < 600) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 0, 400, 200,200);

    }

  if(mouseX > 200 && mouseX < 400 && mouseY > 400 && mouseY < 600) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 200, 400, 200,200);

    }

  if(mouseX > 400 && mouseX < 600 && mouseY > 400 && mouseY < 600) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 400, 400, 200,200);

    }

    if(mouseX > 600 && mouseX < 800 && mouseY > 400 && mouseY < 600) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 600, 400, 200,200);

    }

  if(mouseX > 0 && mouseX < 200 && mouseY > 600 && mouseY < 800) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 0, 600, 200,200);

    }

  if(mouseX > 200 && mouseX <400 && mouseY > 600 && mouseY < 800) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 200, 600, 200,200);

    }

  if(mouseX > 400 && mouseX <600 && mouseY > 600 && mouseY < 800) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 400, 600, 200,200);

    }

  if(mouseX > 600 && mouseX <800 && mouseY > 600 && mouseY < 800) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 600, 600, 200,200);

    }

}

​

mouseDragged = function() {

​

    if(mouseX > 0 && mouseX < 200 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];

    image(BPM, 0, 0, 200,200);

    }

      if(mouseX > 200 && mouseX < 400 && mouseY > 0 && mouseY < 200) {

        var pos = floor(random(possible_images.length));

  BPM = possible_images[pos];