let numberOfWords = 10;

let totalTime = 60000;

let startTime;

let state = 0;

​

function preload() {

  result = loadStrings('Words.txt');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  console.log(windowHeight);

  background(200);

  button = createButton('Get New Words');

  button.position(30, 80 + 60 * numberOfWords);

  button.mousePressed(drawWordBoxes);

  button.size(windowWidth * .75, 60);

  button.style('background-color', '#4CAF50');

  button.style('border', 'none');

  button.style('color', 'white');

  // button.style('padding', '10px 10px');

  button.style('text-align', 'center');

  button.style('text-decoration', 'none');

//   display: inline-block;

  button.style('font-size', '30px');

  button.style('border-radius', '10px');

  drawWordBoxes(false);

}

​

function draw() {

   noFill();

    stroke(250);

    ellipse(400,40,50,50);

    fill(100);

  if (state == 1){

    let t = millis() - startTime;

    t = t / totalTime;

    arc(400, 40, 50, 50, 3* PI /2 , 3* PI/ 2 +(lerp(0, 2 * PI, t)));

    if (abs(t - 1.0) <= .01){

      console.log("TIMES UP");

      state = 0;

      fill('rgba(255,43,140, 0.25)');

  rect(0,0,windowWidth,windowHeight);

  fill(255);

    }

  }

}

function drawWordBoxes(populated = true){

  if (populated == true){

    startTime = millis();

    state = 1;

  }

  background(200);

  textSize(40);

  fill(100);

  text("Put on the Uh-Uh!", 30, 60);

  textSize(30);

  noStroke();

   for (let i = 0; i < numberOfWords; i++){ 

     fill(250);

     rect(30,80 + (i * 60),windowWidth * .75,50,10);

     fill(100);

     if (populated){

       text(random(result), 50, 115 + (i * 60));

     }

   }

}