Comp. Typo | Deformed Font Generator

In the spirit of faux-brutalism trend in graphic design, I made a deformed font generator (source).

You can deform all of the glyphs in the typeface and download it as a new font file (go to source if download button does not work).

Initially, I wanted to write my own glyph transformation / deformation code. My first idea was to make the glyphs wider, and to do that I used this code to detect a horizontal line:

if (isModded){ //if previously it's drawing a horizontal line push(); fill('BLUE'); noStroke(); //ellipse(newX, y, 10, 10); pop(); newX = x + inc; isModded = false; } if (prevY) { let deltaY = prevY - y; if (deltaY == 0) { //if it's drawing a horizontal line

push(); fill('RED'); noStroke(); //ellipse(newX, y, 10, 10); pop(); isModded = true; newX = x + inc; } }

But that didn't turn out too well.

Then I took the snap-to-grid code on opentype.js homepage and combined it with Allison's opentype modify every glyph example.

This is the bit of the code to that snaps the coordinates of the glyph to the grid:

if (cmd.type !== 'Z') { cmd.x = snap(cmd.x + snapX, snapDistance, strength) - snapX; cmd.y = snap(cmd.y + snapY, snapDistance, strength) - snapY; } if (cmd.type === 'Q' || cmd.type === 'C') { cmd.x1 = snap(cmd.x1 + snapX, snapDistance, strength) - snapX; cmd.y1 = snap(cmd.y1 + snapY, snapDistance, strength) - snapY; } if (cmd.type === 'C') { cmd.x2 = snap(cmd.x2 + snapX, snapDistance, strength) - snapX; cmd.y2 = snap(cmd.y2 + snapY, snapDistance, strength) - snapY; }