let buttonL;

let state = 0;

​

​

function preload() {

  expertE = loadImage('E_image2.png');

  expertEart = loadImage('E_decisions2.png');

  expertElow = loadImage('E_lowLev2.png');

}

​

​

function setup() {

  createCanvas(400, 400);

  background(255);

  image(expertE, 0, 0);

  fill(255, 89, 0);

  noStroke();

  ellipse(200, 300, 30, 30);

  fill(115, 194, 251);

  noStroke();

  ellipse(200, 350, 30, 30);

} 

​

function draw(){

  background(255);

  //image(expertE, 0, 0);

  reload();

  fill(255, 89, 0);

  noStroke();

  ellipse(200, 300, 30, 30);

  fill(115, 194, 251);

  noStroke();

  ellipse(200, 350, 30, 30);

  //text("Now I’m going back to the bowl, trying to capture the value.", 0, 250);

  noFill();

  //strokeWeight(4);

  noStroke();

  ellipseMode(CENTER);

  ellipse (179, 113, 62, 62);

  rollOver(); 

  //console.log(state);

}

​

​

function displayArt() {

  image(expertEart, 0, 0);

​

}

​

function displayLowLev(){

  image(expertElow, 0, 0);

}

​

function rollOver(){

  let d = dist(mouseX, mouseY, 179, 113);

  if (d < 62 && state == 1) {

    fill(0);

    textSize(16);

    text("Now I’m going back to the bowl, trying to capture the value.", 0, 250, 400, 400);

    //console.log("mouse is over bowl");

   } 

    //else{

  //   fill(0);

  //   text(" ");

  // }

}

​

​

​

function mousePressed(){

  let pA = dist(mouseX, mouseY, 200, 300);

  let pL = dist(mouseX, mouseY, 200, 350);

  if (pA < 30) {

    displayArt();

    state = 1;

    } 

  else if(pL < 30){

    displayLowLev();

    state = 2;

  }

  else{

      image(expertE, 0, 0);

  } 

}

​

function reload(){

 if(state == 1){

 displayArt();

 }

 if(state == 2){

  displayLowLev(); 

 }

 if(state == 0){

   image(expertE, 0, 0);

 }

}

​

​

​