INSTRUCTIONS
Mouse press and Key press to see the visual interactions. This animation runs for one minute so wait, till the end. Don't forget to mousepress when the sky goes dark at night.
DESIGN PROCESS
The inspiration to make the animation look aesthetic and natural came into my mind after finishing the human figure first. I wanted to show the viewer, a way of interaction by clicking the mouse, keys, snowfall and see the changes in the expressions of the ginger man with a ginger beard.
1. MAN: I started making the figure of the man, using curveVertex function. The point() function helped all the dots to join and make a curve. I wanted to make the shape resembling to my sketch. It was challenging and time taking to finish the man’s figure. The expressions of the man changes if you drag the mouse left or right. It changes the nose, eyes, moustache, hair, arms of the human. In the cold weather the man has put his hands inside the pocket.
Major Functions used : random () , if, else, if () , second(), keyPressed() , mousePressed(), mouseX, mouseY, point() , curveVertex()
2. BUTTERFLY : I made the butterflies to give the sense of nature, a very chill environment where a man is standing and expressing his feelings. The noise and movement of the butterfly shows that it’s flying in the open air. Giving random colours makes it look beautiful and natural.
Major Functions used : random()
3. ROAD: The road is moving to show the motion. I wanted to move the human itself but it would become complicated, and I didn’t have enough time to experiment it. So I made the rectangles move from left to right. In place of x axis, I have put time and increased it to show the person.
Major Functions used : rect(), time – second(); , pow()
4. SKY : Then I added the background colour which also changed with the in few seconds, with the size of the melting candle. I wanted to show the different blues in the sky, from light blue in day to dark blue and black at night. Added the day, month, time, hour, minute, seconds – at the bottom left so that the viewer can relate and reflect to the one minute animation.
Major Functions used : if else function, seconds, console.log
5. SUN AND MOON : I added the sun which signifies the day time, from dark orangish yellow colour to light yellow and as the day and time passes by, it changes to moon, becomes smaller and smaller ultimately becoming white.
Major Functions used : lerpColor() , map () , second()
6. SNOW : I wanted to add the details, where I added the twinkling stars when mouse is pressed. Stars becomes visible at night, as the sky becomes darker, time passes by showing the stars in few seconds before a minute ends.
Major Functions used : extra canvas- createGraphics() , mousePressed() , if (), randomGaussian()
7. CLOUDS – And lastly, I made clouds which you could see appearing one by one, changing it’s colour one by one from left to right , right to left signifying the heaviness and darkness with shades of dark blue and grey along with the disappearance of daylight. The clouds are also moving along with the time.
Major Functions used : if else , second()
REFLECTION
I really enjoyed working for this project. The abstract figure, looks like a cartoon now. I made up a story of winters, where the person is standing and chilling. The excitement and a happy face shows how he’s able to enjoy and living at the moment. The ginger man, has come out of his house to have a laugh and enjoy the nature full of surprises. The beautiful sun, butterfly, looking at the fading sky and the snow fall at night. The illusion of fast road shows the man standing but the road moving. I wanted to move the hands of the man but I couldn’t figure out how to properly do it with many curveVertex points. I would love to explore more and learn more in terms of coding.
Partners - Yiwen Zhang - recieved MINION'S FEET and Jiayue Gou - recieved FLOWER VASE, My drawing of head - inspiration from renaissance sculptures. I really enjoyed working for this project. The abstract figure, looks like a cartoon now. I made up a story of winters, where the person is standing and chilling. The excitement and a happy face shows how he’s able to enjoy and living at the moment. The ginger man, has come out of his house to have a laugh and enjoy the nature full of surprises. The beautiful sun, butterfly, looking at the fading sky and the snow fall at night. The illusion of fast road shows the man standing but the road moving. I wanted to move the hands of the man but I couldn’t figure out how to properly do it with many curveVertex points. I would love to explore more and learn more in terms of coding.