Featured Posts

Comp. Typo | Deformed Font Generator

November 27, 2018

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:

 

 

 

 

 

 

Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

1/10
Please reload

Recent Posts
Please reload

Search By Tags

Hafiyyandi | Creative Technologist

New York, New York | hafiyyandi@gmail.com