Saturday, April 15, 2023

a fun graph-paper font

 A while back I wrote about some graphpaper font logotype work.

I decided I wanted to do more of that for my new portfolio site but when I dug up the old code, I was bummed how hacky and incomplete character-wise it was. Here's the output of the program I came up with at p5js editor:

My old format was very stupid, I had to specify each segment and each "shadow line" individually. With my new format, I just list each segment (orthogonal or 45 degrees) and if it should be shadowed (i.e. was on the left edge) and I made a heuristic to place the shadow lines on correct intervals. Its not perfect, for letters where the shadow goes behind the front of the letter (Like with "L" or "Z") you have to draw each segment by hand, but overall it worked well with my brain.

Still, specifying all 26 letters by hand would have been a pain, so I made a simple editor as well.

It was a good exercise in not going to crazy with perfectionism (like with editor features, or for generating the final output graphics for my page) but still making some clever code to save myself a lot of work. Plus I just love this typeface, I would play with it and its near cousins on graph paper in high school. (This one is pretty formal, everything is on the whole, half, or quarter graph step, and all angles are 45 degrees.)

No comments:

Post a Comment