constructor(_word, _x, _y) {

    this.word = _word;

    this.x = _x;

    this.y = _y;

    this.alpha = 255;

    this.fadeVel = -0.25;

​

    this.red = 0;

    this.font = "sans-serif";

    this.size = minTextSize;

    this.yOffset = 0;

​

    if (this.word.toLowerCase() == "glitch" || random() > 0.95) {

      this.red = 200;

      this.font = "monospace";

      this.size = maxTextSize;

      this.yOffset = -this.size / 6;

      this.word = this.word.toUpperCase();

    }

    textFont(this.font);

    textSize(this.size);

    this.width = textWidth(this.word);

  }

}

​

let phrase =

  "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 drawnWords;

​

let cx;

let cy;

​

let wordCount;

let nextUpdateMillis;

​

let minTextSize;

let maxTextSize;

​

let spaceWidth;

let lineHeight;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  words = phrase.split(" ");

  drawnWords = [];

​

  cx = MARGIN;

  cy = MARGIN;

​

  wordCount = 0;

  nextUpdateMillis = 0;

​

  minTextSize = 20;

  maxTextSize = 30;

​

  textAlign(LEFT, TOP);

  textFont("sans-serif");

  textSize(minTextSize);

​

  spaceWidth = textWidth(" ");

  lineHeight = 1.5 * minTextSize;

}

​

function draw() {

  background(220);

​

  // iterate over drawn words and draw

  for (wi = 0; wi < drawnWords.length; wi++) {

    let nextWord = drawnWords[wi];

​

    fill(nextWord.red, 0, 0, nextWord.alpha);

    textFont(nextWord.font);

    textSize(nextWord.size);

    text(nextWord.word, nextWord.x, nextWord.y + nextWord.yOffset);

  }

​

  // check if it's time to add a new FadingWord to array

  if (millis() > nextUpdateMillis) {

    let nextWordIndex = wordCount % 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 += lineHeight;

​

      if (cy > height - MARGIN) {

        cy = MARGIN;

      }

    }

​

    // add word to array

    let newFadingWord = new FadingWord(nextWord, cx, cy);

    drawnWords.push(newFadingWord);

​

    // update cx for next word

    cx += newFadingWord.width + spaceWidth;

​

    // always increment the word count

    wordCount += 1;

​

    // next update time in millis, with some variation

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

  }

}

​