"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 alphaValues = [];

​

let wordCount;

let nextUpdateMillis;

​

let minTextSize = 20;

let maxTextSize = 30;

​

let spaceWidth;

let lineHeight;

​

let fadeVelocity;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(LEFT, TOP);

  textFont("sans-serif");

  textSize(minTextSize);

​

  words = phrase.split(" ");

​

  spaceWidth = textWidth(" ");

  lineHeight = 1.5 * textSize();

​

  wordCount = 0;

  nextUpdateMillis = 0;

​

  fadeVelocity = -0.25;

}

​

function draw() {

  background(220);

  randomSeed(1010);

​

  // update alpha values

  for (let ai = 0; ai < alphaValues.length; ai++) {

    alphaValues[ai] += fadeVelocity;

  }

​

  // 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];

​

    let yOffset = 0;

    let wordAlpha = alphaValues[wi];

​

    // set size and color based on word

    if (nextWord.includes("litch") || random() > 0.95) {

      fill(200, 0, 0, wordAlpha);

      textFont("monospace");

      textSize(maxTextSize);

      yOffset = -maxTextSize / 6;

      nextWord = nextWord.toUpperCase();

    } else {

      fill(0, wordAlpha);

      textFont("sans-serif");

      textSize(minTextSize);

      yOffset = 0;

    }

​

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

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

      // reset x, increment y

      cx = MARGIN;

      cy += lineHeight;

​

      if (cy > height - MARGIN) {

        cy = MARGIN;

      }

    }

​

    // draw word

    text(nextWord, cx, cy + yOffset);

​

    // update cx for next word

    cx += textWidth(nextWord) + spaceWidth;

  }

​

  // check if it's time to update

  if (millis() > nextUpdateMillis) {

    // always increment the word count

    wordCount += 1;

    alphaValues.push(255);

​

    // next update time in millis, with some variation

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

  }

}

​