"Glitch is something that extends beyond the most literal technological mechanics: it helps us to celebrate failure as a generative force, a new way to take on the world.";

​

let MARGIN = 40;

​

let words;

​

let wordCount;

let nextUpdateMillis;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(LEFT, TOP);

  textSize(20);

​

  words = phrase.split(" ");

​

  wordCount = 0;

  nextUpdateMillis = 0;

}

​

function draw() {

  background(220);

​

  // position for next word

  let cx = MARGIN;

  let cy = MARGIN;

​

  // counter from 0 to wordCount (how many words to draw this frame)

  for (wi = 0; wi < wordCount; wi++) {

    // keep index within array length with wraparound

    let nextWordIndex = wi % words.length;

    let nextWord = words[nextWordIndex];

​

    // if placing the next word on this line causes overflow

    if (cx + textWidth(nextWord) > width - MARGIN) {

      // reset x, increment y

      cx = MARGIN;

      cy += 1.5 * textSize();

    }

    // draw word

    text(nextWord, cx, cy);

​

    // update cx for next word

    cx += textWidth(nextWord) + textWidth(" ");

  }

​

  // only increment counter if not at the bottom of the page

  if (cy < height && millis() > nextUpdateMillis) {

    // always increment the word count

    wordCount += 1;

​

    // next update time in millis, with some variation

    nextUpdateMillis = millis() + random(150, 300);

  }

}

​