TextWarp is a typographic experiment where each letter is distorted inside a warped quad where it's all still in vector space.
View process
Before I started with distorting type I began with creating a QuadLayout class using one of my previously made algorithms for slicing polygons. I created a system where a rectangular polygon gets sliced by horizontal and vertical lines where it's important that the slicing lines in one direction don't touch each other, otherwise you'll end up with some triangles instead of quads.
What happens if you add some randomness in the choice of slicing?
I created a 'WarpableText' class that normalises the path of a string or character to its bounding box, which is a rectangle, which is a quad. Then I applied the quads from the QuadLayout to the WarpableText's and recalculated the type shape points. So right now we have warped type!
Looking at the previous iterations you can spot some problems with characters that have holes. To fix this I get the text paths with opentype.js and normalise the path instead of using the p5.js's textToPoints() method. I also created a fine quality art print of it 🙂
Added a textMode that lets me switch between warping individual characters or entire words to a quad. Warping whole words works better for longer text inputs, so to test it out, I used a couple of my favorite quotes from Picasso and Warhol. Can you tell which one’s which?
And aswell see how this looks when it's in motion. Also really happy with how my new export setup is working — animations like this used to take a while to prepare, mostly because I don’t add motion that often to my experiments.
For collaborations, custom requests, or general inquiries please feel free to reach out via: contact@misha.studio or one of my socials.
