Tutorial: Quartz Composer Part 2 – How to Make a Quartz Composer Screen Saver

Our last tutorial’s picture viewer, while pretty cool, wasn’t useful for too much more than just viewing images within Quartz Composer. This time, we’ll take your great QC skills and use them to break our creations free from Quartz Composer and into the rest of the Mac OS X environment.

In our last Quartz Composer tutorial, a tour through exciting QC concepts such as displaying images, layers, mouse input and using the Math Patch, we learned how to create a reactive and visually appealing composition in just minutes. This time we’ll make a great MacApper RSS screensaver while we discuss concepts such as making a really cool visual particle generator, controlling your Composition’s attributes from the screen saver preference panel and using macros from other Quartz Compositions.

Although many great screen savers included with Mac OS X Tiger are written in code rather than with Quartz Composer, I think you would be surprised and excited to see what it can do… Some good examples include the RSS Visualizer, Spectrum and Apple TV’s ‘flying photograph’ screen savers. One really neat thing about a Quartz Composition screen saver is that in it’s native .qtz format, you can generally get inside of a file and poke around to find out how things work.

What’s more exciting is that you can use patches and “Macros” from other compositions in your own, usually involving a drag and drop. I’m using an original illustration here though; I’m not recommending stealing the work of others – that is tacky and will make you pretty unpopular when you’re discovered. Learn from the work of others, and use (drag and drop) from resources that openly share their creations with you, like Apple’s Quartz Composer templates. Apple’s templates are there for you to use, customize, and take macros from.

If you are ever unsure whether a Composition is entirely or partially copyrighted, open it in QC and press Shift-Command-I to view it’s Information sheet with the creator’s name and retained copyrights. Enough talk, right? Let’s get into the good stuff. For this tutorial I’d like to walk you through creating a simple RSS screen saver from scratch, while using pre-made Macro patches to accomplish some of the more complicated steps.

Open Quartz Composer and create a new blank Composition by selecting ‘New’ from the File menu. To make this composition a screen saver really the only special step that is required is saving it to the Screen Savers folder, located at “yourUserName/Library/Screen Savers”. Go ahead and do this now.

The Interpolation Patch

As we learned last time, add an Image Importer patch to the Editor and render it with a Sprite patch. I will be using the same MacApper Logo that I used last time. Set the dimensions of the Sprite so it looks appropriate. I think it would be cool if the logo swept in from a distance when the screen saver first activates, so let’s implement that sort of motion with an “Interpolation” patch. Drag one to the editor and inspect it’s “Input Parameters” (remember you can quickly switch to this be pressing Command-2 if the inspector window is open).

What an Interpolation patch does is outputs a sequence of numbers between “Start Value” and “End Value” over “Duration” seconds. You can also control whether that sequence is repeated or mirrored and the curve of it’s interpolation. So how is this helpful to us? Remember, like we did before you can modify the value of a sprite’s rotation, width, position, etc. with numerical input. We will do likewise here. Connect the Interpolation patch’s “Result” output to the Sprite’s “Z Position” input value. What you will have is the sprite sweeping at you again and again from 0 quartz composer units (let’s call them QCU) to 1 QCU. Play around with this a bit if you like, I bet you can make some pretty neat things happen already.

The coordinate system of Quartz Composer is pretty simple. 0 QCU is in the middle of the screen. An X position of -1 QCU will be to the left and 1 QCU would be to the right. The only dimension that I think can be at all confusing is the Z position; a positive value is “closer” to you and a negative value is “farther” from you. Anyway, with these principles in mind let’s make the Sprite swoop in from far away and then park itself in the middle of the viewer.

In the Interpolation patch’s Input Parameter inspector change the the “Start Value” to -50, that’s pretty ‘far away’. Change the “End Value” to 0, so the motion is towards the user. Adjust the “Duration” to something around 4 seconds so the motion lasts long enough to enjoy. I like the more organic motion of the Sprite ‘easing into’ it’s end value so I will set the “Tension” to -1.

