let cnv;

let button;

​

function preload() {

  img1 = loadImage('assets/alzheimer-disease-1.jpg');

  img2 = loadImage('assets/alzheimer-disease-2.jpg');

  img3 = loadImage('assets/alzheimer-disease-3.jpg');

  img4 = loadImage('assets/40 green screen + 39 pink normal flattened.jpeg')

  img5 = loadImage('assets/Screen Shot 2021-03-22 at 8.37.15 PM.png');

}

​

function setup() {

  cnv=createCanvas(width=500, height=500);

  background(220);

  noStroke();

  image(img1, right=95, down=5, width=20, height=20);

  image(img2, right=10, down=200, width=20, height=20);

  image(img3, right=60, down=10, width=20, height=20);

  image(img4, right=25, down=65, width=450, height=370);

  button1 = createButton("FRONT");

  button1.size(200,20);

  button1.position(20,20);

  button1.mousePressed(() => {

    print("ANTERIOR CORONAL SLICE");

  });

  button1.elt.style['border-radius']="50%";

  button1.elt.style['border-radius']="12px";

  button1.elt.style['color']="green";

  button1.elt.style['color']=color(0,255,0);

  button1.elt.style['background-color']="pink";

  button1.elt.style['background-color']=color(200,0,200);

  //colour scheme reminds of barney

  button2 = createButton("REAR");

  button2.size(200,20);

  button2.position(20,450);

  button2.mousePressed(() => {

    print("POSTERIOR CORONAL SLICE");

  });

  button2.elt.style['border-radius']="50%";

  button2.elt.style['border-radius']="24px";

  button2.elt.style['color']="yellow";

  button2.elt.style['color']=color(200,200,0);

  button2.elt.style['background-color']="blue";

  button2.elt.style['background-color']=color(0,100,100);

  //maybe only need one button to go back or reset? not sure how to do this.

  button3 = createButton("RESET");

  button3.size(200,20);

  button3.position(275,450);

  button3.mousePressed(() => {

    print("extra 3rd button");

  });

  button3.elt.style['border-radius']="50%";

  button3.elt.style['border-radius']="48px";

  button3.elt.style['color']="pink";

  button3.elt.style['color']=color(250,0,250);

  button3.elt.style['background-color']="orange";

  button3.elt.style['background-color']=color(200,80,30);

  //like this colour scheme but can't read pink letters on orange bg

}

​

function draw() {

  background(220)

  // let x = mouseX;

  let y = mouseY;

  if(y < 126){ //for 20 pictures, < 26

     image(img1, right=25, down=65, width=450, height=370);

  }

  else if(y < 251){

     image(img2, right=25, down=65, width=450, height=370);

  }

  else if(y < 376){

     image(img3, right=25, down=65, width=450, height=370);

  }

  else{

     image(img4, right=25, down=65, width=450, height=370);

  }

  // let ix = width - mouseX;  // Inverse X

  // let iy = height - mouseY; // Inverse Y

  // image(img4, x, height/4, y, y);

  // image(img1, ix, height/4, iy, iy);

}

​

//how to incorporate mouseWheel for scrolling to actually work

//how to incorporate different cursor icon without trail