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:

Expressions

I've been trying to learn more about expressions and writing codes for After Effects. I looked up some tutorials online and I thought that these two were pretty helpful. This site also has other tutorials for after effects on it too if you want to search through it.

http://library.creativecow.net/articles/ebberts_dan/ae6_exp.php

http://library.creativecow.net/articles/mylenium/grid.php

How To Do It

Welcome everyone!. The following project structure is intended to provide you with a methodology to be both specific and help you track the progress and meet your milestones. Since individual projects vary widely some points might not apply. However, you can use it as a roadmap to define/clarify your deliverables and go back to it frequently and methodically.

It has four distinct phases:

DISCOVERY

This phase helps you understand the big picture and the opportunity to achieve the main goals of your project; to take an idea from conception to completion in the most effective manner.

Brainstorming, sketch models, scenarios, analysis and feasibility assessments.

Define the requirements, scope, timeline, budget (your time and resources) and benchmarks for the project.

Requirements of Analysis:

• Prioritize and validate requirements based on quality(1) and strategic factors
• Determine success criteria and metrics
• Define a preliminary list of production requirements.

Synthesis:

• Produce a final document with the discovery result.
• Develop a high-level implementation plan. (storyboard)
• Present a timeline and a budget estimate.

DESIGN

During this phase, create the look and feel of the solution (style). Develop the story requirements, the creative components, the technical design and infrastructure that supports the project.

Creative Design:

• Storyline
• Script
• Storyboard
• Art Direction
• Audio Design
• Production Design

Technical Design:

• Software requirements
• Set/backgrounds/location/plates
• Lighting diagrams
• Special efx design
• Models, textures

PRE-PRODUCTION

Develop and integrate all the creative, technical and information components.

Creative Production:

• Story
• Character Design
• Prototypes
• Graphics, 3D video/audio production needs
• Technical integration

Technical Production:

• Green Screen
• Lighting
• 3D camera
• Sound
• System testing
• Problem resolution
  

DEPLOYMENT

Demonstrate the solution after all final specifications and testing results.

Live environment:

• Rendering
• Audience Test performance and feedback
• Implement promotion/communication strategies

Showtime!

That's all folks!

1-Quality: the true nature of things, the peculiar and essential character

All Illustrations custom made by Rich Powell