Manipulating type

Design Process

Move mouse to change shape, click to change color.

With this project I wanted to try and indulge my fascination with typography by manipulating letters. Initially I wanted to get a condensed type and see if I can stretch it to resemble an expanded form. I started with painstakingly drawing out an ‘a’, then expanding and condensing it using mouseX and mouse Y but that seemed a bit lacking. Second I tried to see if I can get the ‘a’ to expand to a capital ‘A’. In programs like adobe illustrator and After effects there an option of turning text/shapes into points and I wanted to see how that would work in p5.js. I found a few tutorials, including one from xin which was extremely helpful. However when morphing from lower case to upper case A I was having issues with the steps and it didn’t look like the cohesive transformation I wanted. I sketched out the steps in illustrator using blend but did not take into account the amount on control I had in Illustrator. I don’t think I am there yet with this particular program. I then wanted to take a step back and use the expand and contract but with a twist since the first version wasn’t that interesting. I blew up the lower case a in the middle of the page and changed it to an expanded font to give it a body that can take full advantage of type to point. I tried variations of all the primitive shapes but decided to go with the rectangle as that gave it an architectural quality when stretched. I spent a good amount of time playing around with the shape with blending modes, duplicates etc but decided to simplify it since those just muddied the result which I was very fond of. The end result is an ‘a’ when the mouse hovers in the middle but streches/follows the mouse pointer in all directions. Initially i only stretched to +x and +y directions but extending it towards the -ive directions added a layer of complexity and variations.

tutorial sources Intro to textToPoints-XIN.

Reflection

It was pleasant surprised to see the final shapes built from a single letter be flexible and abstract. It takes on Escher style illusion mixed with 3d typographical models of Igarashi. It’s interesting to see type in a way that we aren’t used to seeing. There has been many variations done on this idea and I am always surprised to see new versions. I am especially fond of the models produced from mouse positions approx at (210, 390), (100,250), (380,300) (170,70). To tie in to the bigger picture it is great to have the output of a machine to give us perspective. There is a viewspoint towards humans plugging in algorithm and hence the output is directly human but there are plenty of a cases where the output is unexpected and we can work backwards to figure it out. In other words, we are constantly learning from each other.