Computational Approaches to Typography


Typographic Awareness

For my final, I combined my finals projects for Live Web and Computational Approaches to Typography. I made slightly different versions for each class, but I would like to combine them into one fully functional Chrome extension in the future. My original idea is here.

Playing with Type

demo gif

I started by writing the code to create the interactions I wanted users to have. Mainly I wanted users to mouse over blocks of text and have it look like it was rippling. Here is a basic overview on how my code works:

  1. Use a Treewalker to get all the text nodes on the page
  2. Loop through all the text nodes, and put each text node into a new charGroup element.
  3. Replace the inner HTML of the charGroup string into individual character elements. If one of the charGroup elements was “word” it would be replace with “<character style=’display:inline-block;>w</character><character style=’display:inline-block;>o</character><character style=’display:inline-block;>r</character><character style=’display:inline-block;>d</character>”.
  4. Then I replace the new charGroup element where the original text node used to be.
    textnodes[i].parentNode.replaceChild(newNode, textnodes[i]);
    
  5. Finally, after it finishes looping through all the text nodes I can manipulate the individual character elements using the animate API and the ‘mousemove’ event listener.

I also used the ambient light sensor to change text opacity and the background color. I think the background color change doesn’t really work that well since the user needs to enable “Generic Sensor Extra Classes” in their Chrome flags. Regardless, I’m glad it worked and I liked this for a first iteration.

All the final code for the Chrome extension is here and you can download it here. Install the extension by going to chrome://extensions and then dragging the file into the browser. Activate the code on any website by click on the extension icon.

Adding more users with Peer.js

demo gif

The site is up here as long as my peer server is still running.

I was able to get Peer.js working within a Chrome extension, but then I had issues with keeping the same peer id as the user went to a new page. I think I needed to use the storage API to permanently store the peer id, but I borrowed a website from Frank De La Cruz at Columbia to show peer.js working for class.

I basically have peer.js sending the mouse and ambient light data as it is received from the other user. Users can choose their own peer id and then call other people whose peer ids they know. I wanted it to be intentional that the other user knows who they are contacting so it’s not totally anonymous and creepy.

All the final code for the web version is here.

I think this was good for a first iteration, but I’m hoping to fully combine the peer.js and chrome extension in the future. I’m also thinking about adding it to my website/blog so you can see if anyone else is also there (:


Opentype Font Experiments

demo gif

Click here to go to project.

I experimented with using font outline data to create some simple reactions to the user. In the second row, the mouse position causes the straight lines in each letter to warp towards the mouse. In the third row, the more you click the more the lines expand away from the curves.

Read more...


Concrete Poetry

demo gif

Click here to go to project.

For this assignment, I was going to try to make concrete poems from the text messages sent between me and my contacts, but it kind of felt a violation of privacy. Anyways, I took a short sentence from Maggie Nelson’s Bluets and added my own take on it. Here’s the snippet from Bluets.

I don’t have blue eyes, unlike the author, so I thought about what it would be like to look at the world through blue eyes. I generated a grid of blue i’s. They’re kind of like bars.

All of the code is available on my github here.


Asemic Writing

demo gif

Click here to go to project.

The asemic writing I created is based on more western languages where it appears to go left to right and has distinct separate words. It is clearly my bias to do something western-looking as someone who is a native English speaker. I was influenced by Vera Molnar’s Lettres de ma mére. Here is one of the pieces in this series.

vera molnar

I liked the layering of different colors and the erratic-ness of the lines. I tried to imitate it by using the random function to continually change the amplitude and angle of a sine wave. I plotted these at varying lengths to create different words and then tried to have it start a new line when it hit the margin of the canvas.

All of the code is available on my github here.


ANSI Terminal Text

demo gif

Click here to go to project.

I liked the visuals of the old school ANSI games, and so I wanted to play with the word “snake” and allow someone to control it using the arrow keys on their keyboard. It’s pretty simple and there’s no game rules. It’s sort of zen and you can just be the snake in the terminal.

All of the code is available on my github here.