const W = 1200; // Screen Width

const H = 700; // Screen Height

const imW = 680; // image width

const imH = 360; //  image height

​

const FADE = 5; // How many faded degree should be between the images? Explained in detail in draw

const SLIDER_MAX = (IMAGE_COUNT - 1) * FADE; // Slider Maximum

​

const OVERFLOW = 384; // should be above 256. Controls how long the images are displayed in full, details in draw

​

/*

===== State Variables =====

*/

let imgs = [] // Holds the loaded images

let slider; // Holds the slider object

let lowDamage

let mediumDamage

let highDamage

let val = 1

function preload() {

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

    imgs[i - 1] = loadImage("assets/new" + i + ".png")

  }

  mouse = loadImage("misc/mouse.png");

  instructions = loadImage("misc/Presentation1.png");

  legend1 = loadImage("misc/legend1.png");

  legend2 = loadImage("misc/legend2.png");

  low = loadImage("assets/new1.png");

  medium = loadImage("assets/new3.png");

  high = loadImage("assets/new7.png");

  question = loadImage("misc/question.png");

  mark = loadImage("misc/Presentation2.png");

}

​

function setup() {

  createCanvas(970, 700);

  background(71, 81, 76);

templateButton = createButton("Low Damage");

  templateButton.size(200,40);

  templateButton.position(260,620);

  templateButton.mousePressed(()=> {

    // What should happen?

    val = 1

  });

  templateButton.elt.style['background-color'] = color(181,207,194);

​

mediumButton = createButton("Medium Damage");

  mediumButton.size(200,40)

  mediumButton.position(500,620);

  mediumButton.mousePressed(()=> {

    val = 10

  });

 mediumButton.elt.style['background-color'] = color(181,207,194);

​

highButton = createButton("High Damage");

  highButton.size(200,40)

  highButton.position(740,620);

 highButton.mousePressed(()=> {

    val = SLIDER_MAX

  });

 highButton.elt.style['background-color'] = color(181,207,194);

}   

​

​

function draw() {

   rectMode(RADIUS);

  fill(71, 81, 76);

  rect(600, 400, 750, 750);

  rectMode(CENTER)

  fill(71, 81, 76);

  rect(600, 400, 700, 700)

  textSize(10);

  textAlign(RIGHT);

  fill(255, 255, 255);

​

​

  // Title

  fill(181,207,194);

  textSize(45);

  textAlign(RIGHT);

  textFont('Times')

  textFont()

  text('Cancer Visualized: Qualifying DNA', 940, 60);

  text('damage in breast cancer cells',940,100)

   text('via single-cell gel electrophoresis ',940,140)

//subtitle

  fill(181,207,194);

  textSize(20)

  textAlign(RIGHT);

  textFont('Times')

  text('Tooba Razi | 7867866 | SCI4000 W21 | University of Manitoba', 940, 180)

​

  // Draw the top image

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

    x = val - FADE * i;

    if (x < -FADE || x > FADE)

      continue;

    x = x * OVERFLOW / FADE;

    x += OVERFLOW;

    tint(255, x);

    image(imgs[i], 260, 220, imW, imH);

  }

  //Instructions

  tint(255);    

  image(mouse, 30, 505, 200, 155);

  textSize(25);

  textAlign(LEFT);

  fill(181, 207, 194);

  noStroke(); 

  textFont('Times')  

  text("Instructions", 74, 675);

  text("Information",70,165);

​

//legend

  tint(255)  ;

  image(legend1, 15, 180, 225, 150);

  image(legend2, 15, 350, 225,150);

​

//question

  tint(255);

  image(question, 50, 5, 150, 150);

//lines

​

if (mouseX > 79 && mouseX < 180 && mouseY > 519 && mouseY < 675) {

    image(instructions, 200,10,720,550);

  }

​

if (mouseX > 64 && mouseX < 183 && mouseY > 22 && mouseY < 160) {

    image(mark, 200,10,720,550);

​

  }

if (mouseX > 30 && mouseX < 54 && mouseY > 290 && mouseY < 314) {

    image(legend1, 200,10,550,350);

}

if (mouseX > 30 && mouseX < 54 && mouseY > 460 && mouseY < 482) {

    image(legend2, 200,10,550,350);

}

//Low Damage button style  

  templateButton.style('font-size', '25px');

  templateButton.style('font-family', 'Times')

  templateButton.style('border-radius','12px')

//Medium Damage Button Style

  mediumButton.style('font-size', '25px');

  mediumButton.style('font-family', 'Times');

  mediumButton.style('border-radius', '12px');

//High Damage Button Style

  highButton.style('font-size', '25px');

  highButton.style('font-family', 'Times');

  highButton.style('border-radius','12px')

}

​

let scrollIndex = 0;

function mouseWheel(event) {

  //print(event.delta);

  val += int(event.delta/100);

  if (scrollIndex<0){

    val = 1;

  }

  if(scrollIndex>SLIDER_MAX){

    val = SLIDER_MAX;

  }

    return false;

}

​