Computational Typography

Week 14: Chat Woids

Welcome to Chat Woids, a chat room that embodies the flow of conversation quite literally.

For this final assignment, I created an opportunity to consider Computational Typography in the context of multi-user interaction. Building off of my recent flocking sketch with the ha has, I incorporated a socket server to receive input from any number of connected clients. Text messages spawn at the center of the screen and then move around according to algorithmic rules modeled on animal behavior (as first laid out by Craig Reynolds here and later programmed by Daniel Shiffman as seen here).

Visualizing words as flocking/herding/schooling together matches my mental model of what happens when spoken words leave our lips: they stay with us and with each other in some capacity to inform the context of the present moment and our word choices. Over time, perhaps their initial weights diminish and they linger on the periphery.

I spent some time learning the computation of flocking behavior. The material agents, whether they be the original boids or my current woids, follow three rules: cohesion (find your neighbors within a given radius), separation (but don’t run into them), and alignment (move in the same direction as them). Playing with the global weights of each of these impacted how the woids in my chat room behaved. Too much separation and the woids avoided each other at all costs. Too much cohesion and they clustered together into a tight wad that greatly reduced legibility. In the end I adjusted the parameters to ensure balanced flocking tendencies. Isn’t it nice to picture a flowy trail of words emanating from a friendly chat?

The chat room was well-received during some brief playtesting on the floor. My guests enjoyed the disruption to the normal text/chat space, especially seeing prior words swing back into view. A useful suggestion was to incorporate some visual modification to the text to indicate when words entered into the stream. Otherwise it became increasingly (or even more) challenging to read and respond. I decided to reduce the font size of the woids over time to give priority to newer additions to the conversation and also to mirror my image of how they distance themselves yet continue to hover around conversation-goers.

My understanding is the this flocking code only accounts for acceleration and force (they equal each other here) but not the mass of the woids. I’d play with this in future iterations (and learn physics again!), perhaps assigning a mass to each agent according to the character count of the submitted strings. In addition, I’d play with assigning chat room users different weights for separation, alignment, cohesion, as well as their own parameters for acceleration and velocity. I’m curious how it would impact the conversation dynamics if some texts stayed aloof or others lagged behind.

More than anything, I love this idea that our words stay nearby but take on a life of their own after they leave us.

While the room is still deployed, chat here!


Week 13: More Moving Type

Immediately after class I spent some time with the referenced works. A few stayed with me over the week:

  • The flying letters and words from Jörg Piringer’s abcdefghijklmnopqrstuvwxyz and the opening titles of Barbarella

  • The clever way Ana Maria Uribe uses the shapes of letters as material for animated pictorial compositions/concrete poetry in her Anipoemas

I created these sketches in response:


The word, pop, is an onomatopoeia. It phonetically reminds us of the actual sound it describes. But not necessarily in how it is read. This sketch is an attempt to address and consider the idea that how we read something is also tied to its meaning. How successful is it for you? I’m curious about our instinct to connect and create relationships between anything in front of us—whether that is letters, words, a sequence of photographs, people, etc. The GIF here reduces the animation rate a bit, which I think works wells for this size. For a piece like this it’s worth playing attention to letter density and overall canvas size. Code


Playing with another onomatopoeia, ha ha. Shiffman’s flocking sketch was a quick way to test a mass of moving letters and/or words on the screen, and in this case, as part of simulated flocking behavior. The only user input is dragging the mouse to create more has. This particular form of interaction does not relate to nor enhance the meaning of the piece. However, I’d argue that laughter is contagious and comes in waves within a crowd and this reminds me of that. Code


Intrigued by how Oren converted glyph paths into polygons last week, I played around with his code and modified it such that the vertices of each letter disappear over time. The GIF above is a high speed version. Ideally this happens so slowly that you barely notice. At what point do you realize that it’s different? In general I’m curious about perception of incremental change over time. Code

Final Project Idea: To elaborate on movable type to create concrete poems from letterforms and/or words. I have this vague idea of creating objects from individuals letters, words, or the geometric forms of letter shapes to push around the page and break free of traditional left-to-right display along horizontal lines. But oh geez, how will this be different from a refrigerator of word magnets? Ideally, the method of interaction connects to the meaning of the work and does not remind people of refrigerators nor magnets.

Week 12: Fonts as Data

Screen Shot 2018-11-27 at 8.34.43 PM.png

It took awhile to wrap my head around the structure of font data this week. I spent a lot of time noodling around with the examples and re-reading the tutorial. I also read up on curves and vertices in the P5 Reference, and hey, I really like how those bezier tangents look!

Breaking down the example code piece by piece helped me with the head wrapping. I learned that after loading the font into a sketch, the opentype.js library parses information about how to draw each letterform. Imagine an invisible pen drawing the outline of a letter in one continuous motion. The information parsed with opentype, gives you all the instructions that pen moves from point to point in order to complete the letter. The path that the pens travels can be straight or curved.

The instructions or commands to draw the entire path of a letter consists of many objects of information, and there are five types of objects:

  • the pen’s starting location, represented with a pair of x and y coordinates (labeled with a M)

  • two pairs of x and y coordinates through which to draw a line (L)

  • coordinates to draw a bezier curve (C) - for OpenType fonts (.otf)

  • coordinates to draw quadratic curve (Q) - for TrueType fonts (.ttf)

  • finally, the starting location to close the path (Z)

With this understood, I had least two options at my disposal for this week’s exercise. First, I could mess with the global data points of a font. For instance, I could add the same amount to the x coordinates for all L-type objects. Or, I could adjust the elements in each L-type object differently. I played the first option for both examples below.

Example 1 Because I was so fond of the bezier tangents, I decided to incorporate them and was quite pleased with the results (especially after many disappointing runs with other approaches).

Of note, the size of the font and the number of points from which to draw tangents impact the final look, as well as the order of the points in the methods. Even though this only alters curved paths, I find it balances the untouched straight lines in the over composition.

This is how I feel at the beginning of the semester: fresh, bright, and ready to dive in:

Screen Shot 2018-11-27 at 7.35.27 PM.png

But towards the end, sleep-deprived but still driven, my edges spaz out:

Screen Shot 2018-11-27 at 7.32.23 PM.png

See the code and try it here.

Example 2 Reading the code I noticed that following each object-type command, the x and y position are “reset” to set the starting point for the next instruction. Curious what would happen if I removed those, I found a wonderful surprise: individual glyphs with a balance of curved and straight lines. Asemic for sure!

See the code and try it here.

Screen Shot 2018-11-27 at 8.25.32 PM.png
Screen Shot 2018-11-27 at 8.25.55 PM.png
Screen Shot 2018-11-27 at 8.30.22 PM.png