Handpicked Software

Some of the best things in life are free, and so are some of the best things about Tiger. I’ve already written about one of Tiger’s free hidden apps—Core Image Fun House, a mouthwatering bit of eye candy—and now the second one can be revealed. What follows is a mini guide to Quartz Composer—a tiny tutorial—to whet your appetite for this tasty treat.

Quartz Composer, like Core Image Fun House, lets you tap Tiger’s 100 new Core Image Units to create jaw-dropping motion graphics. If you’ve followed the directions to set up the Handpicked Software RSS feed as your screen saver you’ve already seen Quartz in action; it’s the magic behind the RSS Visualizer Screen Saver.

Installing the Tools

Most people know nothing about Quartz Composer because it isn’t installed by default when you install Tiger. You’ll need to install Xcode Tools, if you haven’t already done so. Insert your Tiger installation DVD and open the Xcode Tools folder. Then double-click on the XcodeTools.mpkg file to install. After installation, look in the Developer folder (in the root directory of your main hard drive). You’ll find Quartz Composer in /Developer/Applications/Graphics Tools/. Of course, you can skip all this looking in folders nonsense by typing Quartz Composer in Spotlight.

Creating a Composition

To create a new Quartz Composer document (a composition), launch Quartz Composer. The first time you launch Quartz Composer, you’ll see the Assistant window, which lets you select from a number of different document templates, including Mac OS X RSS Screen Saver and Mac OS X Slide Show Screen Saver.

Note: Any Quartz Composer document can be used as a screen saver just by dropping it in your Library/Screen Savers folder and selecting it in your Screen Saver preferences.

For now, just select Basic Composition in the Assistant and click the Next button. Name your composition, click on the Choose Directory button to select a location to save your composition, and click Finish.

Taking the Tour

Quartz Composer should open with three windows visible: the Quartz Composer Editor window, the Viewer window, and the Inspector palette. The Editor window shows the various patches (the base processing units) on the left side, which are arranged and connected in the workspace on the right side of the Editor window to create your compostion. The Viewer window shows a live preview of your composition (it it isn’t visible, select Show Viewer from the Edit menu, or press Shift-Command-V). The Inspector palette displays information about a selected patch (if you can’t see it, select Show Inspector from the Editor menu, or press Command-I).

You’ll notice six patches in our basic composition. Three have green bars at the top, an indication that they’re processor patches, which do something at specified intervals or react to changing input values. The patches with pink bars at the top are consumer patches, patches that render a result. There are also blue provider patches, which supply data from outside sources (e.g., input from a video camera).

Notice that patches have little circles on their sides. The circles are ports, each port representing a different parameter. By connecting ports on the right side of a patch (output ports) to ports on the left side of a patch (input ports), you establish the flow of data that creates your composition.

Look at the Patch Library on the left. You’ll notice an assortment of Controllers, Generators, Modifiers, etc. Scroll to the bottom of the list and you’ll see all of the Core Image Units, the same units you saw in Core Image Fun House. Click on a patch and you’ll see a brief description of the patch underneath the list.

Now click on the Clip Libary tab at the top of the list. Clips are packages of patches that create an effect, like a rotating cube.

Finger Painting

Okay, let’s push some pixels around. We won’t create anything here, just play with some patches. The best way to learn Quartz Composer is to take compositions apart and experiment.

Click on the Rotating Cube clip in the Clip Libary and drag it into the workspace on the right side of the Editor window. This patch looks different than the other patches in the window: it has square corners. That means it’s a macro patch, a patch that contains other patches. Double-click the Rotating Cube patch and you’ll see another workspace containing another macro patch, Lighting. Double-click on the Lighting patch and you’ll see yet another workspace containing several more patches. The pink Cube patch on the right is our consumer cube, rendering the cube in the Viewer window. If you look at the Viewer window, you should see the cube spinning on top of the basic composition.

To find our way back to our original workspace, open the Hierarchy Browser by clicking the Hierarchy Browser icon on the top of the Editor window, or by selecting Show Hierarchy Browser from the Editor window (or by pressing Command-B). Then select Root Macro Patch from the Hierarchy Browser at the top of the Editor window (you may have to scroll to see it), or press Command-U twice (or select Edit Parent twice from the Editor menu).

Let’s add an image to the cube. Open iPhoto and select a picture. Now, drag the picture from iPhoto and drop it into the Quartz Composer workspace. You’ll see a new green patch with the name of your image at the top. Click on this patch and look at the Inspector palette. The Inspector tells you that this is an Image Importer patch (make sure you have Information selected from the pop-up menu in the Inspector) and that it’s used to import an image from a file.

Note: You can also add an image by selecting an Image Importer patch from the Patch Libary (you can click on the Name column heading in the patch list to sort patches by name, which might make it easier to find) and dragging it into the workspace or double-clicking on it in the list. Then select the patch and choose Settings from the pop-up menu in the Inspector, then click Import From File.

To add the image to the cube, click on the Image output port on the Image patch (click on the circle, not the Image label). Holding down the mouse button, drag to the Image input port on the Rotating Cube patch. You’ll see a strand of spaghetti connecting the Image to the Cube. Look in the Viewer and you’ll see the image rotating on the cube.

The cube obscures the rest of our composition. To move it to the back, Control-Click on the Rotating Cube patch and select Layer 2 from the Rendering Layer menu (layer 1 is the gradient background).

To delete the Quartz Composer icon, drag over the Billboard patch and the connected Image Importer patch so that both are highlighted with a blue outline. Then press Delete.

To change the spinning text, click on the Image With String patch and select Input Parameters from the Inspector’s pop-up menu. Enter your new text in the String field.

To test the composition as a screen saver, save the file and drop it in your Library/Screen Savers folder, then select it in your Screen Saver preferences in System Preferences.

Learning More

I just wanted to give you a taste of Quartz Composer. To learn more, read the Apple documentation. Open the examples in the Developer/Examples/Quartz Composer folder. Search the Internet (here’s one site to try: QuartzComps).

If you know of other resources, please post a comment.