let wordCount = 0;

let cumWordCount = 0;

let speechIteration = 1;

let speech;

let textX = 0;

let textY = 45;

let currenMinute;

let timestamp = 0;

let img;

let wLeft = 300;

let xRight = 300;

let wRight = 300;

let r = 70;

let g = 116;

let b = 229;

let c;

let a = 10;

let font;

let borderColor;

//store individual word from the speech string

let speechArr = [];

function preload() {

  //TODO: change font

  speech = loadStrings('assets/speech.txt');

  img = loadImage('assets/RBG.png');

  font = loadFont('assets/LibreBaskerville-Bold.ttf');

}

​

function setup() {

  createCanvas(600, 600);

  background(255);

  c = color(r, g, b);

  c.setAlpha(a);

  borderColor = color(255,20,147);

  speech = speech.toString();

  speechWordCount = speech.split(' ').length;

  for (let i=0;i<speechWordCount;i++)

  {

    speechArr.push(speech.split(" ")[i]);

  }

  //starting page number as the current minute.

  currentMinute = minute();

  //add a slider to speed up time. Change frame rate basically. 

  slider = createSlider(1, 12, 1);

  slider.position(width/12, height-50);

  slider.style('width', '500px');

  //need image here for the first page

  image(img, 100, 100, 400, 400);

}

function draw() {

  let val = slider.value();

  frameRate(val);

  noFill();

  stroke(borderColor);

  strokeWeight(10);

  rect(0, 0, width, height);

​

  fill(c);

  noStroke();

  rect(0,0, wLeft -= 5,600);

  rect(xRight += 5,0 ,wRight += 5,600);

​

  fill(255,20,147);

  textSize(16);

  textAlign(CENTER, CENTER);

  textFont(font);

  let sliderString;

  sliderString = "<<--- change RBG time --->>";

  text(sliderString, width/2, height-20);

  //rect(width/12, height-100, 500, 100);

  //move x of the next text to the right using textWidth(last word) and an additional 40 px. 

  //every second, change color of frame

  if(millis() - timestamp > 1000){

    timestamp = millis();

    borderColor = color(random(255),random(255),random(255))

  }

  text(speechArr[wordCount], textX +=   textWidth(speechArr[wordCount-1]) + 30, textY);

  wordCount ++;

  cumWordCount ++;

  a -= 0.1;

​

  //loop speech if word count exceeds 993

  if (wordCount >= speechArr.length-1){

    wordCount = 0;

    textY += 55;

    textX = 0;

  } 

  //one line can fits 6 words

  if (wordCount % 6 == 0){

    textY += 55;   

    textX = 0;

  } 

  //canvas contains 60 words max at a time.

  // can not use else if, becase if earlier condition is met, it will not enter

  if (wordCount % 60 == 0) {

  background(255);

​

  noStroke();

  if(wLeft > 0){

    wLeft -= 5;

    wRight += 5;

    xRight += 5;

  } else {

    wLeft = 300;

    wRight = 300;

    xRight =300;

  }

  //call image here so that the strokes will not get darkened repetitively.

  image(img, 100, 100, 400, 400);

  textX = 0;

  textY = 45;

  }

}

​