TweetFollow Us on Twitter

Fun With Quartz Composer

Volume Number: 21 (2005)
Issue Number: 5
Column Tag: Programming

Fun With Quartz Composer

by Scott Knaster

Have you seen the incredible RSS Visualizer screen saver in Mac OS X Tiger? If you haven't, go check it out now: you'll find it in the Desktop & Screen Saver panel in System Preferences. Figure 1 gives you the flavor of what it looks like, but you really have to see the words swooping and twisting around on the screen to get the full astonishing effect.


Figure 1. RSS Visualizer is a hypnotically cool screen saver.

One of the best things about RSS Visualizer is that it wasn't created in the old-fashioned screen saver way by writing a little Cocoa program. Instead RSS Visualizer was built with no code whatsoever using a remarkable new tool called Quartz Composer. In this article, we're going to take a look at Quartz Composer and get a feel for what it does and how it works.

Quartz Composer is an application included with Xcode Tools 2.0. Quartz Composer lets you play with and learn about the cool Quartz graphics features built into Tiger without having to study APIs or write code. Documents you create with Quartz Composer, called compositions, can be turned into QuickTime movies or OS X screen savers. In this article, we'll use Quartz Composer to create a nifty screen saver without very much effort. It will take a little while to follow all the steps, but I promise the results will be worthwhile.

Here's a friendly warning: Quartz Composer is supercool and highly addictive. Before you start using it, be sure you have several hours (or perhaps an entire night) to dive in and try things out, because you might find it hard to walk away.

And now, let's get started.

Compose Yourself

To begin, go to /Developer/Applications/Graphic Tools and run Quartz Composer. As the program starts up, you might get an alert complaining that your Mac's video hardware won't support all the program's greatest features, but that's OK. If you get the alert, read what it says and click Continue.

Next, you see the New Composition Assistant offering several types of templates to start our composition. For this example, we're going to start from scratch, so just click Cancel to make the Assistant go away.

Use File > New to create a new, empty composition. You see two windows: The one that looks like a checkerboard is called the viewer; and the other is the editor.

On the left side of the editor window, make sure Patch Library is selected. In Quartz Composer, a patch is an individual graphical element or process. Patches are the building blocks you use to make compositions. We'll start this one with a cube. Look down the Name column in the Patch Library until you find the patch named Cube--it's in the Renderer category. Double-click Cube to add a cube patch to the composition. Instantly, if not sooner, a box labeled Cube shows up in the editor. There's also a cube showing in the viewer--you can't see it, because it has no color or texture yet, but you can tell it's there because it's blotting out the grid background (Figure 2).


Figure 2. Our composition starts with a cube. We only know it's there because part of the background is obscured in the viewer window.

Let's be honest about this: our cube is totally boring right now. Why, it's barely a cube at all. But if you take a look at the cube patch in the editor, you see that it has a bunch of values we can use to fill it that should make it far more interesting. Let's start by putting something on the front of the cube. In the Patch Library, find Image Importer (it's in the Generator category) and double-click to add one to the composition.

Note: when you're adding a patch to your composition, there are various ways to find the patch you're looking for. By default, the Patch Library is sorted by category. You might find it more useful to alphabetize the patch names--click the Name column to do that. If you know any part of the name of the patch or category, you can type text in the Search In Libraries field to get instant results. Note that some patches have a bullet in front of their names. The bullet indicates that these patches work best with graphics hardware that's not present on the computer running Quartz Composer, so they will run slowly if used on this computer. (The alert you might have seen when you started up Quartz Composer was warning about this.)

Click the new Image Importer patch to select it. Click the Inspector button in the toolbar (you can also choose Editor > Show Inspector or press Command-I).

In the Inspector, click the pop-up menu and choose Settings.

Face Front

Now you need to find a nice picture to put on a cube face. Click Import From File and navigate to any image you want in almost any format, including JPEG, TIFF, PNG, TIFF, and PDF. For best results, pick an image that's square or nearly so. If you can't find any images you like, look in the current user's Pictures folder. When you locate the image you want to use, double-click it. If you prefer, there's a cool shortcut: Drag an image file and drop it into the Image Data area in the Inspector. The image you picked should appear in the Image Data area.

