Tutorial: Make a Quartz Composition Part I

Quartz Composer, like Cover Flow, is one of those cool little gems of independent Mac software that Apple has acquired. Even though they weren’t created within Cupertino, these apps have changed the way we use and even think of Mac OS X.

Even with the most basic level of knowledge, you can use Quartz Composer to create “Compositions” that take advantage of fairly powerful technologies like OpenGL, Quartz and Core Image to create beautiful transitions, filters and screen savers. The creative possibilities are truly vast with Quartz Composer as your canvas. In this first of a two part series I’d like to walk you through a interesting tutorial to help you discover Quartz Composer and perhaps inspire your imagination to create cool compositions on your own.

First if you do not already have Quartz Composer on your Mac, you will want to install it with the Apple Developer Tools. These are located on the Mac OS X install disk. If you can’t find those, the latest developer tools are available from the ADC website if you have a free ADC account.

I think the interface of Quartz Composer can be pretty daunting at first glance, but rest assured that once you put the effort into learning it, you’ll be able to do some really interesting things. Thankfully Apple has gone to lengths to standardize the interface of their entry level development apps like Quartz Composer, Automator and Dashcode. If you’ve ever used Automator or tried one of our Automator tutorials Quartz Composer’s layout won’t seem too foreign.

The main window is called the “Editor”; here you’ll do most of the designing and organizing of your composition. Within the Editor window on the left side, is the “Patch Library” and “Clip Library”, these essentially comprise your tool chest. Don’t worry if you don’t understand what a patch is yet, we’ll discuss that in further depth a bit later. In that same pane, near the bottom, there is a small sub-pane that shows a simple explanation of what a given patch does and what it requires to do it’s job.

To the right, the gridded window pane is your work area, where you will drag, place and connect your patches and layout your composition. At the top of the work area you may notice a horizontal divider bar, pulling this down reveals the Hierarchy Browser, which we will discuss in part two. As you create you composition you will want to inspect and edit values within your patches; for this, you’ll use the “Inspector” window which can be opened by clicking the button on the toolbar icon. Likewise you can open a “Viewer” window to see how your composition looks live.

I think the best way to really get the hang of the interface of Quartz Composer is to dive right in. Let’s make something simple - a basic single image viewer for admiring a picture or image you are particularly fond of. To get started create a new blank composition by opening Quartz Composer and selecting new from the file menu. First we will want import an image with the “Image Importer” patch.

Finding this patch can be made easier by typing “image” into the Library search field to narrow the patch results. You can add the Image Importer Patch to your editor by either double clicking the patch in the library or just dragging it onto the grid. Just a point to note for later, that little circle on the patch’s left-hand side is it’s “Image” output. Once you’ve added the patch open up the inspector to take a look at it’s stats.

The inspector for each variety of patch varies greatly but the Image Importer inspector, as you will notice, has three inspector modes. “Information” deals with the patches name, notes and a description, while “Settings” let you control which image is imported and how it will be displayed. Ignore “Input Parameters” for now. These inspector modes can be easily navigated by pressing Cmd-1, Cmd-2 or Cmd-3 to get each respective setting.

Let’s go to the Settings mode to import our image. Although you can import any image you’d like, I would recommend something with an alpha map (transparency) so we can illustrate an important point in a moment. I will import the above MacApper logo PNG (you can save it from this page if you’d like to use it in your composition). Import you desired image by pressing “Import From File…” and navigating to the file you want and select it in the file browser.

Wait a second! Nothing happened! No image appeared in the Viewer window… That’s okay. We’ve only imported the image, not done anything with it. To get the image you’ve imported to display, you will need to pass it to another patch that can do something with it. The two most common ways of displaying images in Quartz Composer are the “Sprite” and “Billboard” patches; we’ll use “Sprite”, the more complex one for now.

The differences between these two patches can be discovered in the Patch Library pane if you are interested. Add a Sprite patch to the work area somewhere near to the Image Importer patch. Now the fun part. You will notice on the a bunch of empty circles with descriptions along the left-hand side of the Sprite patch; these are the inputs for the patch. We are going to connect the Image Importer’s “Image” output to the Sprite’s “Image” input.

To do this click and drag from the Image output to the Sprite’s input - you will see a connector dragging along with the mouse if you are doing it right. If that connector were to turn red after you have placed it, you’ve connected an output to an input that’s not compatible. If all is well, you will now see that the image has appeared in the Viewer window, but still doesn’t look quite right. The image is a bit skewed and the transparent background is opaque and black. We’ll take care of these problems next.

Select the Sprite Patch and look at it’s inspector, specifically the “Input Parameters”. If you are using the MacApper Logo you will want to change the Width to 1.58 and the Height 0.4. To make Quartz Composer maintain the image’s transparency select “Over” from the inspector’s “Blending” drop-down menu. So far, what you have created will look fine in Quartz Composer or as a video overlay but wouldn’t look so hot as a screen saver or on a web site.

The reason for this is that the MacApper logo is being drawn again and again over itself on the same spot, while nothing is being drawn around or behind it; we need to make the composition refresh every frame. To do this we will use the aptly named “Clear” patch. If you go ahead and add a Clear patch now it’s likely your sprite will no longer be visible, this is because the clear patch is drawing on top of the sprite.

The number contained in the small yellow square at the top right-hand corner of your two ‘rendering’ patches represents their respective layer or drawing order. Here, my sprite draws first, but is overwritten when the Clear patch draws next. To modify the Clear patch’s layer right-click on the patch and select the desired layer from the menu that appears. The MacApper logo should again become visible.

I’ll admit, what we have here is a bit boring thus far, so let’s do just a bit more work to spice it up. Wouldn’t it be cool if we could control the rotation of the sprite with the mouse. Luckily there is a “Mouse” patch that outputs the coordinates of the cursor in Quartz Composer units. The cursor’s movement alone won’t be enough to rotate the sprite very much so we’ll also apply a “Math” patch to multiply the coordinates.

First of all, drag out a Mouse patch and a Math patch onto the Editor, then connect the Mouse patch’s “X” output to the Math patch’s “Initial Value” input. In the Math patch’s inspector set the “Operation #1″ drop-down to Multiply and enter a number into the “Operand #1″ input; I found the number 50 works great for playing with this composition in fullscreen mode. Connect the Math patch’s “Resulting Value” output to the Sprite’s “Y Rotation” (I know this seems funny, X connecting to Y, but it feels the most natural controlling it in this manner).

Whenever the mouse moves, the sprite’s rotation will be set to the Mouse’s “X” position multiplied by 50. Next, duplicate the Math patch (Command-D) and connect the Mouse patch’s “Y” output with the new Math’s initial value input. In the inspector for the duplicated Math patch change the value of “Operand #1″ to -70. This value will give the vertical rotation a bit of a boost and make it seem the logo is always facing the mouse cursor. Finally connect the “Resulting Value” output to the sprites “X Rotation” input. You should now be in business.

Good work! You’re now done with part one of this two-part Quartz Composer series. Check back next week or watch your RSS feeds for part two; we’ll explore more techniques for making great Quartz Compositions including how to making you own screen saver.

Note: Here is a link to the QC file for this Tutorial