Finally, since I want the Sprite to only sweep in at the beginning of the screen saver’s presentation we will change the “Repeat Mode” drop-down menu to “None”. At this point we might as well add a Clear patch with Black Color, set to draw at layer 1 (at the back).

Not sure if it worked? There is an easy way to find out. Bring forth the viewer window and open it’s toolbar by pressing it’s “pill” button. From the tool bar you can start and stop your composition’s drawing to see if the Sprite sweeps in to your satisfaction.

The Particle System Patch

So far this screen saver lacks much flare, so let’s spice it up with the icons of some of your favorite apps flying by. Add another Image Importer patch to the editor and then a “Particle System” patch. The particle system will initially be covering your Sprite so you’ll want to set it’s layer to behind the sprite. Particle systems are a very versatile drawing technique that can be used to simulate anything from smoke to water. Without an image inputed into the particle system it’s going to look less than impressive so let’s do that first.

Having the icons from your favorite Mac Apps flying through the background would be pretty cool, so let’s add an icon from a great app… I’m going to just use an icon I made myself, but adding almost any app’s icon is easy enough. Find the Application whose icon you would like to use, right-click (or Ctrl-Click) on the application icon in the Finder and select Show Package Contents. These “contents” are the guts of an app; as such don’t tamper with or remove anything or you could risk breaking the app.

Navigate to the Resources folder. Here among other things is generally where the application’s icon is stored. Icons will usually be named with the suffix “.icns”. I’ll leave finding the app’s icon to you, it’s usually named something like “AppIcon.icns” or “icon.icns”, to you. Once you know where the desired icon is return to Quartz Composer, switch to the unused Image Importer’s Settings Inspector and drag the icon onto the inspector’s import from the file drop-box.

If all has gone well you will see the icon has been added to the Settings Inspector. Now connect the Image Importer to the Particle System’s Image input. You should now see dozens of you icon pouring from the Particle System. The icon won’t be blending properly yet so change the Particle Systems Blending drop-down menu to “Over”.

Next let’s work on coercing the particles to move a bit more like stars flying by. One problem you may first notice is that some particles are moving backwards, away from the viewer, so we need to adjust the Z Velocity. Set the minimum Z-Velocity to 0. Furthermore, the particles are moving at a pace that would likely make you sick to stare at for long so let’s slow them down a bit. Do this by changing the remaining Velocity values that read 1, to 0.5 and those that read -1, to -0.5.

Let’s make the starting size of the icons be just a bit smaller, change the “Min Size” to 0.001 and the “Max Size” to 0.005. There might be just a few too many particles in our current system, in fact there are 256 of them. Let’s visit the Particle System’s Settings inspector (Command-3) for a moment to tone the particles down a bit. Since we will be making multiple Particle Systems I think setting the “Number of Particles” to around 10 would be perfect.

There are a number of controls that modify a given particle as it “lives it’s life”, these include: The “Lifetime” parameter which modifies how long a particle will last in seconds. The “Size Delta” controls how much a particle will shrink or grows as is moves along. “Opacity Delta” manages how much if any the transparency of a particle will diminish over it’s lifetime. “Attraction” is the amount that particles are drawn to one another.

Finally, “Gravity” controls how much the particles are pulled done or pushed upwards as they move. I think you can imagine that all these attributes give you the power to do some really cool things with a particle system. Let’s adjust these attributes one-by-one. Take a good look at how the particles react after every change to get a feel for what’s going on. First set the Delta Size to 0.09. Then, set the Opacity Delta to -0.6. Finally, set Attraction to 0 and leave Gravity at 0.

Macro Patches and Publishing Connections

Good work, you’ve made a great Particle System – now let’s make more. We’re going to replicate the particle system in a way that illustrates another very important principle in Quartz Composer. We are going to make the Particle System into a Macro. A Macro in QC is a way of encapsulating complex patches for the purpose of simplifying your composition.

Imagine, for example, you had a series of patches that rendered a particularly cool background. Rather than dragging a massive, complex and confusing network of patches onto you window, you could add a single Macro that contains all of that logic. In fact, let’s do exactly that, add a cool Macro encapsulated background. In the tab bar above the Patch Library you will notice another option, the Clip Library. Click on the Clip Library and take a look at what kinds of things it contains. For our composition let’s add the Gradient Background clip (macro) to our editor and change it’s layer to be behind our particle system.

