// You can find the whole tutorial here 

// https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/

//

// I left the code snippet to import a custom font.

// Link to the Roboto Mono : https://fonts.google.com/specimen/Roboto+Mono

//

// Have fun ! 

​

​

​

let font;

let pg;

​

let tX,tY,sp,dspx,dspy,fct;

​

let xx=0, nx =0;

let yy=0, ny=0;

​

let cx=0, cxx=0;

let cy=0, cyy=0;

​

function preload(){

   font = loadFont("Gen-Shin-Gothic-Bold.ttf");

}

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

  translate(0,-200)

  pg = createGraphics(windowWidth, windowHeight);

​

}

​

function draw() {

  background(0,10);

​

  //Interpolation//

  if(frameCount%100 == 0){

    nx=random(20, 100);

    ny=random(10, 100);

    cxx=random(0, 125);

    cyy=random(10, 25);

  }

  xx += (nx - xx) * 0.1;

  yy += (ny - yy) * 0.5;

  cx += (cxx - cx) * 0.1;

  cy += (cyy - cy) * 0.1;

​

  // PGraphics

​

  pg.background(0,1);

  pg.fill(255,cx,0);

   pg.textFont(font);

  pg.textSize(400);

  pg.push();

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

  pg.textAlign(CENTER, CENTER);

  pg.text("火", 0, 0);

  pg.pop();

​

​

  let tilesX = xx;

  let tilesY = yy;

​

  let tileW = int(width/tilesX);

  let tileH = int(height/tilesY);

​

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

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

      // WARP

      let waveX = int(sin(frameCount * 100 + ( x * y ) * xx) * cy);

      let waveY = int(sin(frameCount * 100 + ( x * y ) * cx) * xx);

​

      if (100 === 0){

          waveX = 0;

      }

​

      if (100 === 0){

          waveY = 0;

      }

      // image(pg,0,0)

      // SOURCE

      let sx = x*tileW + waveX;

      let sy = y*tileH + waveY;

      let sw = tileW;

      let sh = tileH;

​

​

      // DESTINATION

      let dx = x*tileW;

      let dy = y*tileH;

      let dw = tileW;

      let dh = tileH;

​

​

​

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

​

    }

  }

}

​

​