itchy

Moving Poster

An animated poster embodying a single word or phrase.

I chose the word "itchy", and tried to portray the imprecise, areal, urgency of an itchy spot. The drawing oscillates between the scattered and in-line states every three seconds.
→ link to code

Design Process

I had some trouble coming up with emotive words. I wanted to maybe do something personal, something that I could realate to, or something that gives off similar vibes as I do, but all vocabulary that I usually associate with myself are quite passive or not very visually emotive. I also wanted to possibly do something non-English, meaning Chinese, but I decided against it as Chinese is my second language (English is my first) and I didn't think I could do my chosen Chinese word justice if I did go for it, and I couldn't really come up with anything meaningful anyways.
I eventually decided on "itchy", and I have no other reason than because it just felt right and I had an idea immediately afterwards.

I used the textToPoint() function in p5js to draw the outline of the text with dots. I was debating between the typefaces Aurora and Dephunked BRK. The second seemed to work best with the textToPoint() to achieve the look I wanted: I couldnt figure out a succint method to fill in the outlines so the fuzzy edges of Dephunked helped add more weight instead.
I used setInterval to set the oscillations. The dots in the letters are offset by a random value between -20 and 20 in the scattered state and between -3 and 3 in the in-line state to create the small vibrations.
The background is supposed to mimic some kind of skin texture, kind of. I added a lot of red dots and tiny white linse in random positions to compliment the text texture and create more of the itchy tingly sensation. I couldn't figure out how to get those background textures to stop redrawing AND have the text not draw over itself, so I just reduced the frame rate, allowing the background to keep redrawing but at a much slower and less sporadic pace There is a mole though that maintains its position, a random position determined during setup.

Reflection

It was really fun to inspect and analyze emotions that could be conjured by a single word or phrase, and in my case, the word "itchy".
I didn't really get to use the sin() and cos() functions, which is a bit regrettable, but I could not come up with any way to include them and not completely disrupt my existing concept.

Credits

This project uses the free font Dephunked BRK from dafont.com by Ænigma.
Code reference for p5js textToPoints() came from this steering behaviors video by The Coding Train.