Since last week I wasn’t able to explore the butterfly inspiration I got from teamLab, I decided to take the chance to do it in this assignment. Once again, I wasn’t able to produce what I initially imagined, but it still turned out to be fun to interact with and look at. The final product reminds me of molecules moving around. The references I used for this assignment are:
- Particles – attractedTo
- Particles – repelledFrom
- Butterfly Generator by TheCodingTrain
While the final code doesn’t use TheCodingTrain’s code for the butterfly, I did take inspiration from it in my first draft.
PROCESS
I initially started with the Butterfly Generator sketch from TheCodingTrain. I tried to alter the code to include vectors so I could have vector math as well, but it didn’t work because I was creating the butterfly by using polar coordinates and vertices. If I tried to replace x and y with a vector, the butterfly would just stay in the corner (or in the center if I translated it). So while I really wanted to include this visual along with movements, I just couldn’t figure out how to make the butterfly’s position into a vector.
Instead of going from butterfly to movement, I decided to simply everything and start with just an ellipse. Of course, I should’ve started simple first because once you complicate things it is hard to debug and see where the code isn’t working. By just having an ellipse, I was able to experiment with the movement, such as attracting, repelling, and force. At this point I was still determined to keep the butterfly idea. My initial plan was to have the butterflies spawn and be attracted to the mouse, but when you press the mouse, it will be repelled. The final result ended up being the opposite because this is what happens if I had attraction to the mouse:
The code for attraction and repulsion is very similar to the one from the examples. The difference is that the mult value is very small in order to have a slower movement.
For the spawning of the “butterflies,” I decided that once it is at the edge of the canvas, remove that one object and spawn a new one in the center. Since I am removing objects from the array, the for loop had to decrement instead of increment in the case of if there was no object left in the array.
After figuring out the movement of the “butterfly,” I tried to once again create the look but without using the code from TheCodingTrain. I used a nested loop to create the 2×2 overlapped ellipses. I wanted to add noise and the flapping animation, but it didn’t work out. While it doesn’t really look like a butterfly anymore, it reminded me of molecules or cells at work, hence the title of my assignment.
REFLECTION
The main takeaway for this assignment is to start simple and then add more complex functions and movements. Also, don’t dwell on one concept and it always changes from the initial plan. I spent a lot of time trying to getting the butterfly to move the way I wanted instead of working more on the movements and interactions. So if I were to do this again, I would definitely start with a simple shape, because that’s easier for debugging as well.