Double click on the Gradient Background Macro patch to view its contents and peek around; it’s pretty complex isn’t it? Click on the Editor window’s “Edit Parent” button to return to the rest of your composition. Macros can encapsulate other macros indefinitely, so to better understand the organization of nested macros, all can be viewed easily with the Editor window’s “Hierarchy Browser”. You will also notice that the Gradient Background macro patch has inputs; you can adjust it’s enabled state and it’s Luminosity.

For now let’s disable the Gradient Background by double clicking on the “Enable” input and selecting false from the drop-down menu that will appear. We can also “Publish” the Enable input to the outside world by right-clicking on the macro patch, go to Publish Inputs and select Enable. You will now see that the Enable text field has become open to be edited, let’s name it “Gradient BG”. Publishing Inputs and Outputs to the outside of a macro patch is a very important principle in QC.

In case you were wondering, a filled, dark circle means it’s published while an empty circle indicates it’s unpublished. Publishing allows you share an input or output with the parent of the current patch. The published inputs in the Gradient Background patch are accessible to your editor; the input you just published from the editor’s root will be accessible from the “Options” button of the Screen Saver pane.

Select the Particle System patch we were just working on and click the Editor window’s “Create Macro” button. The image input is automatically connected to the newly created patch, but we need one further input for our screen saver. Double click the new macro; you should now see the Particle System. To ensure that each duplicate of this macro has a unique particle system, we need to adjust each version’s particle Lifetime. Right-click on the patch and publish the Lifetime; the default name will suffice. Now would be a great time to name your macro patch, I’ll name mine “Particles”.

Return to the root macro by again pressing Edit Parent. Select the Image Importer and Particle System Macro and press Command-D to duplicate them. These will make another icon that will be flying by in the Screen Saver. To make things easier drag the pair of patches a little ways away from the first. Now choose the image or icon you wish for the next particle system to draw and add it to the new Image Importer.

You can duplicate and change the icon of your systems as many times as you care to; I’ll have three total. There is just one problem though. All the icons are following the same path at the same time; this is an easy fix, I just set the published Lifetime of my macros to 2.0, 1.9 and 1.8 respectively. After the initial release of particles they will now seem to flow randomly.

Like we discussed before, this is going to be a simple RSS screen saver, to make room for the RSS titles let’s move the Title’s Sprite upwards slightly to a Y Position of about 0.07 QCU. To add the RSS feed we’ll be borrowing from an Apple Quartz Composer template. Create a new composition from template by choosing from the menu File -> New From Template… and selecting the Mac OS X RSS Screen Saver.

What you will see here is a bit much for our needs, as such scroll to the right hand side of the root macro and delete the “Background” and “Article Contents” macros patches. Select all the remaining and create a macro – you should probably name this macro “RSS Macro” to avoid confusion. Copy this macro and then paste it into your own composition.

Once added to your composition double click the RSS macro to view it’s contents. We have to move the RSS titles down a bit, so we will look inside the RSS macro’s Article Title macro. Here modify the Y Position of the two Billboards to -0.4. Move back to the RSS macro and inspect the “RSS Feed” patch (it’s blue and located on the left). Here you can modify the URL input and enter MacApper’s RSS feed if you like, although any standard RSS address should work fine. Finally you’ll want to publish the RSS Macro’s Enable input as something like “RSS Feed”.

That was really tough, but you made it. Again, I hope these tutorials have helped you get a better grasp on creating Quartz Compositions and the power that QC contains. Feel free to share your creations and composition ideas in the comments, I really appreciate knowing if and how these tutorials helped you out. Stay tuned in the coming weeks when we’ll present another series of Quartz Composer tutorials focusing on more advanced topics like widgets and Xcode integration.

Note: You can get the QC file for this Tutorial here, hosted courtesy of Hipp Software.

share permalink ping 7 Comments