Creating a Shake Behavior Patch in Quartz Composer

Today we are going to make a reusable shake behavior that you can use to add an animation effect like this:

Quartz Composer Screenshot

Let’s make a thing that does this thing.

Video Version

If you want to kick back and watch instead of read, here’s a video version of the tutorial. Otherwise, you can keep on reading underneath. Or, do both!

Make sure you watch in 720P so you can see what’s going on!

First we need something to actually shake, so we’ll add an Image patch with a Layer attached, and set the hastily made login dialog as it’s source.

Quartz Composer Screenshot

An image we can shake

A “shake” is just starting at some position, moving right a distance, moving back through the start position to the left that same distance, and then back to center. If we remember our High School math, that’s exactly what a sine wave does. It starts at zero, moves to 1, back through zero to -1, and back to zero over and over again: sin(2Pi * f * t) Where f is the frequency of the wave, or how many times a second it completes a round trip and where t is time.

Quartz Composer Screenshot

One of those things you thought you’d never use in real life

Since we probably want to have a shake behavior that lets us move more than 1 pixel sometimes, we’ll add in the other component of the sine wave: amplitude, which we multiply the value of the sin function by to get any range we want. If our amplitude is 10, we’ll get a range of values form -10 to 10: A * sin(2Pi * f * t)

If all our animations wanted to start at zero, we’d be done, but I suspect there will be times where an element will want a default position other than that, so let us add in an offset value: A * sin(2Pi * f * t) + offset. Now we can position the element at 30 pixels by default and animate to either side of that by using an offset value of 30.

JavaScripting it

Now that we know what we want to do, we’ll use a JavaScript patch to do our math for us. Once it’s added, we need to change it’s Settings to enter our equation. First, change the number of inputs our patch has by changing inputNumber[2] to inputNumber[4] in the function definition. We do this since we have four variables: amplitude, frequency, time, and offset. We then modify the function body to contain the JavaScript version of our equation:

function (__number outputNumber) main (__number inputNumber[4])
{
    var result = new Object();
    result.outputNumber = inputNumber[0] * Math.sin(
        2 * Math.PI * inputNumber[2] * inputNumber[1]
    ) + inputNumber[3];
    return result;
}

It looks a bit odd, but inputNumber[0] is our amplitude, inputNumber[1] is our frequency, inputNumber[2] is time, and our offset is inputNumber[3].

Quartz Composer Screenshot

Our JavaScript patch to start

As you can see the JavaScript patch is not very friendly. It’s likely we are going to forget which inputNumber is which, so right-click on it and choose Insert Input Splitter for inputNumber[0]. This adds an Input Splitter patch connected to that input. Double click the splitter, and name it Amplitude. Repeat for the other inputNumber inputs, naming them appropriately (1 = frequency, 2 = time, 3 = offset) and then for good measure, add an output splitter (right-click, Insert Output Splitter) for the output value and name it Position.

Quartz Composer Screenshot

Much more user-friendly JS patch

We can now click on the Amplitude and Frequency splitters and give them values, for example, 50 and 2 respectively, which would give us a shake 50 pixels in both directions every half second (since a frequency of 2 means it will complete the sine wave twice every second.)

To feed in a Time value, add a Timer patch, and hook up it’s Time output to our Time input. This is everything we need to generate our animation, so go ahead and connect the Position output from our JavaScript patch to the X Position of our Layer. With the Timer patch selected, you can switch to the Viewer window and check and uncheck the Turn On setting to watch the animation go. Exciting stuff, eh?

Quartz Composer Screenshot

A timer hooked up so it will actually do something

Remove The Math

Quick, if you want 4 shakes in 1.25 seconds, what should you set your frequency to? I have no idea either, so we are going to make it so we can just specify the number of shakes and a duration, and let it figure things out for us!

Add an Input Splitter and change it’s type to a Number Splitter in its settings. Name it Number of Shakes, and then copy and paste it, and name the copy Duration. We want our animation to last as long as our Duration value, so hook up the output of that splitter to the Duration input on the Timer patch.

Our frequency value is simply shakes divided by duration, so add a Math patch, change the operator to division in its settings, then hook up the Number of Shakes output to the top input, and the Duration splitter output to the lower input. To guard against division by zero, we can specify a Minimal Value greater than zero in the Duration splitter’s settings. I used 0.05 since I doubt I’ll be animating any faster than that.

Quartz Composer Screenshot

Our behavior with sane inputs

Great, we have the behavior we want in a usable manner. The only problem is that we have to copy and paste all this stuff if we want to use it elsewhere. We shall fix that.

Make it portable

Select the Timer patch, the JavaScript patch, the division Math patch, and all our Input Splitters. Once you have them selected (yellow borders) click the Add to Library button at the top of the editor window. A little dialog will pop up, and you can name the patch, add a copyright, and a good description.

The good news is, the patch is in your Library. The bad news is, Quartz Composer did horrible, horrible things to it. You’ll notice you have no inputs, and the output is name Output. Oh no! We have to edit the patch in the Library to fix that, so bring up the Library (Command-Enter) and start typing the name you gave your patch. Once you see it in the patch list, single-click it to select it, then right-click on it and choose Edit … A new window will pop up with the contents of the patch.

To fix it, we need to publish our inputs again. Publish Amplitude as Distance, Number of Shakes as Number of Shakes, Offset as Offset, Turn On (on the timer patch) as Trigger, and the Duration splitter input (not the one on the timer) as Duration. This gives us our appropriately named inputs back. To fix the output, you’ll need to un-publish the Position output, and then re-publish it with the correct name. Hit save, and you have a fixed patch. Close the patch editor and viewer, and head back to your main composition.

You’ll notice that you still have the “broken” version of your patch sitting there. Delete it, and insert a new one from the Library. Voila!

Quartz Composer Screenshot

A reusable behavior patch

We can now set our values on the shake patch as needed, and by hooking something up to the Trigger input, we can trigger the behavior whenever we want. Here I used a Hit Area and in Interaction 2 patch to trigger the shake when the hit area is clicked. You, however, are free to do what you wish.

Quartz Composer Screenshot

Making the layer shake on click

Here’s my finished tutorial file: shakeBehaviorTutorial.qtz.zip (127k) and here is my Shaking Behavior patch that you could use directly by copying the Shaking Behavior.qtz file to your ~/Library/Graphics/Quartz Composer Patches directory:ShakingBehavior.qtz.zip (4k)

I hope you found this useful, and until next time, happy Quartz Composing! I would love to hear feedback or answer any questions on twitter: @veddermatic

back to top