One of the least well known, yet coolest programs available for the Mac is Quartz Composer. Part of the Mac OS X Developer Tools (available on the install DVD/CD or from Apple's ADC), and located in /Developer/Applications/Graphic Tools, this little gem lets you create incredibly cool compositions including slideshows, fun videos, zany screen savers, and even audio visualizations. All this power is harnessed using a mostly drag and drop interface that is fairly easy to learn.

To help you get started, I'm going to describe how to build a slideshow with captions, and a wacky iSight based cube that will almost certainly make you dizzy. After you have completed these tutorials, you should have the tools you need to conceive some extravagant compositions. Let's start with the surprisingly easier iSight Colored Cube.

Start by opening Quartz Composer, choose a Basic Composition as the Template, give your composition a name and location, and click Finish. This will bring up the editor window, viewing window, and inspector. We don't want the default composition (even though it does look cool), so click in the editor window, select everything, and hit delete. We now have a blank slate to start our creation with.

Having an empty space is nice, but we need to find the building blocks that will be used to compile this project. On the left side of the editor window you will find a Patch Library, chock full of effects just waiting to be used. But the list is long, so I suggest using the search box above the Path Library list to narrow down your choices. The first thing we want to find is the Video Input generator. Once you find it, drag it to the main part of the Editor window.

Figure 1.1 - Our humble beginnings. This is all we need to pull in live video from your iSight camera.

The next thing we need is a method for viewing the iSight image. Find the Cube renderer (not the Color Cube color effect), and drag it to the editor. We want the iSight's image to appear on every side of the cube, so we will match the Video Input's Image output to the Cube's Image inputs. To do this, click on the dot next to Image in Video Input, and drag to an Image dot (for example Front Image) in the cube. Once you have done this for each of the six sides, your composition should look like the following:

Figure 1.2 - Each Image input on the Cube has been attached to your iSight's Image output.

If you look to the Viewer window, you will notice that you can only see the front of the cube. Well, that's no fun, so we are going to make it rotate. I am going to use two Interpolation controllers, but you can use one or three if you wish. After dragging one Interpolation to the Editor, I moved over to the Inspector, and set it up to look like Figure 1.3. Then I dragged a second Interpolation controller to the editor, and set it up with the same values, except I used a duration of 4 (which will make the cube spin faster).

Figure 1.3 - Feel free to play around with these values until you get what you want.

Once we have the Interpolation controllers set up, we want to connect them to the Rotation inputs on the Cube. Again, you can choose how you want the Cube to spin. I chose to setup the first Interpolation to the X and Z Rotations, and the second/faster Interpolation to the Y Rotation. As soon as you connect an Interpolation controller to a Rotation input on the Cube, you should see the Cube start moving in the viewer window.

Figure 1.4 - The Interpolation controllers have been attached to the Cube so it will start moving around.

The last step it to add some color, which will give each face of your cube a different hue. Find the RGB Color generator (or HSL Color if you feel more at home with that), and drag five of them to the editor. The reason we want 5 is because one face should not have a color effect so you can see a normal image (this is by no means a requirement!). Once you have the RGB Color generators added, head back to the Inspector to choose whichever colors you want. I chose some combinations that give us a nice range of colors.

Figure 1.5 - Not only is the cube rotating, but now it has dizzying colors too!

That's it! Now that you have created this work of art, what should you do with it? Well, one fun thing it the ability to embed the composition into a web page. To do this, use the File menu to Export as QuickTime Movie. Then you can embed this movie into a webpage as you would any QuickTime Movie. For an example, navigate to the Colored Cubic iSight page and use your browser's View Source option. Note that navigating to that site will automatically turn on your iSight. Impress your friends with your new found iSight abilities!

Once again, we want to start out with a blank composition; but we also need a folder full of images. Make sure to save the composition in the folder containing images, and we can get started. The first two things we want to add are a Clear renderer and a Folder Images source. I chose a Clear Color of black, and set the Folder Path of the Folder Images to "./" (without the quotes). Doing that makes sure it grabs images from the folder the composition is currently contained in.

Figure 2.1.1 - Humble beginnings for a mildly complex composition.

Now that we have a starting point, let's do something with that file list. We can start by adding a Structure Index Member, and two Structure Key Member modifiers. The Structure Index Member locates the file in the list at the specific index (so, if you have 5 images in the folder, index 2 points to the second one). The Structure Key members then get info from the current file. The first key we want is the URL to the image, while the second is the Name of the image.

Figure 2.1.2 - We see all the structures needed. The top key is 'url' and the bottom key is 'name'.

With the structures in place, we now need to generate indices. The best way is using a stop watch, so that there is a delay between each image. However, it's a bit more complicated than that. After adding a Stop Watch, also add a Math and a Structure Count. Connect the Done Signal of Folder Images to the Start Signal of Stop Watch so it starts counting when the folder has been fully read. Connect the File List of the Folder Images to the Structure of Structure Count. Finally, connect Time from the Stop Watch to the Initial Value of Math. Also in Math, set Operation #1 to divide, and the Operand #1 to how many seconds of delay you want (I used 2).

Figure 2.1.3 - We have the start of the index built with a stop watch and a built in delay.

This doesn't quite get us to the index value we need. For this, we need two more objects: another Math and a Round. In the new Math, set the Initial value to the result from the first Math. Set the Operation #1 to Modulo, and Operand #1 to the Count from Structure Count. The reason for this Modulo is so we can increment from 1 to the number of images in the folder, then repeat. This provides the image looping. Next, set the result from the new Math to the Value of Round, and set the Structure Index Member's Index to the Floor Value of Round. We are now looping through the images!

Figure 2.1.4 - Everything is in place to start getting images from the folder.

Ok, so we are looping through images, but we still can't see them, now what? Here is where the real power of Quartz Composer comes into play. See that Create Macro button in the toolbar? Make sure nothing is selected and click it. A new empty patch is created. I called mine Display patch, but you can call it whatever you want.

Figure 2.1.5 - Notice the new patch with no inputs or outputs.

Double click the new patch and you will be brought to a blank canvas; this is where we will add the ability to display both the images and their names as captions. Let's begin this patch by adding a Image Downloader and a Billboard to display it. The easy part here is connecting the Image from the Image Downloader to the Billboard's Image. The tricky part is right clicking on Image URL in the Downloader, choosing Published Inputs, and then choosing Image URL. Hit return and forget about it for now (other than noticing that the little dot turned grey).

Figure 2.2.1 - The start of a new patch which gets the Image URL from an external source.

Unfortunately, this will scale down the pictures to about the size of a stamp. To rectify this, we need a Rendering Destination Dimensions object. This object dynamically calculates the size of the movie window. Connect the Width from this new object to the Width of the Billboard, and the images will be sized to fill the window.

Figure 2.2.2 - We will use the dimensions more in the upcoming steps.

Since we also want the caption to show, we should add an Image With String and another Billboard. For the String property, we need to get it from an external source, so right click, choose Published Inputs, and select String. We can now make a few more connections. Connect the Width of Rendering Destination Dimensions to the Image Width input of Image With String. Then connect the output Display Width of that same object to the new Billboard. Don't make any more connections now, but I suggest changing the Color and Blending of the new Billboard. I choose a yellow color with 70% opacity, and set Blending to Over (so no background is shown).

Figure 2.2.3 - We have an image for the name, and a Billboard, but haven't connected the image yet.

With yellow text, sometimes it can get hard to read on bright images, so let's add a NI Drop Shadow. Connect the Image output of the Image With String the the Drop Shadow's Image input, and the the Image output from the Drop Shadow to the Image of the second Billboard. I then picked the following values for the drop shadow: Offset X=3, Offset Y=-3, Shadow Radius=2.

Figure 2.2.4 - All the pictures and their file names are set. We are almost done.

In its current state, the caption will be shown right in the middle of the picture. This is not ideal as I want it on the bottom. Let's add two Math objects to get this right. Notice that we don't really deal with pixels in Quartz Composer, but rather Units which are based off the size of the original "preview." Thus, when the viewer window is double sized, the height is now 2 (instead of twice the pixels). The origin is in the middle of the viewer, so to get to the bottom, we need half the height. connect the Height from Rendering Destination Dimensions to the Initial Value of the first Math. Set the Operation #1 to Divide, and set Operand #1 to 2. In the second Math, set the Initial Value to zero (we want a negative number) and Operation #1 to Subtract. Connect the result of the first Math to Operand #1 of the second Math. Set Operation #2 to Add. Now connect the Display Height from Image With String to Operand #2 of the second Math. Finally, connect the result of the second Math to the Y Position of the second Billboard.

Figure 2.2.5 - Our custom patch is complete!

The last step is back in the main editor. To get back there, click the Edit Parent button in the toolbar. You should now see our custom patch has three inputs: Enable, Image URL, and String. All we have to do here is connect the Member from the first Structure Key Member to Image URL and the Member from the second Structure Key Member to String.

Figure 2.1.6 - The slideshow composition is finished.

A couple things to note about this composition. First, if you export to a movie, it doesn't seem to bring in images from the folder. I'm not sure why, but if you want it to work outside of Quartz Composer, you will have to create a Cocoa application to handle it. That is way beyond the scope of this tutorial, but maybe something to keep an eye out for in the future. The other thing to notice is the caption changes slightly before the image loads. This is because it's much easier to render text than a scaled image. To remedy this, you would have to use the Done Signal from the Image Downloader with some logic that I didn't want to get into here.

Of course, feel free to expand on this example as you wish. A good starting point would be to add transitions between images or proper captions using titles in the meta-data for the files. I'll leave these as exercises to the readers. With the tools and experience you have gained here, I'm sure you will have no problems coming up with some great new compositions.

• Circuit Design with Quartz Composer
• Introduction to Quartz Composer Programming Guide
• Quartonian
• Quartz Compositions
• QuartzComps
• Sam Kass' Quartz Composer Examples
• The Lava Flow - Quartz Compositions
• Time Out of Mind Quartz Composer Files
• Working with Quartz Composer
• /Developer/Examples/Quartz Composer on your hard drive (after installing the Developer Tools)