Help with Expressions

So while I've been becoming more comfortable with After Effects, one aspect that just doesn't seem to come easy to me is the adding of expressions and their outcomes. Maybe because I have no experience with coding or I'm just not familiar with them yet setting a "wiggle" expression is about all I can do. So after watching some youtube videos and searching out links, the adobe site helped me the most. I will definitely be bookmarking that site for later use.

Adobe has many other pages that will not doubt help as our projects become more and more complex, including pages about techniques and new features, just to name a few.

One video I enjoyed watching is about the wiggle expression and a lot of fine details about what it can do.

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:

The [Computer] Science of the Transition

Everyone appreciates a good transition. Even the simplest of transitions, be it a fade or a slide, can add a lot a composition. As simple as a fade is, it takes a fair amount of background action to get it to do what is intended.

Any transition from image to image requires a few basic things. Each pixel of Image 1 has to be iterated through and replaced by each pixel of Image 2. This is accomplished using a bunch of nested for loops. The cool stuff, like fades, twirls, and slides, happen within these for loops. While the transition is happening, the place of the pixel is being messed with and math’d with. 

           

      

            for(int sx = 0; sx < width; sx++){

                       for(int sy = 0; sy < height; sy++){

                             double dx = sx - x0;

                             double dy = sy - y0;

                             double r = Math.sqrt(dx*dx + dy*dy);

                             double angle = Math.PI / 256 * r;

                             int tx = (int) (+dx * Math.cos(angle) - dy * Math.sin(angle) + x0);

                             int ty = (int) (+dx * Math.sin(angle) + dy * Math.cos(angle) + y0);

...

Transitions like these don't take a lot of code to make, but can make a big impact. An image transition in Java can be written in just a few lines. As long as the pixels end up in the proper position at the end, you’ve got yourself a transition.

Open Processing

While searching for Processing ideas, I came across this website called openprocessing.org. It is a website where you can share your processing sketches with the community. By browsing through the collection of sketches you find not only the finished product but the source code that created it. This is a great tool because if you find a sketch that you find interesting you can see the code and try to decipher it. You can also create workshops or classrooms within openprocessing to teach people and share knowledge. There are also collections of work, separated into genres like particles or geometry. The site is very easy to navigate and it's really cool to browse through the projects. Many of them are extremely complicated and I couldn't make any sense of the source code but maybe we will all be able to in the near future!

fun and mindless

Here is a link to the random music generator I was playing with in class. Such a fun and mindless toy, I could play with it for hours. If you're looking to kill some time this link will take you to the page where I found "Ball Droppings". It showcases what their making with Processing.js. The program looks like a mash-up of processing and java. Yeah, nobody really wants to play with code and set parameters, well at least I rarely do, but we all love a little distraction.