Featured Posts

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

Then I uploaded 3 different fonts, and voila!

A sample poster I made with a deformed "Cinzel" font:

#computationaltypography #poetry #concrete

Related Posts

See All

Comp. Typo | Week 1

https://editor.p5js.org/hafiyyandi/sketches/HJIDW3827

Recent Posts