Category: Week 3 – Animation

The animation sketch was fun and it allowed me to explore the different coding principles and processing syntax we have learned so far. For this animation, I was trying to make it so that there was an acceleration effect on the balls. I did this by using some of the physics principles tied to wave. Additionally, using trigonometry, I was able to make it so all the balls meet in the middle. Playing with the mouse pressed function was also a great experience. As of now, I look forward to working with Object Oriented Programming to divide any future program into different objects and classes and just take more control of the program as a whole.

https://www.openprocessing.org/sketch/509935

For my animation assignment, I tried to explore the animation law of “squash and stretch”. To do this I decided to pay homage to one of my favourite shows growing up, “Dragon Ball Z”. In the show, the main character “Goku” has a signature move called a Kamehameha where a blue burst of chi energy is fired from his outstretched hands. I wanted to emulate the same movement using a similar code to last week’s “bouncing ball against the wall”, but tweaking it so the object can expand as it moves. Additionally, I used a 3d Sphere rather than an ellipse to experiment more with 3d objects in Processing.

Sketch: https://www.openprocessing.org/sketch/510129

For this project I wanted to create everything myself, without using any of the same code we used in class or trying to make anything similar to what we did in class. The principles of animation/life that I wanted to show were squash and stretch and timing. What I ended up creating was an animation of a ball bouncing from the left side of the screen to the right.

I actually struggled a lot with this project. My code was not very object oriented and I feel that I didn’t go about creating the layout in the best way.

I decided to correlate the xPosition of the ball with frameCount, which I figured was a good idea since in physics, by the laws of projectile motion, the velocity in the x Direction shouldn’t really change unless something acts upon it. However I made the decision to also connect the Y-Velocity to frameCount, thinking only of the first stage of the drop, where the velocity needs to pick up as the force of gravity acts upon it.

I decided to break up the animation into 3 stages: 1) the ball drops, 2)while on the ground, the ball experiences vertical compression and a horizontal stretch as it bounces, 3) the ball bounces back up into the air and out of the frame.

The flaws to this approach, at least in my execution was a disregard for later stages when focusing on the current stage, resulting in inconsiderate variable creation and design (i.e. yVelocity being directly correlated to frameCount). Because yVel is in direct correlation to frameCount, the ball exhibits this strange behavior where it bounces and leaves the ground with much more speed than it hit the ground with, as if charged with energy while on the ground.

Some areas for improvement on this project would be making it repeatable (not only executing once, but the animation restarting after completing the bounce), adding more bounces that are progressively lower, and fixing the velocities to mimic reality more closely. It would also be really cool to see this in 3D!

You can see the project here.

For my animation, I tried to make a spinning object move on a sine curve while speeding up and slowing down depending on where it was on the curve. I also wanted to have the shape of the spinning object deform as it sped up, and go back to normal as it slowed down. I was having a tough time trying to get the spinning object to change its shape once it hit a certain y coordinate. I just couldn’t figure out how to have the shape gradually deform, or o have the speed gradually fluctuate. I’m still having a hard time putting everything we learned into practice.

https://www.openprocessing.org/sketch/509976

For this assignment, I tried to emulate the squash and stretch from the video that we watched in class. It was manageable to figure out how to make the rectangle bounce off at a specific y-coordinate since it was similar to what we worked on in class, except for the fact that I had to find a way to slow down the drop speed after every bounce. I had no idea how to animate a stretch and squash, so initially, I came up with a very choppy animation, in which when the rectangle is ascending, the object would abruptly change its height. However, after playing around with different incrementation operations, I somehow managed to make something more natural. The animation would have been more dynamic if I was able to find a way to change the speed of incrementation. Also, I could not figure out how to stop the bouncing.

https://www.openprocessing.org/sketch/509963

I chose to make a square block that seems to be rolling and is it rolls it gets bigger. The main difficulty I had with it was trying to get it to rotate and getting the 3d shape. Once I figured that out it wasn’t too difficult asides from the fact that I can’t figure out how to make the box roll in the middle always now it starts off rolling near the top and as it gets bigger goes to the bottom. My animation follows the following rules from the illusion of life. It follows #6 slow in and slows out if you analyze in the middle it becomes a square shape and you cant see its 3d nature. You can then see it again when it is slowly coming in and slowly leaving. It does follow # 7 arc as its rotation does cause it to go in a circular movement. Please see my animation in the link below, thank you.

https://www.openprocessing.org/sketch/509956

For my animation, I wanted to use realistic physics based on knowledge I learned taking my physics class, so I created an arc.  At first, I used frameCount and frameRate to incorporate them into the equations, but it wasn’t working right. The ball’s movement was highly irregular and bounced back and forth quickly, and I learned that that was because the frameRate is not constant. I then realized I could simply create a new variable called time and change the “Time” manually by using increments.  It was definitely confusing visualizing these equations this way, but It was fine after some time experimenting. One thing I had trouble with was having the “cannon” look more like a cannon by using a rotated rectangle jutting out of the sphere. For the life of me I could not understand why the rotate was not working the way I wanted to. So I simply left it as a circle.

For my animation assignment, I decided to make a ball drop. In order to do this, I decided to take what we learned before and apply it. I made my ball drop with almost like a shadow behind it- to make the drop look more realistic. When we see things drop in real life, we do not see the objects as it is while it is dropping. We usually see a fast blur, and that is what I tried to do with my code. I also made the ball bounce, like how it would in real life.
This is the squash and stretch principle from the video, especially the stretch.

I think I could’ve made my ball bounce few more times for more of a realistic animation, but that became a challenge to me. I couldn’t really figure out in time how to make the ball bounce multiple times, so I stayed with one. Having only one bounce makes the animation more timid and unnatural.

https://www.openprocessing.org/sketch/509951

The idea was to emulate the infinite road illusion with code. First I tried making an array of lines with varying stroke weight to get a reference for how the code would look without animation in place. I then tried to replicate the image using a for loop and line function which for the life of me I could not get to work due to its tendency to just fill the space made . I then also wanted to vary the horizon details a bit so I used a bezier function instead to create a bit more random behavior. The hardest part from there was aligning the overlapping curves to make straight lines so it became a trial and error game with inputting numbers but in the end I got a result similar to what I wanted.

In this animation sketch, I attempted to apply the principles of solid animation by incorporating a “weight” aspect to an object. And so, the ball in my sketch bounces until gravity makes it stops bouncing. I knew from the outset that I would be exclusively manipulating the y variable, but I had some trouble understanding the “gravity” element of the sketch. I looked up some tutorials on Youtube/Processing site about manipulating object speed, and used our class notes to finally understand how to get the ball to eventually stop. For example, at times the ball would stick to the end of the screen/sketch’s floor, and it was due to miscalculating positive/negative direction, which was similar to the problem we encountered in a class exercise last week.

Link to sketch: https://www.openprocessing.org/sketch/509885