Now we'll tell the cube to display the image you selected. In the editor, click the little circle next to the word Image in the Image Importer and drag to the circle next to Front Image in the Cube patch. You should see a spaghetti-like strand of yellow wire strung between the two circles or ports (Figure 3). Take a look in the viewer window--the cube now has the selected image on its face. It's not so lame any more.


Figure 3. All my tubes and wires, careful notes, and antiquated notions.

One of the most powerful features of Quartz Composer is its ability to create compositions that don't just sit there--they live, breathe, and move. To make your cube get active, you must change some of its settings repeatedly over time. In particular, if you change the rotation settings, the cube changes its orientation, and you see different parts of it. By changing the rotation values over and over, the cube spins. Quartz Composer includes a patch called an Interpolation that supplies an ever-changing stream of values. Find Interpolation in the patch library and double-click to add one to the composition.

Click the interpolation patch to select it, and then click Inspector to see its values. We want the cube to rotate by varying its orientation between 0 and 360 degrees, so we ask the interpolation to supply values that go from 0 to 360. In the Inspector, click the pop-up menu and choose Input Parameters. Leave Start Value at 0 and change End Value to 360. The Duration value determines how many seconds it takes to complete the interpolation. Set that value to 20. Leave the other values as they are.

Now that you have a source of values from 0 to 360, you need to supply those values to the cube for its rotation. Drag from the Result port of the Interpolation to the X Rotation port of the cube. Take a look at the viewer window. The cube is in motion! You should see the cube tumbling endlessly forward, all faces white except for the front, which still has an image on it. That's pretty neat, but we're just getting started.

Getting To Spin Alley

Because the cube is only changing its x-rotation, we never see its left and right sides. To fix that, we can spin the cube on its y-axis at the same time, and offset the z-rotation a bit (but not change it continuously). In the editor, drag another connection from the Results port, this time hooking it to the cube's Y Rotation. Click the Cube patch, and then click the Inspector button. Go to the Input Parameters panel. In the Z Rotation field, type 90, and then close the Inspector. Now the cube is tumbling, and all six faces eventually come into view.

Quartz Composer is drawing the cube over and over again, but something is missing: You see only one frame of the cube animation at a time. What's happening to the previous frames? As a development and debugging aid, Quartz Composer automatically erases the viewer before every redraw. This automatic erasing won't happen when you use the composition outside Quartz Composer. To see what that will look like, choose Viewer > Disable Background Erasing and take a look at the viewer. You soon get a big smear of cubes everywhere it's been drawn (Figure 4). That's not what you want. To prevent this from happening, you need a patch that erases each old frame of the cube before drawing a new one. Find the Clear patch in the Patch Library and double-click to create one.


Figure 4. The cube draws over itself repeatedly and eventually creates a big ugly mess.

You've added the Clear patch, and now the viewer window is...completely black! Nice job, Picasso! What's gone wrong? Take a look at the yellow numbers in the upper-right corner of the Cube and Clear patches. The number for Cube is 1, and Clear is 2. These numbers represent the rendering layer for each patch. Because the Clear patch was just added, it got rendering layer 2, the last layer in this composition. Quartz Composer draws compositions into an offscreen buffer, then moves the result onto the screen. Compositions are processed in order of their rendering layers. So each time through the composition, the cube is drawn (rendering layer 1), then cleared to black (rendering layer 2), then drawn on the screen! That's why you're seeing only a black screen in the viewer.

To fix this problem, we need to reverse the order: clear the screen first, and then draw the cube. To make this change, Control-click the title of the Clear patch and choose Rendering Layer. Now pick Layer 1. Note that the Rotating Cube's layer automatically changes to 2, and in the viewer window, your cube is back with the background now cleared to black, just as nature intended.

Picture This

Sure, you've got a lovely rotating cube, but five of the faces are blank. That's still some boring cube! We can make it better by putting things on the other faces, using various patches to show how cool Quartz Composer is. Start by adding an image from a Web page. Find the Image Downloader patch and double-click to add one. Open the Inspector, go to the Input Parameters panel, and type http://images.apple.com/home/2005/images/ipodfamilyphoto20050223.jpg into the Image URL field.

