Ideation
The picture below was the one that brings me inspiration:
In the picture, the butterflies are the main subject. The distance between the flying butterflies can be far and close in a sudden, which can be the variable to plug the maximum/minimum values into random. At the same time, flying butterflies can also bring some interactions with the human. The setting in my mind is that in a twilight afternoon, butterflies flying around with the rose. In order to make this simulation, people can use a mouse to interact with butterflies. The place where the mouse is pointing is exactly where the butterflies will appear. To make this simulation more realistic, the butterfly's flying function will use random values.
Sketches
Design Process
- 1, Butterfly
- 2, Flying
- 3, Interaction
- 4, Background
The three butterflies are made by lines, curves, and ellipses. The points on the butterfly used the random() function, so the color can change on a timely base.
In terms of keeping the randomness of how butterfly flies, I added the preset distance values between butterflies in the code. In this way, two butterflies' flightpaths are co-related. At the same time, the butterfly and the mouse are also related. The position of the mouse and the starting point of the butterfly is also preset.
There are two main interactions in] this project. 1) The interaction between the mouse position and the butterflies. The butterflies will appear where the mouse has pointed. 2) The interaction between the butterfly's flying speed and the mouse click. When the mouse clicks on the screen, the speed of the butterfly will slow down.
In my imagination, the set will be in the dusk, the butterflies flying around with the rose. Since I am not really good at p5.js, the background was imported. I made the draw by using "Pixilart.
Reflection
There is one thing in the project that I am not very satisfied with, the color of the butterflies. In the beginning, I was thinking of set three different colors for the three butterflies: purple, yellow, and blue. However, when doing it, I was not able to set the color from them one by one. Thus, I made them all blue. Anyhow, I hope I can learn more about the color setting in the next project.