Thursday, September 3, 2015

AE vs Program (Bouncing Ball Edition)

The presets in After Effects are absolute life savers. Having objects created that already have attributes or parameters set that you just get to edit is why After Effects is such an amazing program to use. One of our first exercises was to make a ball bounce using this program. I was interested in what it would take to code a bouncing ball using Java and a drawing library. I recalled doing an exercise like this in my early programming classes and decided to revisit it. I chose to analyze the different elements that After Effects automates or makes much easier when creating a project by doing a compare contrast exercise.

  1. Choosing a project parameters.
    1. In AE you pick a resolution or dimension of the project as well as the color settings and many other details. AE has most common settings stored as presets.
    2. In my Java project I am limited in formats and can only set the window dimensions and scale of my animation. [I chose default dimensions and scale of -1 to 1 in x and y directions]
  2. Creating objects.
    1. In AE you can create a new layer that can easily become any shape or color with a mask or effect, in this case a bouncing ball. Layers can have as many parameters as you can imagine customizing.
    2. I made three circles or balls for the bouncing ball program. The three circles had their data stored in five arrays. Four of the arrays were double arrays and the fifth was an array of color.
      Arrays and values created for Bouncing Ball Java Project.
  3. Make the thing bounce.
    1. In AE there are countless ways to give a layer motion. The simplest way is to keyframe the desired motion and loop it with an expression [loopOut(“cycle”,0)]. In this case there is not a lot of physical accuracy to the motion. The movement looks fake to the eye. To remedy this, we use motion blur and make the key frames ease in or ease out so that the ball slows as it reaches its maximum height and speeds up as it approaches the ground. These effects work very well but it does not give the editor a world space to work in. What I mean by that is that there is not a gravity or velocity that the editor can easily alter. This feature can be found in presets like CC Particle World. This preset creates a 3D world space in which the editor can manipulate particles. But for the simple purpose of the bouncing ball motion blur and eased keyframes will do the trick.
    2. Some very quick math (truly just arithmetic) gives us updated velocities and positions for our balls for any given timestep. The physics is very simple and thus easy to manipulate. By changing the value of ay to .005 instead of -.005 I can make the balls look like they are floating in a room like helium balloons.
      For Loop that updates velocities and positions and
      if statements that make balls bounce off of walls.
  4. Rendering/Making animation appear
    1. Add to render queue. Open rendered file. Hit play.
    2. I took the For Loop that iterates through our array of balls and put it inside an infinite While Loop (Learn more about loops HERE). This way the balls will bounce continuously until gravity eventually pulls them to rest. I draw the three circles at the three initial positions. After every update of velocity and position I redraw the white background of the movie frame. If I did not redraw the background then there would be a trail following each ball as it bounced around the screen. After this I draw the three circles a their updated positions and show or pause the image for fifty milliseconds. This way the white background does not flash and give the animation a glitchy look. This is definitely more steps then hitting render!
      Updates inside of infinite While Loop with drawing logic.
      Animation frame rate is one frame per 50 milliseconds.

There is, of course, no argument that an animation would be better hand-coded than made in a professionally made program, but I thought it was an interesting experiment.

Here is the final product of my bouncing ball program:

video

No comments :

Post a Comment