​

var click3;

var click4;

var clickImg;

var ButtonA;

var ButtonB;

var ButtonC;

var ButtonD;

​

let frt = 0;

var mca = [];

var mcc = [];

​

var sca = [];

var scc = [];

​

var img3, img4, img5, img6;

var z1, z2;

​

var page = 0;

​

var play = false;

// perload image

function preload() {

  for (let i = 1; i < 17; i++) {

    mca[i - 1] = loadImage("./Axial1/" + i + ".png");

    sca[i - 1] = loadImage("./axial/" + i + ".png");

  }

​

  for (let i = 1; i < 17; i++) {

    mcc[i - 1] = loadImage("./Coronal2/" + i + ".png");

​

    scc[i - 1] = loadImage("./Coronal1/" + i + ".png");

  }

  img1 = loadImage("slider.png");

  img3 = loadImage("Auto.png");

  img4 = loadImage("OFF.png");

  img5 = loadImage("gd.png");

  img6 = loadImage("info.png");

}

function setup() {

  createCanvas(1275, 930);

  textFont("Times New Roman");

  //ButtonA

  let i = 1;

  ButtonA = createButton("Mild-case Axial");

  ButtonA.position(820, 720);

  ButtonA.size(180, 30);

  ButtonA.style("background", "RGB(150,203,198)");

  ButtonA.mouseClicked(function () {

    page = i;

  });

  //ButtonB

  ButtonB = createButton("Mild-case Coronal");

  ButtonB.position(1050, 720);

  ButtonB.size(180, 30);

  ButtonB.style("background", "RGB(150,203,198)");

  ButtonB.mouseClicked(function () {

    page = i + 1;

  });

  //ButtonC

  ButtonC = createButton("Serious-case Axial");

  ButtonC.position(820, 820);

  ButtonC.size(180, 30);

  ButtonC.style("background", "RGB(150,203,198)");

  ButtonC.mouseClicked(function () {

    page = i + 2;

  });

  //ButtonD

  ButtonD = createButton("Serious-case Coronal");

  ButtonD.position(1050, 820);

  ButtonD.size(180, 30);

  ButtonD.style("background", "RGB(150,203,198)");

  ButtonD.mouseClicked(function () {

    page = i + 3;

  });

  {

    click3 = new Clickable();

    click3.width = 32;

    click3.height = 30;

    click3.strokeWeight = 0;

​

    click3.image = img5;

​

    click3.text = "";

    click3.locate(1175, 365);

​

    click4 = new Clickable();

    click4.width = 80;

    click4.height = 80;

​

    click4.image = img3;

    click4.strokeWeight = 0;

    click4.text = "";

    click4.locate(950, 210);

  }

​

  click4.onPress = function () {

    if (play) {

      play = false;

      click4.image = img3;

    } else {

      play = true;

      click4.image = img4;

      id = 0;

    }

  };

}

​

function draw() {

  background(70, 100, 80);

//Button background

  stroke(150,203,198);

  strokeWeight(5);

  fill(0,150,100);

  line(800, 660, 1270, 660);

  noStroke();

  strokeWeight(5);

  fill(150,203,198);

  textSize(28);

  text("Be diagnosed with Covid-19 at first day.", 810, 690);

  text("Aggravation of Covid -19 after 4 week.", 810, 790);

//introduce

  noFill(0);

  stroke(150,203,198);

  strokeWeight(5);

  line(795,180,1270,180)

  strokeWeight(18);

  line(795,0,795,950)

  strokeWeight(1)

  fill(150,203,198);

  noStroke();

  textSize(35)

  text('Covid-19 Virus (Delta) \nDevelopment in Human Lung',810,40)

  textSize(20)

  text('Ziwei Li 7817442  University of Manitoba\nSCI-4000-T01-PHY7440-T39 Winter 2022',810,120)

  //background of MainScreen

  fill(0);

  noStroke();

  rect(0, 0, 790, 950);

​

  //Slider

  click4.draw();

  push();

  pop();

  //Image in Main Screen

  if (page == 8) image(z1, 357, 81);

  if (page == 9) image(z2, 357, 81);

​

  if (

    mouseX > 825 &&

    mouseX < 1175 &&

    mouseY > 365 &&

    mouseY < 620 &&

    mouseIsPressed

  ) {

    click3.y = mouseY;

  }

  if (page == 1) {

    let id = parseInt(map(click3.y, 365, 620, 1, 16));

​

    if (play) {

      id += parseInt(frt / 60);

      if (id > 15) {

        id = 0;

        frt = 0;

      }

    }

    image(mca[id], 45, 20, 700, 700);

  }

​

  if (page == 2) {

    let id = parseInt(map(click3.y, 365, 620, 1, 16));

    if (play) {

      id += parseInt(frt / 60);

      if (id > 15) {

        id = 0;

        frt = 0;

      }

    }

    image(mcc[id], 45, 20, 700, 700);

  }

​

  if (page == 3) {

    let id = parseInt(map(click3.y, 365, 620, 1, 16));

    if (play) {

      id += parseInt(frt / 60);

      if (id > 15) {

        id = 0;

        frt = 0;

      }

    }

    image(sca[id], 45, 20, 700, 700);

  }

​

  if (page == 4) {

    let id = parseInt(map(click3.y, 365, 620, 1, 16));

    if (play) {

      id += parseInt(frt / 60);

      if (id > 15) {

        id = 0;

        frt = 0;

      }

    }

    image(scc[id], 45, 20, 700, 700);

  }

  //information

  click3.draw();

​

​

​

  textSize(23);

  push();

​

  if (

    mouseX > 1162 &&

    mouseX < 1162 + 100 &&

    mouseY > 225 &&

    mouseY < 225+100 &&

    mouseIsPressed

  ) {

    push();

    stroke(150,203,198);

    strokeWeight(10);

    fill(70, 100, 80);

    rect(55, 50, 680, 600);

    noFill();

    stroke(150,203,198);

    noStroke();

    fill(200,0,0);

    rect(65,460,50,50);

    fill(0,200,200);

    rect(65,550,50,50);

    stroke(150,203,198);

    strokeWeight(5);

    line(55,445,735,445)

    noStroke();

    fill(150,203,198);

    textSize(30);

    text('Instruction:',60,90);

    textSize(22);

    text('Click the Button at right bottom box to choose the dataset you want review.',65,160);

    text('Click',65,320);

    text('for automatic review CT images from top to bottom of lung.',190,320);

    image(img3,125,280,60,60);

    text('Click',65,410);

    text('for stopping automatic review.',190,410);

    image(img4,125,370,60,60);

    text('Click anywhere on',65,240);

    text('Choose the image you want to review in lung',315,240);

    image(img1,245,190,60,60);

    textSize(27);

    strokeWeight(10);

    fill(150,0,0);

    text('Infected pulmonary lobe which cannot recover by \nimmune system.',120,480);

    fill(0,200,200);

    text('Infected pulmonary Artery and Vein which can be \nrecover by immune system.',120,570);

    pop();

  }

​

{

  fill(255);

  noStroke();

  textSize(20);

  text('The dataset are 2D computed tomography (CT) lung images of a Covid-19 patient who get a \npermanent lung damage after experiences a serious illness and recovery.',30,760)

}

​

​

​

  image(img6, 1200, 260, 20, 30);

  noFill();

  stroke(150,203,198);

  strokeWeight(8);

  ellipse(1211,275,50,50)

  noStroke();

  image(img1, 825, 300, 350, 350);

​

  frt += 1;

}

​

function mouseClicked() {

  console.log(mouseX, mouseY);

}

​