// 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;

​

function preload(){

   font = loadFont("DelaGothicOne-Regular.ttf");

}

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

  translate(0,-200)

  // createSliders();

  pg = createGraphics(windowWidth, windowWidth);

​

}

​

function draw() {

  background(0);

​

​

  // PGraphics

​

  pg.background(0);

  pg.fill('#FF5000ff');

   pg.textFont(font);

  pg.textSize(400);

  pg.push();

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

  pg.textAlign(CENTER, CENTER);

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

  pg.pop();

​

​

  let tilesX = 100;

  let tilesY = 100;

​

  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 ) * 500) * 100);

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

​

      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);

​

    }

  }

}

​

// function createSliders(){

//   tX = createSlider(1, 80, 16, 1);

//   tX.position(20, height + 40);

//   createP('Tiles X').position(20, height);

​

//   tY = createSlider(1, 80, 16, 1);

//   tY.position(20, height + 100);

//   createP('Tiles Y').position(20, height+60);

​

//   sp = createSlider(0, 1, 0.005, 0.01);

//   sp.position(20, height + 160);

//   createP('Speed').position(20, height+120);

​

//   dspx = createSlider(0, 0.1, 0.05, 0.001);

//   dspx.position(180, height + 40);

//   createP('Displacement X').position(180, height);

​

//   dspy = createSlider(0, 0.2, 0, 0.01);

//   dspy.position(180, height + 100);

//   createP('Displacement Y').position(180, height+60);

​

//   fct = createSlider(0, 300, 100, 1);

//   fct.position(180, height + 160);

//   createP('Offset').position(180, height+120);

​

​

// }

​

​

// go to fullscreen

// copy lines below to add fullscreen toggle to

// your sketch. Notice that if you are already using

// the keyPressed function, add lines 20-22 to it.

​

function keyPressed() {

  if (key === "o" || key === "O") {

    enterFullscreen();

  }

}

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function (event) {

  event.preventDefault();

};

​