Processing

Arutro told me about a really interesting program that is worth exploring, especially if you have any interest or background in programming and computer science. The site describes the program as: "Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology." Basically it is a program that allows you to create art, motion graphics, among hundreds of other applications. The site contains a variety of examples of some of the basic uses. This is one that changes the hue as you drag your mouse across it. Below, you are given the code that makes it work, and it is often surprising how simple the basic stuff is. The language is based on java so if you are good with that program you should feel right at home. Download the program and try entering and tweaking some of the sample code if you are interested. It is a really cool concept and the possibilities are endless. Here are some exhibition examples of work people have done.

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.