Featured Posts

Comp. Typo | Hanzi-ish(?)

November 6, 2018

I use a lot of trendy bold-but-sleek sans-serif typefaces in my graphic design work because (a) I’m a sucker for trends, and (b) I like the silhouette the letters make. So, for this assignment, I wanted to make letters that are as graphical. I also wanted to make something that feels organic because I just don’t like hard corners in my letterforms.

 

I started out drawing a squiggly line.

 

beginShape();

curveVertex(10, 26);

curveVertex(15, 25);

curveVertex(30, 26);

curveVertex(40, 27);

curveVertex(52, 26);

endShape();

 

 

This is a line that goes from (10, 26) to (52, 26), but has many vertices with slight y-variations in between.

 

To make it organic, I drew another line with different strokeWeight, and randomizes the vertices’ x coordinate a little.

 

strokeWeight(2.5);

beginShape();

curveVertex(10, 26);

curveVertex(40, 25);

curveVertex(15, 26);

curveVertex(40, 27);

curveVertex(52, 26);

endShape();

 

 

Satisfied with how this stroke looks, I wrote a system that draws multiples lines to create a letter. This is how the system works:

  • Create 5 coordinates that fall on single horizontal line, but with randomized x-position increment.

  • Create slight variation (-1 to 1) in the y-coordinates

  • Draw a line with thin stroke across these coordinates

  • Draw a thicker line across the same coordinates but in random coordinate order.

  • Repeat the steps above 3-5 more times, each time moving the “brush” down by 6 pixels.

  • Repeat for 2 more times, but draw vertically instead of vertically.

 

(Source code here)

 

And I put it inside Allison’s grid example, made some interaction using mouse position, and here it is:

 

 

 

(Move your cursor and click to generate different shapes.)

 

Because I made the variation value increase/decrease based on mouse position, the letterforms randomness can vary as well. They turn out looking more like Hanzi/Kanji characters than trendy latin character typefaces. That said, I really like it when the variation is very slight or very big.

 

 

 

 

 

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