Connect the Image port of the Image Downloader patch to the cube's Left Image port. The Web image should instantly appear on the right face of the tumbling cube. (If it doesn't, double-check to make sure you typed the URL correctly, or type the URL of another image on the web.)

The next face is practical: it's going to show the time of day. To make it, add three patches: System Time, Date Formatter, and Image With String. Run a wire from System Time to Date Formatter via their Time ports. Make a connection from Date Formatter to Image With String using their String ports. Finally, connect the Image output from Image With String to the Right Image port on the cube. Now you have the time of day on the right face of the cube.

The time display is kind of messy: it's scaled and hard to read, certainly not up to our fancy-pants graphics standards. Let's fix that. Click Image With String, then click Inspector, and go to the Settings panel. Change both the Horizontal and Vertical Alignment to Center. Pick a different font if you like. Click Fixed Dimensions (in pixels). Fill in an Image Size of 1024 by 1024, and a font size of 200. Ah, the time now looks a lot better.

Showtime

Wouldn't it be cool if one of the cube faces continuously showed a QuickTime movie clip? Let's do it. Add an Image With Movie patch to the composition and open the Inspector. Go to the Input Parameters panel and type the path to a QuickTime movie (for example, /Users/yourName/Documents/myMovie.mov, or download a movie trailer from www.apple.com/quicktime and then type its local path). Connect the Image With Movie patch's Image output to the Cube's Top Image input. Take a look at the viewer--you should see the movie playing on the cube's top face as it rotates into and out of view. Awesome! Figure 5 shows the composition at this point.


Figure 5. The composition now has images on four faces (this picture shows three).

There are still two blank faces on the cube, but I'll leave those to you and your creativity now that you have a feel for how it works. Here are some ideas you can use to dress up those faces:

Use a Host Info patch to display various bits of interesting and obscure information, such as the current user name, computer name, OS version, or CPU load.

Set the background color of the cube faces by using the Inspector to change the Front Color, Left Color, and so on.

Hook an Interpolation patch to an RGB Color patch to continually change the colors you put on the faces.

When you're all done with the cube, it's easy to make it into a screen saver. Just use File > Save As and navigate to the current user's Library/Screen Savers folder. Save the composition into that folder. When you go to System Preferences and click Desktop & Screen Saver, you see your composition at the bottom of the list, available as an official screen saver. Click, select, and enjoy.

Note that when you install Tiger, it doesn't create the user's Library/Screen Savers folder by default. If you navigate there and find no such folder, you can click the New Folder button in the Save dialog to create it.

Like Disneyland, a Quartz Composer document is never truly finished as long as there is imagination left in the world. If you want to play more with Quartz Composer, here are a just a few of the many interesting features you might want to investigate:

Use a Lighting patch to get the nifty effect of shining a light on objects in your composition.

Check out the Clip Library in the editor window to add a pulsating Apple logo or shimmering background.

Add a Mouse controller to use the mouse to slide your objects around on the screen. This won't work in a screen saver because moving the mouse deactivates the screen saver.

Grab a Random patch to feed random inputs to an object, such as the location values for a cube, to make it warp around the screen.

Tiger's RSS Visualizer screen saver, built with Quartz Composer, uses patches that read RSS feeds and display them in a composition, among many other cool features. You can open RSS Visualizer in Quartz Composer and spend hours or days studying it. If you do, you'll get a strong education in the features of Quartz Composer.

For more ideas about what you can do with Quartz Composer, check out the folder at /Developer/Examples/Quartz Composer. Quartz Composer is an amazing tool for creating beautiful images without any programming. Enjoy exploring it - but don't forget to go back to your regular life from time to time.


