let alphabet = ["a", "b", "c","d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "a", "b", "c","d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "a", "b", "c","d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

let groteskFont;

​

function preload() {

  groteskFont = loadFont('https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2Fgrotesk.otf?v=1580943594863sk.otf');

}

​

function setup() {

  createCanvas(400, 400);

​

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

    letters[i] = new Letter();

  }

}

​

function osc(scale) {

  if (!scale) {

    scale = 10;

  }

  return abs(sin(frameCount * 0.01 * scale));

}

​

function draw() {

  background(255*osc, 255*osc, 255*osc);

​

​

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

    letters[i].move(alphabet[i]);

  }

}

​

class Letter {

  constructor() {

    this.x = 200;

    this.y = 200;

    this.rx = random(-3, 3);

    this.ry = random(-3,3);

    this.color = color(random(255), random(255), random(255), random(255));

  }

  move(alphabet) {

    fill(this.color);

    textSize(25)

    text(alphabet, this.x, this.y);

    this.x += this.rx;

    this.y += this.ry;

    if (this.x >= width || this.x <= -10) {

      this.rx = -this.rx;

    }

    if (this.y >= height || this.y <= -10) {

      this.ry = -this.ry;

    }

  }

}