// make changes to numbers and text

// (headline, sub-header and body-copy)

// and exchange the background image with yours.

//

// don't be afraid of the length of code,

// look for @make-changes-here in the code.

​

// @make-changes-here

// for better readability, leave some comments next

// to the following sequence of variables to better

// understand to which visual they belong to

​

​

//time is measured in milliseconds, 1 millisecond = 1 sec

let timeMark1 = 2000;

let timeMark2 = 4000;

let timeMark3 = 5000;

let timeMark4 = 6000;

let timeMark5 = 7000;

let timeMark6 = 8000;

​

// @make-changes-here

// make changes to the headline, sub-header 

// and body-copy content

​

let headline = "Singapore"; // the \n charater is a new-line 

​

//subheader

let sh = "PROJECTED MRT ROUTE 2030";

​

//body copy

let bc =

  "One day we're going to need 50 stops to get home instead of 10.";

​

// variables to measure time

let timeStamp = 0;

let timeNow = 0;

​

// a set of variables used to animate visual elements

let newX = 0;

let headerX = 0;

let headerY = 0;

let subX = 0;

let subY = 0;

let bx = 0;

let by = 0;

let pa1 = 0; //coordinates for the element() quad shape, 4 pairs

let pa2 = 0;

let pb1 = 0;

let pb2 = 0;

let pc1 = 0;

let pc2 = 0;

let pd1 = 0;

let pd2 = 0;

​

​

// what is backgroundImage and font?

// backgroundImage and font are 2 variables which

// we will use to store an image and a font in memory

// from where we can read it later.

​

let backgroundImage;

let font;

let subheaderfont;

let bodyfont;

​

function preload() {

  backgroundImage = loadImage("knots-01.jpg");

  font = loadFont("Canterbury.ttf");

  subheaderfont = loadFont("Helvetica Neue LT 77 Bold Condensed.ttf");

  bodyfont= loadFont("Canterbury.ttf");

}

​

function setup() {

  createCanvas(540, 720);

  timeStamp = millis();

}

​

function draw() {

  image(backgroundImage, 0, 0);

  timer();

​

}

​

// this function handles the animation and 

// displays all shapes rendered to the canvas

function timer() {

  timeNow = millis() - timeStamp;

​

  // time-based conditionals

​

  if (timeNow < timeMark1) {

    //milestone 1

​

    header(60, 100); //displays header

    subheader(60, 120); //displays subheader

    shapeElement(230, 580, 230, 720, 530, 720,530, 580);

    bodycopy(250, 600); //displays bodycopy

  } else if (timeNow >= timeMark1 && timeNow < timeMark2) {

    //milestone 2

    header(210, 630); //displays header

    subheader(210, 650); //displays subheader

    shapeElement(0, 0, 540, 0, 540, 500, 0, 500);

    bodycopy(50, 60); //displays bodycopy

  } else if (timeNow >= timeMark2 && timeNow < timeMark3) {

    //milestone 3

    header(210,100); //displays header

    subheader(60,650 ); //displays subheader

    shapeElement(130, 280, 440, 280, 440, 400,130 ,400);

    bodycopy(150,300); //displays bodycopy

  } else if (timeNow >= timeMark3 && timeNow < timeMark4) {

    //milestone 4

    header(150,300); //displays header

    subheader(160,320); //displays subheader

    shapeElement(0, 720, 0, 380, 540, 380, 540, 720);

    bodycopy(150,400); //displays bodycopy

  } else if (timeNow >= timeMark4 && timeNow < timeMark5) {

    //milestone 5

    header(300, 300); //displays header

    subheader(20, 320); //displays subheader

    shapeElement(0, 700, 540, 700, 540, 720, 0, 720);

    bodycopy(300, 400); //displays bodycopy

  } else if (timeNow >= timeMark5 && timeNow < timeMark6) {

    //milestone 6

    header(150, 300); //displays header

    subheader(160, 320); //displays subheader

    shapeElement(130,330,500,330,500,340,130,340);

    bodycopy(150, 400); //displays bodycopy

  } else if (timeNow >= timeMark6) {

    timeStamp = millis();

    console.log("go back to start.")

  }

}

​

// header

// @make-changes-here

function header(nX, nY) {

  fill(0, 0, 300);

  noStroke;

  textFont(font);

  textSize(72);

​

  headerX = lerp(headerX, nX, 0.05);

  headerY = lerp(headerY, nY, 0.05);

​

  text(headline, headerX, headerY);

}

​

// subheader

// @make-changes-here

function subheader(nX, nY) {

  subX = lerp(subX, nX, 0.05);

  subY = lerp(subY, nY, 0.05);

  strokeWeight(3);

  stroke(0,0,255)

  fill(255, 255, 255);

  textFont(subheaderfont);

  textSize(23);

  text(sh, subX, subY, 288, 360); // Text wraps within text box

}

​

// body-copy

// @make-changes-here

function bodycopy(nX, nY) {

  bx = lerp(bx, nX, 0.05);

  by = lerp(by, nY, 0.05);

stroke(0,0,255)

  fill(255, 255, 255);

  textSize(30);

    textFont(bodyfont);

  text(bc, bx, by, 288, 360);

}

​

function shapeElement(a1, a2, b1, b2, c1, c2, d1, d2) {

  pa1 = lerp(pa1, a1, 0.05);

  pa2 = lerp(pa2, a2, 0.05);

  pb1 = lerp(pb1, b1, 0.05);

  pb2 = lerp(pb2, b2, 0.05);

  pc1 = lerp(pc1, c1, 0.05);

  pc2 = lerp(pc2, c2, 0.05);

  pd1 = lerp(pd1, d1, 0.05);

  pd2 = lerp(pd2, d2, 0.05);

​

  noStroke();

  fill(0, 0, 300, 200);

  beginShape();

​

  vertex(pa1, pa2);

  vertex(pb1, pb2);

  vertex(pc1, pc2);

  vertex(pd1, pd2);

  endShape(CLOSE);

}

​

​

​