Down Up

Live link

The assignment for this week was to manipulate font forms computationally, specifically we looked at the opentype.js library. This javascript library “allows you to acces the letterforms of texts from the browser.” I used this library in conjuction with P5JS for this project.

Although it was two weeks since the last class session, I didn’t have much time to allocate on this assignment because of the Thanksgiving holidays. So I went with the first idea that I had which was to morph text.

I was feeling the holiday blues since I wasn’t able to make it home to California and since I have moved to New York City a few months ago I have had a lot of ups and downs. And since they are two opposite words I thought it could be interesting to have them morph into one another.

Challenges that I faced was that since they were of different lengths I had to resolve adding and removing points. To solve it I made 4 paths. Two were the control paths which did not change while the other two push and popped commands as needed.

Secondly, and one that is not fully resolved, I wanted to animate the morph. However, fonts are so precise their locations defined to the nanopixel (I think). Whatever the case is, I was moving each coordinate position 0.1 positions for each loop if the position was > || < the corresponding command. This animated at a good speed, but it very imprecise. This resulted in some lines not displaying correctly (or not at all), but I compromised with this because using a more accurate increment made it unbearably slow to morph. I guess I could look at better strategies to approach this problem. I also wanted to make it infinitely animate back and forth, but I didn’t get to it either. Next time.

Video here:

code here: github