interactive type: 空/bloom/NO
Creating three interactive posters with three different words, exploring how typography and the visuals of a word can inform. Uses p5.js textToPoints() function to get the oulines of the letterforms.
空(kong)(Chinese): empty, hollow, void, vacant, unoccupied
The ouline disappears after 5 seconds, leaving a blank canvas. Scrolling over the text area will reveal and expand the outline to form an empty circle. Moving mouse away closes the circle and fades text again.
bloom(verb): to blossom, open out
Clicking on an individual letter "blooms" or expands it to a flower-like shape. Clicking again reverts it. The number and placement of the background decorations (flowers and grass) are generated randomly every new run.
NO: a denial, going against
Scrolling over fractures and repels the text outline from the mouse position. Outlines automatically revert after mouse leaves. Clicking on a letter morphs it into an "x" shape.
Ideation & Iteration
The three words I initially decided on were "空"(empty), "shy", and "bloom". More than anything, I wanted to encorporate Chinese into this project, after missing the chance to with
Itchy
from the previous semester. Thinking about how I could use textToPoints() to transform I came up with "bloom", and I tried to be more obvious in encorporating my own personality through choosing "shy".
After iterating on what I could do with these three words, it became clear that my ideas for "空" and for "shy" were a bit too similar, so I needed to change one. The third iteration of "shy" with the fracturing and cursor-avoidance inspired a stronger tone and led me to change the word to "NO". In my prototypes I replaced the Chinese character with the letter 'm' as I had yet to find a Chinese OTF font of a small enough file size to upload.
Prototypes:
Reflection
It was nice to get into the details of using textToPoints() as I had just played a bit with it on my own (last semseter). And I finally got to encorporate Chinese which was fun. By having three different words to play with, I was able to explore a lot of different methods of working; in the first two words I had a set direction and vision of what I wanted, but with the third I kind of let the project itself and direct me.