Scott Knaster lives a glamorous life that consists mostly of sitting in a chair and typing on a keyboard. Scott recently completed his latest book, Hacking Mac OS X Tiger, to be published in July by Wiley. This article is based on material in that book. Scott is a recovering Quartz Composer addict.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Dropbox 193.4.5594 - Cloud backup and sy...
Dropbox is a file hosting service that provides cloud storage, file synchronization, personal cloud, and client software. It is a modern workspace that allows you to get to all of your files, manage... Read more
Google Chrome 122.0.6261.57 - Modern and...
Google Chrome is a Web browser by Google, created to be a modern platform for Web pages and applications. It utilizes very fast loading of Web pages and has a V8 engine, which is a custom built... Read more
Skype 8.113.0.210 - Voice-over-internet...
Skype is a telecommunications app that provides HD video calls, instant messaging, calling to any phone number or landline, and Skype for Business for productive cooperation on the projects. This... Read more
Tor Browser 13.0.10 - Anonymize Web brow...
Using Tor Browser you can protect yourself against tracking, surveillance, and censorship. Tor was originally designed, implemented, and deployed as a third-generation onion-routing project of the U.... Read more
Deeper 3.0.4 - Enable hidden features in...
Deeper is a personalization utility for macOS which allows you to enable and disable the hidden functions of the Finder, Dock, QuickTime, Safari, iTunes, login window, Spotlight, and many of Apple's... Read more
OnyX 4.5.5 - Maintenance and optimizatio...
OnyX is a multifunction utility that you can use to verify the startup disk and the structure of its system files, to run miscellaneous maintenance and cleaning tasks, to configure parameters in the... Read more
Hopper Disassembler 5.14.1 - Binary disa...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
WhatsApp 24.3.78 - Desktop client for Wh...
WhatsApp is the desktop client for WhatsApp Messenger, a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS. WhatsApp Messenger is available for... Read more
War Thunder 2.33.0.135 - Multiplayer war...
In War Thunder, aircraft, attack helicopters, ground forces and naval ships collaborate in realistic competitive battles. You can choose from over 1,500 vehicles and an extensive variety of combat... Read more
Iridient Developer 4.2 - Powerful image-...
Iridient Developer (was RAW Developer) is a powerful image-conversion application designed specifically for OS X. Iridient Developer gives advanced photographers total control over every aspect of... Read more

Latest Forum Discussions

See All

Gorgeous Tactical Puzzle Game ‘Howl’ is...
Following its release on PC and Nintendo Switch this past November, and it’s arrival on Xbox and PlayStation back in January, publisher Astragon Entertainment and developer Mi’pu’mi Games are now bringing their super stylish tactical puzzler Howl to... | Read more »
Best iPhone Game Updates: ‘Shoot the Moo...
Hello everyone, and welcome to the week! It’s time once again for our look back at the noteworthy updates of the last seven days. It feels like a bit of a dry spell this week, at least in terms of really interesting updates. I mean, I found some... | Read more »
Celebrate Phobies spooky second annivers...
Get ready to have that classic song stuck in your head, as Phobies celebrates its second anniversary with the release of its latest update; Birthday Bash, Monster Mash. Starting March 5th and lasting for four weeks, it will be a month of... | Read more »
‘Dissidia Final Fantasy Opera Omnia’ Sto...
Square Enix finally shut down Dissidia Final Fantasy Opera Omnia (Free) on iOS and Android last week following the end of service announcement back in November last year. Following the game shutting down, Square Enix | Read more »
‘Monster Hunter Now’ Is Celebrating the...
Niantic and Capcom have begun celebrating the 20th anniversary of Capcom’s best franchise from today inside Monster Hunter Now (Free) on iOS and Android for a limited time. | Read more »
New ‘Warframe Mobile’ Update Adds 60fps...
Warframe Mobile (Free) launched worldwide on iOS just under two weeks ago. I’ve been playing it for review across multiple iOS devices, but have also been picking it up on Steam Deck and Switch to compare. Right from launch, I was impressed with... | Read more »
Passionate About Fidget Toys – The Touch...
In this week’s episode of The TouchArcade Show we kick things off with some passionate discussion about… fidget toys? For some reason? We quickly change gears to talk about the card-based rogulike Balatro, which we’ve both been playing and enjoying... | Read more »
TouchArcade Game of the Week: ‘Flying Ta...
For me Hexage is one of those developers that harkens back to the early days of the App Store and really the beginnings of iPhone gaming. I have spent many collective hours playing the likes of Totemo, Radiant, Radiant Defense, EVAC, Reaper… the... | Read more »
SwitchArcade Round-Up: ‘Ufouria 2: The S...
Hello gentle readers, and welcome to the SwitchArcade Round-Up for March 1st, 2024. In today’s article, we’re looking at the remaining releases of the week. There are a few really good ones today, but the bin bunch certainly isn’t going home hungry... | Read more »
Steam Deck Weekly: Reviews of PowerWash...
Welcome to the first Steam Deck Weekly of March and this week’s edition is bigger than usual. I was a bit unwell last week and had to push some reviews to this week. Alongside that, there have been many notable announcements, releases, and new Steam... | Read more »

