​

const W = 600; // Screen Width

const H = 800; // Screen Height

let offset = 0;

let easing = 0.05;

​

let imgsPD = [];

let imgsHC = [];

let imgsPDgrey = [];

​

let HCage = ['47','53','56','56','56','58','59','61','61','61','62','63','63','64','66','66','68','68','69','69','70','73','74','76','77','78'];

​

let PDage = ['50','56','60','55','56','60','62','65','58','59','62','66','67','62','69','69','70','67','69','69','73','72','73','74','77','74'];

​

//let currentImage = 'assets/control/dwiHC1.jpeg';

​

//let val = slider.value();

​

let IMAGE_COUNT = 25;

​

let val = 1;

​

let opacity = 0;

let greyOpacity = 0;

let greyValue = 0;

let showPDinfo = 50;

let showHCinfo = 0;

let showInfo = 0;

​

let scrollYpos = 590;

​

function preload() {

  //Images must be named in numeric sequence.

  for(var i = 0; i <= IMAGE_COUNT; i++){

    imgsPD[i] = loadImage("assets/parkinsons/dwiPD"+i+".jpeg");

    imgsHC[i] = loadImage("assets/ctrl_jpeg/dwiHC"+i+".jpeg");

    imgsPDgrey[i] = loadImage("assets/PDgrey/dwiPD"+i+".jpeg");

    //delayTime(0.2);

    //loadImage("assets/ctrl_png/dwiHC"+i+".png")

    //imgs.push(loadImage("assets2/test"+i+".jpg"))

  }

  loadImage("assets/cursor/CONTROL.jpg");

}

function setup() {

  // Creates the Canvas

  createCanvas(W, H);

  //slider = createSlider(0, 25, 0, 1);

  //createSlider(min, max, [value], [step])

  //slider.position(150, 650);

  //slider.style('width', '80px');

  //slider.size(300);

  //button = createButton('Overlay');

  //button.position(275, 680);

  //button.mousePressed(overlay);

  cursor('ns-resize');

}

function draw() {

  // Draw a background

  background(0);

​

  image(imgsPD[val], 50, 100, 500, 500);// full opacity

  push();

  tint(255,greyOpacity);

  image(imgsPDgrey[val], 50, 100, 500, 500);// full opacity

  pop();

  greyOpacity = (mouseY-80)/2;

  //rectangles on left

  fill(25);

  rect(0,0,100,100);

  fill(15);

  rect(0,100,100,100);

  fill(random(10));

  rect(0,200,100,100);

  fill(25);

  rect(0,300,100,100);

  fill(15);

  rect(0,400,100,100);

  fill(10);

  rect(0,500,100,100);

  fill(random(10));

  rect(0,600,100,100);

  fill(25);

  rect(0,700,100,100);

  //rectangles on right

  fill(10);

  rect(500,0,100,100);

  fill(15);

  rect(500,100,100,100);

  fill(25);

  rect(500,200,100,100);

  fill(15);

  rect(500,300,100,100);

  fill(random(10));

  rect(500,400,100,100);

  fill(10);

  rect(500,500,100,100);

  fill(20);

  rect(500,600,100,100);

  fill(30);

  rect(500,700,100,100);

  fill(random(10));

  rect(500,700,100,100);

​

  fill(15);

  rect(100,0,100,100);

  fill(10);

  rect(200,0,100,100);

  fill(random(10));

  rect(300,0,100,100);

  fill(20);

  rect(400,0,100,100);

  fill(20);

  rect(100,600,100,100);

  fill(10);

  rect(200,600,100,100);

  fill(15);

  rect(300,600,100,100);

  fill(10);

  rect(400,600,100,100);

  fill(15);

  rect(100,700,100,100);

  fill(25);

  rect(200,700,100,100);

  fill(10);

  rect(300,700,100,100);

  fill(15);

  rect(400,700,100,100);

  //TEXT to display info

  textSize(18);

  fill(50);

  text("scroll through Parkinson's Disease patients",128,scrollYpos)

  textSize(32);

  fill(90);

  text("Diffusion-Weight Image Brain Scan",50,60);

  fill(showPDinfo);

  text(PDage[val],125,165);

  text('AGE',110,130);

  fill(showHCinfo);

  text(HCage[val],440,165);

  push();

  if (opacity == 0) {

    noFill();

    scrollYpos = 590;

  } else {

    fill(100);

    scrollYpos = 775;

  }

  text("Ctrl AGE",360,130);

  text("Parkinson's patients were age, sex, & education matched wtih a control subject.",90,630,440,200);

  if (opacity == 0) {

    fill(50);

  } else {

    noFill();

  }

  text('click to overlay healthy brain scan',65,710)

  //val = slider.value();

  //Transparent Image Overlay Mouse Movement?

  let dx = mouseX - imgsPD[val].width / 2 - offset;

  offset += dx * easing;

​

  //Transparent Image Overlay

  push();

  tint(255, opacity); // half opacity

  image(imgsHC[val], offset-210, mouseY-500, 500, 500);  //Transparent overlay image

  pop();

}

//switch brain scan in file string to opposite when button is pressed

/*

function mouseReleased(){

  val = slider.value();

}*/

function mouseWheel(event){

  if(val == 1 && event.delta < 0){

    val++;

  }

  else if(val == IMAGE_COUNT && event.delta > 0){

    val--;

  }

  else if(val > 1 && val < IMAGE_COUNT){

    if(event.delta < 0){

      val++;

    }

    else{

      val--;

    }

  }

}

​

function mouseClicked() {

  if(opacity == 0)

    {

      opacity = 127;

      showPDinfo = 100;

      showHCinfo = 100;

      //showInfo = 100;

      cursor('move');

    }

  else

    {

      opacity = 0;

      showPDinfo = 50;

      showHCinfo = 0;

      //showInfo = 0;

      cursor('ns-resize');

    }

}

​