let offset;

let numcells;

let border_off;

​

let ctr = 0;

let font;

​

let txtID = 0;

const txt = [

  "I remember my grandparents being frugal.",

  "They would use every piece of an animal.",

  "They would wash plastic bags to reuse.",

  "They would never spend money frivolously.",

  "Nothing would go to waste.",

  "I wonder what stories we'll tell our grandchildren.",

  "I wonder if they'll think we're crazy for avoiding crowds.",

  "I wonder if they'll understand the horror of other people.",

  "I wonder if they'll understand why we hold them tight.",

  "I wonder if an errant cough will send them into a panic attack.",

  "I wonder.",

];

let txtWidths;

​

let gfx;

let gfx_y;

​

function preload() {

  font = loadFont("m5x7.ttf");

}

​

function setup() {

  createCanvas(1000, 1000);

  noiseDetail(18, 0.45);

  gfx = createGraphics(width, height);

​

  cellsize = width * 0.01;

  numcells = width / cellsize;

​

  border_off = width * 0.05;

​

  noStroke();

​

  textFont(font);

  textSize(70);

​

  frameRate(30);

​

  textAlign(CENTER, CENTER);

​

  txtWidths = [];

  for (let i = 0; i < txt.length; i++) {

    let s = 70;

    textSize(s);

    let tw = textWidth(txt[i]);

​

    while (tw > width - 2 * border_off - border_off / 2) {

      s -= 2;

      textSize(s);

      tw = textWidth(txt[i]);

    }

​

    txtWidths.push(s);

  }

  gfx_y = height - 100;

  gfx.textFont(font);

  gfx.noStroke();

  gfx.textAlign(CENTER, CENTER);

}

​

function draw() {

  background(220);

​

  for (let y = 0; y < height; y += cellsize) {

    for (let x = 0; x < width; x += cellsize) {

      let n = noise(x * 0.01, y * 0.01, frameCount * 0.01);

      fill(map(n, 0.0, 1.0, 0, 220));

      square(x, y, cellsize);

    }

  }

​

  fill(color(20, 20, 20, 180));

  rect(0, 0, width, border_off);

  rect(0, border_off, border_off, height);

  rect(border_off, height - border_off, width - 2 * border_off, border_off);

  rect(width - border_off, border_off, border_off, height - border_off);

​

  textSize(txtWidths[txtID]);

  fill(color(20, 20, 20, 180));

  text(txt[txtID], width / 2 - 4, height - 75 - 4);

  fill(255);

  text(txt[txtID], width / 2, height - 75);

​

  if (frameCount % 5 == 0) {

    gfx.fill(color(0, 20, 0, map(gfx_y, height - 75, 0, 255, 0)));

    gfx.textSize(txtWidths[txtID]);

    gfx.text(txt[txtID], width / 2, gfx_y);

    gfx_y -= txtWidths[txtID] / 4;

  }

  if (frameCount % 150 == 0) {

    txtID++;

    if (txtID > txt.length - 1) txtID = 0;

    gfx.clear();

    gfx_y = height - 145;

  }

​

  image(gfx, 0, 0);

}

​