p5j.s Typography

Using System fonts in p5.js is quite simple. You can also load your own fonts and use them to type on the canvas

let myFont;
function preload() {
  myFont = loadFont('helvetica.otf'); //load your own font
}

function setup() {
  fill(0,0,255);
  textFont(myFont);
  textSize(36);
  text('p5*js', 10, 50);
}

In order to make interactive, kinetic typography, you need to use p5.Graphics. By calling createGraphics(w, h, [renderer]) you can draw into an off-screen graphics buffer. It allows you to overlay graphics on top of the canvas

The following example is based on https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/

// GRID
const g = 100; // cell width
const cellnum = 5; // numbers of cells per row and column

// BASIC
let cg; //canvas

// SOURCE
let sx;
let sy;
let sw;
let sh;

// DESTINATION
let dx;
let dy;
let dw;
let dh;
var wave;


function setup() {
  createCanvas(400, 400);
  cg = createGraphics(400, 400);
  cg.fill(0,0,0);
  cg.textFont("Hind");
}

function draw() {
  background(225);
  // grid();
  cg.push();
  cg.translate(width / 2, height / 2);
  cg.textSize(200);
  cg.textAlign(CENTER, CENTER);
  cg.text('p5.js', 0, 0);
  cg.pop();

  for (let x = 0; x < cellnum; x++) {
    for (let y = 0; y < cellnum; y++) {
       wave = int(cos((frameCount + ( x*y )) * 0.1) * 200);
      
      // SOURCE
      sx = x * g + wave;
      sy = int(y * g + (wave*0.2));
      sw = g;
      sh = g;

      // DESTINATION
      dx = x * g;
      dy = y * g;
      dw = g;
      dh = g;
      copy(cg, sx, sy, sw, sh, dx, dy, dw, dh);
    }
  }
grid();
}

function grid() {
  for (let i = 0; i < cellnum; i++) {
    for (let j = 0; j < cellnum; j++) {

      //show grid background
      cg.strokeWeight(random(1,3));
      cg.stroke(0);
      cg.noFill();
      cg.rect(i * g, j * g, g, g);

    }
  }
}

Another method to manipulate the font is to use textToPoints(txt, x, y, fontSize, [options])method, which allows us to create a vertex array on the path which define a specific string.

Programming

p5j.s Typography

Analytics

Related content