Quartz Composer patches for drawing motion.

Long, long time ago I decided to build an image generating app in Flash. The idea was to simply replicate an object hundreds of times, but with each replication changing it’s position, rotation, size, color, transparency etc. by a little bit. The amount of the change in each replication is described by a simple motion path. Sort of multiple exposure photography of an object following a mathematical equation. Not particularly original idea, but exciting nonetheless. So, yes… applying maths to visuals was something I always liked I guess.

Anyway… I built a perfectly working version of my app in Flash. I even used the images produced by it in a commercial project. But it had temporary interface and no option to load a source object from within the interface. So it wasn’t fun to use and I couldn’t share it on my website for others to use it.

“Smoke”. Actual image created in my app.

The Machine

To make it fun to use I decided to hook my code with a skeuomorphic interface resembling a retro electronic gear. It had to look nice have this confusing and intimidating layout of an effect rack in a recording studio. It also had to behave like a physical tool.

I quickly expanded on the initial idea, by adding more properties for shaping the motion path and designing a way to combine them for greater control. It also required a display for previewing the path, as it was extremely hard to follow the multitude of transformations that the tool offered without a visual cue.

I referred to my app as “The Machine”.

Kokozithor KK-40NX.

Designing the interface was the easy part, but making the knobs and switches feel and sound like a real thing was harder than I expected. I think I did pull it off, but unfortunately I haven’t finish the app.

Partially due to a fall of flash technology. I was worried that by the time I finish the app no one will have a flash player in their browsers anymore. The other reason was that I’m not a developer :). I run into performance issues I couldn’t figure out.

Marzena Electronics L12

Back to Quartz Composer

So, recently I needed to produce a simple animation of an object falling and bouncing several times of the “floor” before becoming still. Just some random idea for a loading animation for a mobile app.

You can achieve this effect in several ways in Quartz Composer… I guess. Chaining several animation patches to go one after another would be the one way. Combining couple of LFO or Interpolation patches (one for playing the bouncing loop — other for chiming it down) would be another. There’s also a Timeline patch, but I still don’t know how to use it.

I decided, I will produce an absolute overkill of a solution — I’ll rebuild the logic from The Machine along with it’s most powerful feature — a display patch for previewing the motion path. I wanted to literally draw the path for my elements to follow.

Without further ado: Motion Designer

There are 4 patches: Motion Designer , Motion Designer Settings, Motion Designer Engine and Motion Designer Info.

Motion Designer patches pack.

Motion Designer is just a Settings and Engine patches bundled together for convenience. Settings lets you control the shape of the motion path. Engine does the heavy lifting. Info draws the curve profile on screen.

It can not possibly make sense at this point yet, so check the video below.

Motion Designer controlling the Progress of an animation

I don’t think it’s necessary for me to go over each parameter of the Settings patch. It’s better to just plug the Profile output into Motion Designer Info patch and explore for yourself.

What is definitely worth mentioning is one particular feature of the Info patch itself. It will plot the combined motion path of the several Profile inputs.

Motion Designer Info

The patch renders a square graph representing 0 to 1 area of cartesian coordinate system. You can resize and position it to your fitting. You can also change a color of the lines and quality (resolution) of the graph line.

Use a Structure Creator in order to plot a resulting path of a several Motion Designer profiles combined. Plug as many profiles as you need (you can set the number of inputs on a Structure Creator patch in Patch Inspector window under Settings — CMD+2)

Combine the profiles to get motion paths unachievable for a single patch instance.

Ok, I know how to preview the combined path of several patches but how to actually use it in my animation? — you may ask. Just multiply the Progress outputs by a simple Math patch (you can also set the number of inputs on a Math patch). Don’t worry I’m sharing the example below.

What about my “bouncing ball” animation?

Once I had all my patches built, I could get back to my “loader animation” that started it all. I knew I need to combine two motion paths. One for bouncing and one for dissipating the energy. I didn’t waste time to figure out the details, though. I just plugged two Settings patches into an Info patch and fiddled around until I found a path, that could actually work.

Only then did I plug Engine patches, hooked them up with an animation patch and multiplied their outputs to feed an Y Position input on a Circle patch for testing. It worked great.

Two Motion Designer patches combined to achieve the bouncing ball effect. The input progress was fed by Classic Animation [Origami] patch set to accelerate.

You can download the example above here.

Here is the ZIP package with 4 Motion Designer patches.

That’s all

At the end of the day I just wanted to have some fun rebuilding my old design in QC.

Leave a comment if you have any questions about the patches. Or ping me on Twitter.