Font Experiments

For this assignment we experimented with fonts as data using the opentype.js JavaScript library.

I wanted to experiment with perlin noise to make the letters wiggle in a non-repeating manner but periodically return to their normal, unperturbed state. I did this using P5's noise function multiplied by a factor linked to the sin of the frameCount. Periodically this will be equal to zero, effectively turning off the noise. What I like about this is that it distorts the letters in a coordinated fashion that (almost never) makes the letters overlap.

The relevant code is below.

commandTransform(path.commands, function(x, y) {
  noiseFactor = 150 * p.sin(p.frameCount / 100);
  let newX = x + noiseFactor * (p.noise(x / 200, y / 200, p.frameCount / 150) - 0.5);
  let newY = y + noiseFactor * (p.noise(y / 200, x / 200, p.frameCount / 150) - 0.5);
  return [newX, newY];
})

I also used opentype's Path.getBoundingBox function to get the path's size and center it horizontally and vertically in the sketch. To get it to align vertically the way I wanted I had to consider where the path's origin is relative to the glyphs. The origin is aligned with the baseline of the glyphs, not the glyphs' maximum descent. In the text "Wiggles!!" it is aligned with the bottom of the 'W' glyph, not the 'g' glyphs.

I used the QuigleyWiggly font created by Nick's Fonts. It seemed appropriate.

If you are interested you can see my P5 code.