let img;

let img2;

let img3;

let img4;

let img5;

let img6;

let img7;

let img8;

​

//initial scrolling value

let scroll = 0;

​

//conditions

let speak = false;

let welcome = true;

let Link = false;

let Partner = false;

let Elsevier = false;

​

//rotatio

let angle = 0;

​

//preloading images into sketch

function preload() {

  img = loadImage("Background_app.png");

  img2 = loadImage("rotate (2).png");

  img3 = loadImage("fill (2).png");

  img4 = loadImage("Instagram (2).jpg");

  img5 = loadImage("Instagram_scroll.png");

  img6 = loadImage("Insta_bar.PNG");

  img7 = loadImage("Abstract.png");

  img8 = loadImage("Instagram_partner.png");

}

​

function setup() {

  createCanvas(302, 650); //536

​

  //Color mode to Hue Saturation Brightness & mapping

  colorMode(HSB, 360, 100, 100, 100);

​

  //set drawing mode to center of shape & text

  rectMode(CENTER);

  imageMode(CENTER);

  textAlign(CENTER, CENTER);

​

  noFill();

  strokeWeight(20);

​

  //Rotating in radians

  angleMode(RADIANS);

}

​

function draw() {

  //Background interface

  image(img, width / 2, height / 2, width, height);

​

  //Glow

  drawingContext.shadowBlur = 32;

  drawingContext.shadowColor = color(0, 0, 100);

​

  //Start window

  if (welcome == true) {

    Page();

    Start();

  }

  if (Link == true) {

    Instagram();

    welcome = true;

  }

​

  if (Partner == true) {

    InstagramPartner();

    welcome = true;

  }

​

  //Elsevier breast size preference men

  if (Elsevier == true) {

    image(img7, width / 2, height / 2, 302, 536);

  }

​

  //AI feedback

  if (welcome == false) {

    //Listening

    Rotate();

​

    if (speak == true) {

      //Speaking

      image(img3, 0, 0, 192, 192);

    } else {

    }

  }

}

​

//Setting keys that control AI feedback

function keyPressed() {

  //Speaking

  if (key == "a") {

    speak = true;

  }

​

  //Listening

  if (key == "s") {

    speak = false;

  }

​

  //Instagram patient

  if (key == "d") {

    Link = true;

  }

​

  //Instagram partner

  if (key == "f") {

    Partner = true;

  }

​

  //Elsevier article

  if (key == "g") {

    Elsevier = true;

    welcome = true;

  }

​

  //Return to AI overview

  if (key == "h") {

    welcome = false;

    Link = false;

    Partner = false;

    Elsevier = false;

  }

}

​

//Enable touchscreen for user to start experience

function mousePressed() {

  if (

    mouseX < width / 2 + 120 &&

    mouseX > width / 2 - 120 &&

    mouseY > height / 2 + 50 - 60 &&

    mouseY < height / 2 + 50 + 60

  ) {

    welcome = false;

  }

}

​

//Instagram feed (faked)

function Instagram() {

  background(255);

  //make image move down according to scroll value

  translate(0, scroll);

  image(img5, width / 2, height * 5 - 280, width, 5956);

  image(img6, width / 2, 20, width, 30);

  console.log(scroll);

}

​

//Instagram feed partner (faked)

function InstagramPartner() {

  background(255);

  translate(0, scroll);

  image(img8, width / 2, height * 5 - 280 , width, 5956);

  image(img6, width / 2, 20, width, 30);

  console.log(scroll);

}

​

//value of scrolling wheel

function mouseWheel(event) {

  scroll -= event.delta;

}

​

//Rotating speed & wheel

function Rotate() {

  translate(width / 2, height / 2);

  rotate(angle);

  image(img2, 0, 0, 200, 200);

  angle = angle + 0.05;

}

​

//Welcome page setup

function Page() {

  image(img, width / 2, height / 2, width, height);

  noStroke();

  fill(255);

  textSize(50);

  text("WELCOME", width / 2, height / 5);

  textSize(15);

  text("Begin your exploration with me", width / 2, height / 5 + 50);

  text("by pressing 'START'", width / 2, height / 5 + 75);

}

​

//Start button setup

function Start() {

  noFill();

  strokeWeight(2);

  stroke(255);

  ellipse(width / 2, height / 2 + 50, 120, 120);

  textSize(30);

  text("START", width / 2, height / 2 + 50);

}

​