let imgstart, img0, img1, img2, img3;

let img0Clicked=false,img1Clicked = false, img2Clicked = false, img3Clicked = false;

let canvasClicked = false;

​

​

// Values

let x1 = 380, y1 = 560, speedX1 = 3, speedY1 = 2;

let x2 = 50, y2 = 550, speedX2 = 2, speedY2 = 3;

let x3 = 40, y3 = 770, speedX3 = -4, speedY3 = -1;

//let x4 = 80, y4 = 550, speedX4 = 1, speedY4 = -2;

​

// click function

// let img1Clicked = false;

// let img2Clicked = false;

// let img3Clicked = false;

​

// starting point

let img1StartingPoint = { x: 410, y: 500 };

let img2StartingPoint = { x: 110, y: 560 };

let img3StartingPoint = { x: 110, y: 780 };

// z-values

let z1 = 0, z2 = 0, z3 = 0, z4 = 0;

​

//size

let size1 = 55, size2 = 80, size3 = 50;

​

function preload() {

  // Import images

  imgstart = loadImage("orginal0.png")

  img0 = loadImage("orginal1.jpg");

  img1 = loadImage("1a-testje1.png");

  img2 = loadImage("object2a!.png");

  img3 = loadImage("object3a!.png");

}

function setup() {

 createCanvas(img0.width, img0.height);

  canvas.addEventListener('click', handleClick);

  image(imgstart, 0, 0);

  // Initial values for image positions

  image(img1, img1StartingPoint.x, img1StartingPoint.y, size1*50, size1*50);

  image(img2, img2StartingPoint.x, img2StartingPoint.y, size2*50, size2*50);

  image(img3, img3StartingPoint.x, img3StartingPoint.y, size3*50, size3*50);

}

​

function draw() {

 background(img0);

 if (canvasClicked) {

    image(img1, x1, y1, size1, size1);

    image(img2, x2, y2, size2, size2);

    image(img3, x3, y3, size3, size3);

  } else {

    image(imgstart, 0, 0);

  }

​

// Instruction box

fill(173, 216, 230); 

stroke(173, 216, 230); 

strokeWeight(2); 

rect(50, 50, 300, 100);

​

fill(0); 

noStroke(); 

textSize(16);

text("Click on the objects and led them move, click again to stop them. What do you think of the new perspective?", 75, 65, 250, 75);

  if (canvasClicked) {

    text("Click on the objects and let them move, click again to stop them. What do you think of the new perspective?", 75, 65, 250, 75);

  } else {

    text("Click anywhere on the canvas to begin", 125, 65, 150, 75);

  }

​

//Ellipse

  //Ellipse for object 1

  if (canvasClicked) {

   noFill();

  stroke(0,255,0); 

  strokeWeight(1);

  ellipse(420, 580, 50, 70); 

  //Ellipse for object 2

   noFill();

  stroke(0,255,0); 

  strokeWeight(1);

  ellipse(85, 580, 80, 70); 

  //Ellipse for object 3

   noFill();

  stroke(0,255,0); 

  strokeWeight(1);

  ellipse(65, 798, 60, 40); 

  }

  //If loop - Click -> move, click again -> stop moving

 if (img1Clicked) {

    x1 += speedX1;

    if (x1 < 0 || x1 > width - size1) {

      speedX1 = -speedX1;

    }

    y1 += speedY1;

    if (y1 < 0 || y1 > height - size1) {

      speedY1 = -speedY1;

    }

    z1 = map(x1, 0, width - size1, 1, 0.2);

    size1 = map(z1, 0, 1, 60, 100);

  }

​

  if (img2Clicked) {

    x2 += speedX2;

    if (x2 < 0 || x2 > width - size2) {

      speedX2 = -speedX2;

    }

    y2 += speedY2;

    if (y2 < 0 || y2 > height - size2) {

      speedY2 = -speedY2;

    }

    z2 = map(y2, 0, height - size2, 1, 0.2);

    size2 = map(z2, 0, 1, 50, 100);

  }

​

  if (img3Clicked) {

    x3 += speedX3;

    if (x3 < 0 || x3 > width - size3) {

      speedX3 = -speedX3;

    }

    y3 += speedY3;

    if (y3 < 0 || y3 > height - size3) {

      speedY3 = -speedY3;

    }

    z3 = map(x3, 0, width - size3, 1, 0.2);

    size3 = map(z3, 1, 50,50, 60);

  }

}

//Mouse function

function handleClick(event) {

  canvasClicked = true

  let mousePosX = event.clientX - canvas.getBoundingClientRect().left;

  let mousePosY = event.clientY - canvas.getBoundingClientRect().top;

  if (

    mousePosX >= x1 &&

    mousePosX <= x1 + img1.width &&

    mousePosY >= y1 &&

    mousePosY <= y1 + img1.height

  ) {

    img1Clicked = !img1Clicked;

  }

  if (

    mousePosX >= x2 &&

    mousePosX <= x2 + img2.width &&

    mousePosY >= y2 &&

    mousePosY <= y2 + img2.height

  ) {

    img2Clicked = !img2Clicked;

  }

  if (

    mousePosX >= x3 &&

    mousePosX <= x3 + img3.width &&

    mousePosY >= y3 &&

    mousePosY <= y3 + img3.height

  ) {

    img3Clicked = !img3Clicked;

  }

​

// Ellipse disapear after clicking right object

 if (!img1Clicked) {

    noFill();

    stroke(0,255,0); 

    strokeWeight(1);

    ellipse(420, 580, 50, 70); 

  }

  if (!img2Clicked) {

    noFill();

    stroke(0,255,0); 

    strokeWeight(1);

    ellipse(85, 580, 80, 70); 

  }

  if (!img3Clicked) {

    noFill();

    stroke(0,255,0); 

    strokeWeight(1);

    ellipse(65, 798, 60, 40); 

  }

​

​

} 

​

​

​

​