ITCHY
2020
An animted and an interactive poster embodying the emotion or experience of a word or phrase.
Version 1: Moving Poster
An animated poster embodying the word "itchy", portraying the imprecise, areal, urgency of an itchy spot.
(runs best when only one poster on screen at a time)
→ link to code
The drawing oscillates between the scattered and in-line states every three seconds.
Version 2: Interactive Poster
An interactive and mobile compatible iteration of the moving poster, adding "scratching" interaction.
(runs best when only one poster on screen at a time)
→ link to code
Mouse press or touch repels the dots/particles that make up the text.
Ideation
I debated a lot between choosing a Chinese or English word. I really could not come up with anything exciting or emotive enough in either language. Staring at my hands, I just decided to go with "itchy".
With "itchy" I knew I wanted to do something like a rash on skin texture, but not realistic enough to be gross. I had found
this
Coding Train video on steering behaviors and wanted to encorporate that as well.
Fabrication
I used the p5.js textToPoints() function to draw the outlines of the letters with circles. I was deciding between the font
Aurora and
Dephunked BRK
but went with the latter as it seemed to work best with textToPoints() to achieve more blobby and substantial letterforms.
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 was made to sort of mimic skin texture. I added red dots and white lines at random positions to compliment the letters and to evoke more of an itchy tingly sensation. I initially did not plan for the background to also be animated, but I wasn't able to figure out how to keep it static AND have the text not draw over itself. I reduced the frame rate so the background refresh wouldn't be so sporadic and distracting. There is a mole though that maintains it's position, randomly determined during setup.
The second version was actually a separate assignment, following the moving poster, to specifically add mobile-compatible interactivity to it. And so interactivity was added by turning the circles into vehicles and applying steering behaviors. The interactive version is almost entirely the same as the first version, just with this interaction instead of timed oscillation. With the frame rate also being reduced, the animation is also a bit slowed, but I think this contributes to the idea of an itch that can never be satisfied. The steering behaviors that return the letterforms points to this as well.
steering behaviors test, click and hold to scatter dots:
→ link to code