font1 = loadFont("WsParadoseRegular-1jPAe.ttf");

  font2 = loadFont("Ridayparcia-JRgqn.otf");

}

//array for storing all quotes

let archive = [];

let archIndex = 0;

//index for each letter in the sentance, for typeout effect

let letterIndex = 0;

let lastTypedTime = 0;

//left and right arrow color, default

let triColorL = 0;

let triColorR = 0;

​

function setup() {

  createCanvas(400, 400);

​

  //preset quotes stored in array

  let s1 = ["be an introvert", "enjoy life by yourself"];

  let s2 = ["share companionship in silence", "have nothing to say"];

  let s3 = ["not be perfect", "make mistakes"];

  let s4 = ["be vulnerable", "express emotion"];

  let s5 = ["take a break", "start again"];

  archive = [s1, s2, s3, s4,s5];

}

​

function draw() {

  background(70, 77, 119);

​

  //draw left and right arrows

  noStroke();

  fill(triColorL);

  triangle(15, 200, 30, 210, 30, 190);

  fill(triColorR);

  triangle(385, 200, 370, 210, 370, 190);

  //draw square frame

  strokeWeight(1);

  stroke(255);

  fill(220);

  rectMode(CENTER);

  rect(width / 2, height / 2, 300);

  //appearance for quotes

  fill(0);

  noStroke();

  textAlign(CENTER);

  textFont(font2);

  textSize(30);

  typeOut(archive[archIndex][0], 50, width / 2, 140);

  typeOut(archive[archIndex][1], 50, width / 2, 300);

  //appearance for prompts

  textAlign(CENTER);

  textFont(font1);

  textSize(22);

  text("IT' S OKAY TO", width / 2, 100);

  text("AND", width / 2, 230);

  text("IT' S OKAY TO", width / 2, 260);

  //appearance for underlines

  strokeWeight(2);

  stroke(0);

  line(80, 150, 320, 150);

  point(330, 150);

  line(80, 310, 320, 310);

  point(330, 310);

}

​

function mousePressed() {

  //when you press arrows, switch quotes

  letterIndex = 0;

  //switch to the previous quote

  if (mouseX > 15 && mouseX < 30 && mouseY > 190 && mouseY < 210) {

    if (archIndex > 0) {

      archIndex = archIndex - 1;

    } else {

      archIndex = archive.length - 1;

    }

    triColorL = 220; //light up the arrow when pressed

  }

  //switch to the next quote

  if (mouseX > 370 && mouseX < 385 && mouseY > 190 && mouseY < 210) {

    if (archIndex < archive.length - 1) {

      archIndex = archIndex + 1;

    } else {

      archIndex = 0;

    }

    triColorR = 220; //light up the arrow when pressed

  }

}

​

function mouseReleased() {

  //let the arrow go back to default color when not pressed

  triColorL = 0;

  triColorR = 0;

}

​

function typeOut(textToType, speed, x, y) {

  //the typeout effect

  if (millis() - lastTypedTime > speed && letterIndex < textToType.length) {

    //calculate the time between each letter appearing

    letterIndex++; //type out the next letter

    lastTypedTime = millis(); //reset time after each letter is typed out

  }

  text(textToType.substring(0, letterIndex), x, y);//type out the 

}

​