This project involved an image that can change with a simple mouse click using P5Js.
Creating with PJ5s enabled me to produce an interactive experience for web users to brighten their day with a mouse click. By transitioning from a gloomy and embarrassed cloud to a happy one, I wanted to make a user experience a moment of joy after a day of work.
FINAL OUTCOME
PROCESS
First attempt
My first attempt was using P5JS to construct two circles. In the morning workshop, I understood how the editor worked, used basic shapes, and experimented with stroke weights to give the circles some character.
Sketches for my idea
I decided to go with sketch #2 because it was simple and cute. This will make the transition from a gloomy cloud to a joyful one effective.
VISUAL RESEARCH
MINISO Sushi Cat Plush Toy and Ghost Cushion
As a purchaser of MINISO's plushies, I was inspired by the plushies' endearing nature and noted what makes something appeals cute to people. I decided to incorporate the circular shape of the eyes and the small gentle smile for my creative code because these elements appear adorable to me.
Cloud and Happy Cloud (2019)
Cloud and Happy Cloud (2019) by Kalypso Illustrations portrays a happy cloud with raindrops and a calm cloud. The shape of the clouds and the simple transition of the facial expression of the clouds assisted with my visual style when making my creative code.
Unhidden and Hidden Frog (2022)
Unhidden and Hidden Frog (2022) dric creates a sense of mood through the facial expression of the frog and the transition from the frog being unhidden to hidden. Influenced by the stroke weight and change, I sought to make my creative code stand out on a blank background by incorporating an adorable character.
Angry Cloud gif
Angry Cloud by Vincent Mokuenko depicts the transition from a joyful cloud to an angry cloud through the simple facial expression, colour, and lighting strike. The similar shape of the clouds and the additional lighting strike inspired me as it was simple and effective, expressing the transition between emotions.
REFERENCES
Dric. (2022). Unhidden and Hidden Frog [Illustration]. Instagram. https://www.instagram.com/p/CYaezrtv6vt/
Kalypso Illustrations. (2019). Cloud [Illustration]. Instagram. https://www.instagram.com/p/B0i-rFRCpM2/
Kalypso Illustrations. (2019). Happy Cloud [Illustration ]. Instagram. https://www.instagram.com/p/B4ztG6zilP1/
MINISO. (n.d.). Ghost Cushion [Cushion]. MINISO. https://www.miniso-au.com/en-au/product/152579/ghost-cushion
MINISO. (n.d.). Sushi Cat Plush Toy (Salmon) [Toy]. MINISO. https://www.miniso-au.com/en-au/product/68250/sushi-cat-plush-toy-salmon
Mokuenko, V. (n.d.). Angry Cloud [gif]. Dribble. https://dribbble.com/shots/3859143-Angry-Cloud?utm_source=Pinterest_Shot&utm_campaign=VMokuenko&utm_content=Angry+Cloud&utm_medium=Social_Share
