空/BLOOM/NO: INTERACTIVE TYPE
2021
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
→ link to code
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
→ link to code
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
→ link to code
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: