Aa

// By Roni Kaufman

// https://ronikaufman.github.io

​

const N_FRAMES = 60;

​

function setup() {

  createCanvas(600, 600);

  pixelDensity(2);

  frameRate(10);

  noStroke();

  backGrph = createGraphics(width, height);

  backGrph.pixelDensity(1);

  backGrph.textFont("Times New Roman", 256);

  backGrph.textAlign(CENTER, CENTER);

  //backGrph.textStyle(BOLD);

  backGrph.background(255);

  backGrph.noStroke();

  backGrph.fill(0);

  let margin = 0;

  backGrph.text("Aa", margin, height/2, width-2*margin);

  backGrph.loadPixels();

}

​

function draw() {

  background(240);

  let t = (frameCount%N_FRAMES)/N_FRAMES;

  let s = 12; 

  fill(250, 250, 0);

  pixelate(s, t);

  fill(40);

  pixelate(s, t+4/N_FRAMES);

}

​

function pixelate(s, t) {

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

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

      let xOffset = (s*(1+cos(t*TAU - y/10))/2);

      let yOffset = (s*(1+cos(t*TAU - x/10))/2);

      let index = 4*(round(y+yOffset)*width + round(x+xOffset));

      let val = backGrph.pixels[index];

      if (val < 20) {

        square(x, y, s);

      }

    }

  }

}