My Sketch

let pic2gray;

let dotmove = []

artArray = []

​

function preload() { //LOAD ALL SOUND AND PICTURES INTO CODE

  jazz = loadSound("jazz.mp3")

  alan = loadSound('alan.mp3')

​

  pic1 = loadImage('square.png');

  pic2gray = loadImage('more square.png');

​

}

​

function setup() {

  createCanvas(600, 600);

  background(255);

​

  artArray[0] = new Snd_n_Img(pic2gray, alan, 0, 0) //SOUND WHEN GRAY PIC CLICKED

​

  pic1.resize(400, 400); //Resizing of image 1

  image(pic1, 0, 200);

​

  pic2gray.filter('gray'); // gray filter on the top left picture

  pic2gray.resize(84, 200);

  image(pic2gray, 0, 0)

​

  jazz.play() //to have constant jazz playing

​

  for (let i = 0; i < artArray.length; i++) {

    artArray[i].showImg(); //array for sound to be played when image clicked

​

    for (let i = 0; i < 17; i++) {

      dotmove[i] = new dotClass(249, 200, 100 + i * 3, 10 / i + 1, 2); //the arrary of dots

    }

  }

}

​

function mouseClicked() {

​

  for (let i = 0; i < artArray.length; i++) { //when picture is hit, alan talks

    artArray[i].HitCheck(mouseX, mouseY);

  }

}

​

function draw() {

  fill(255);

  strokeWeight(10)

  rect(89, 0, 310, 198)

​

  for (let i = 0; i < 17; i++) { //to display the square circular array 

    dotmove[i].moveInCircle()

    dotmove[i].display()

  }

}