Price Scanner via MacPrices.net

Deal Alert! B&H is now selling 13-inch M2...
B&H Photo has 13″ MacBook Airs with M2 CPUs and 256GB of storage in stock and on sale for $100 off Apple’s new MSRP, now only $899. Free 1-2 day delivery is available to most US addresses. Their... Read more
At $999, Apple’s 13-inch M2 MacBook Air is th...
With today’s introduction of the new 13-inch M3 MacBook Air for $1099, Apple dropped prices on the previous-generation 13-inch M2 MacBook Air to $999. At the same time, Apple discontinued the 13-inch... Read more
Apple discontinues 15-inch M2 MacBook Airs, d...
With today’s introduction of new M3-powered 15″ MacBook Airs, Apple has dropped prices on clearance, Certified Refurbished, 15″ M2 MacBook Airs to a new low of $1019. These are the cheapest 15″... Read more
Price Drop! 13-inch M2 MacBook Airs at Apple...
Apple has dropped prices on Certified Refurbished 13″ M2 MacBook Airs to a new low of $849. These are the cheapest M2-powered MacBooks for sale at Apple. Apple’s one-year warranty is included,... Read more
Apple finally discontinues the 13-inch M1 Mac...
With the introduction of M3-powered 13″ MacBook Airs today, Apple has dropped prices on clearance 13″ M1 MacBook Airs, Certified Refurbished, to $759 for 8-Core CPU/7-Core GPU/256GB models and $929... Read more
Updated Apple iPad Price Trackers
Our Apple award-winning iPad Price Trackers are the best place to find the latest information on iPad sales and deals. We track prices from 20+ Apple retailers, including Apple, Amazon, Best Buy,... Read more
Updated Apple MacBook Price Trackers
Our Apple award-winning MacBook Price Trackers are continually updated with the latest information on prices, bundles, and availability for 16″, 14″, and (recently-discontinued) 13″ MacBook Pros... Read more
Mac Studios with Apple M2 Max and M2 Ultra CP...
B&H Photo has the standard-configuration Mac Studio model with Apple’s M2 Ultra CPU in stock today and on sale for $300 off MSRP, now $3699 (24-Core CPU and 64GB RAM/1TB SSD). B&H Photo has... Read more
Extended: Switch to Verizon and get the Apple...
Verizon has the iPhone 15 on sale for $0 per month when you add a new line if service. Discount is applied to your account monthly over a 36 month term and is valid for the 128GB model. For the first... Read more
Select 16-inch M3 Pro and M3 Max MacBook Pros...
B&H Photo has select 16-inch M3 Pro and M3 Max MacBook Pros on sale for $250 off MSRP. Their prices are the lowest currently available for these configurations. Free 1-2 day shipping is available... Read more

Jobs Board

Teller Part Time *Apple* Valley MN *Apple*...
…is not eligible for Visa sponsorship **Posting Location:** + 15574 Pilot Knod Road Apple Valley, MN 55124 @RWF22 **Posting End Date:** Job posting may come down Read more
*Apple* End User Support Specialist - North...
…that they are performed. + Responsible for support of all College owned Apple computers, mobile ios devices, and peripherals, and for diagnosing and resolving Read more
Omnichannel Associate - *Apple* Blossom Mal...
Omnichannel Associate - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Apple Read more
Teller Part Time *Apple* Valley MN *Apple*...
…is not eligible for Visa sponsorship **Posting Location:** + 15574 Pilot Knod Road Apple Valley, MN 55124 @RWF22 **Posting End Date:** Job posting may come down Read more
Nurse Anesthetist - *Apple* Hill Surgery Ce...
Nurse Anesthetist - Apple Hill Surgery Center WellSpan Medical Group, York, PA | Advanced Practice Providers | Certified Registered Nurse Anesthetists | FTE: 1 | Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.