Asemic Writing - p5.js Spline Script

For the second week of CompTypo, we were asked to create a program that produces asemic writing. I really wanted to do something novel for this assignment, either designing a new asemic script or experimenting with converting asemic glyphs generated by p5 into OpenType fonts using opentype.js. But, in the end, I had a huge deadline for NIME due the night before, so I didn’t get to spend as much time as I wanted on this. Such is life at ITP.

As a sort of warm-up exercise, I ported Anders Hoff’s Spline Script algorithm for cursive handwriting to p5.js.

First, I generated the glyphs in a grid, following the pattern set by Allison’s example sketches. I should note that I used the d3-delaunay JavaScript library to help me generate Voronoi tesselations that I could then use to generate multiple permutations for each glyph.

Here, you can left click to generate new permutations on the same glyph alphabet or right click to generate a new alphabet entirely.

Then, I sort of guesstimated what Hoff meant by “concatenate the spline of a single glyph with the neighbouring characters in the word” and ended up with a decent-ish result. I added some additional parameters for controlling kerning, spacing between words, and spacing between lines. I used a page from Italo Calvino’s Invisible Cities as source text to get word lengths that felt like English.

As I worked on this, I felt like I was re-inventing a lot of the tools that HTML and CSS give you for controlling typography, so I think one next step with this would be to try to turn these asemic glyphs into OpenType/TrueType fonts and leverage those browser technologies more effectively.

As above, left clicking generates a new permutation on the same glyphs and right clicking generates a new set of glyphs.