// en: following the tutorial of tim rodenbröcker about kinetic type

​

let canvasSize = 800;

​

let pg;

​

let tilesX = 8;

let tilesY = 8;

​

let tileW = canvasSize / tilesX;

let tileH = canvasSize / tilesY;

​

function setup() {

  createCanvas(canvasSize, canvasSize, P2D);

  pg = createGraphics(canvasSize, canvasSize, P2D);

  pg.background(0);

  pg.fill(255);

  pg.textFont('Helvetica', 600);

  pg.textAlign(CENTER, CENTER);

  pg.push();

  pg.translate(width/2, height/2 - 25);

  pg.text('a', 0, 0);

  pg.pop();

}

​

function draw() {

  background(0);

  // image(pg, 0, 0);

  const s = pg.canvas.width / pg.width;

​

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

    for (let j = 0; j < tilesY; j++) {

      let wave = int(sin(frameCount * 0.05 + ( i * j ) * 0.07) * 100);

      // source

      let sx = i * tileW + wave;

      let sy = j * tileH;

      let sw = tileW;

      let sh = tileH;

      // destination

      let dx = i * tileW;

      let dy = j * tileH;

      let dw = tileW;

      let dh = tileH;

      // copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);

      drawingContext.drawImage(

      pg.canvas,

      s*sx,

      s*sy,

      s*sw,

      s*sh,

      dx,

      dy,

      dw,

      dh

    );

    }

  }

}