• Elvin Ou

Attempt to animate 2

Updated: Oct 3, 2018

https://editor.p5js.org/full/rJ-Ks9Ltm

For this assignment, I wanted to move further from what I did last week. I had some really cool visuals in my head that I eventually just couldn't execute it out at all, but still I have learned lots of new stuff during the process.

I started with a really ambitious visual that I wanted to create. It was a very complex animation with multiple (like a lot) functions that I have not known before, so I tried to break it down into smaller segments of different functions that are needed to complete the graphic I had in mind.

The struggle was real... I could barely program out some of the things on the list even after lots of research and looking up references and testings. However, it was awesome that I did find out and learned some unexpected functions through testing and they are used for the animation I eventually created.

After failing in creating the ambitious visual I had in mind, I started to explore what I learned through process and tested them out to see if I can create something similar or interesting.

The process was again breaking the ideas down into a list of functions needed to program and then combine all together as a complete image. I spent a huge amount of time just trying to deal with circle since I failed doing so for my last animation. The struggle is real again, I was trying to figure out how to constrain an object within an ellipse boundary, or how to use if statement to make the mouseIsPressed do different tasks in and out of the circle.

Eventually the animation is combine with the ideas as followed:


-A self rotating ellipse that follows a given ellipse as a track and when the mouse is clicked the ellipse reverse the direction.

-A set of ellipse that travels on a given ellipse with random values for the location.

-A set of ellipses that interact with the mouse creating a random pattern when the mouse moves, and also create a "#" frame constantly changing its sizes according to where the mouse pauses.

-A circle that will pop out when the mouse is pressed is "constrained" with the former constantly changing "#" frame.

-An erase when the mouse reaches out of the major ellipse.


After that I met up with Billy and started to talk about some of our ideas of creating a new animation together. It was really fun trying to figure out stuff together and failing together lol.

We spent hours trying figure the math hour and just ended up being really frustrating...