My name is Alessandro Sabatelli, and I'm a motion graphic artist here at Apple. So in today's session, Motion Graphic Design Using Quartz Composer, we're going to focus on Quartz Composer from a designer's point of view. So just basically, we're going to take an overview of what Quartz Composer is. Then we're going to look at how you actually create content for Quartz Composer, and then a few further examples of how it's used.

All right, so what is Quartz Composer? Quartz Composer is an extensible technology designed for, or primarily designed for rendering graphics. It was introduced into the operating system as part of OS 10.4, also known as Tiger. And so what that means to you as designers is that you don't really need any special plug-ins or downloads in order to get it to work, it just works. Now, in order to create content, you'll need to download the developer tools. And with those tools, you'll get a full featured graphical editor. Another important aspect of Quartz Composer is that it wraps a great number of other technologies found within OS X.

So let's take a look at some of these technologies and what that means to you. So these technologies can really be broken down into three main groups. We have graphics, communications, and input devices. So for instance, in the graphics area, we have things like Core Image for filtering images. We have OpenGL for 2D and 3D graphics. In the communications front, we have things like RSS and XML. And now in Leopard, we also have OSC, among others.

And then for input devices, we have your basic mouse, keyboard, but also things like video input, et cetera. Now it's important to note that now that Quartz Composer is extensible, if a technology that you're interested in doesn't fit into one of these categories or isn't drawn in one of these little bubbles, then you can go ahead and implement that yourself, or ask on our developer list, and maybe someone will help you out.

So what I mean by the fact that Quartz Composer wraps these technologies is that whether you're a programmer or a designer, you don't actually have to learn all the intricacies of working with these technologies. And so that means you don't have to be proficient in Objective-C and really understand the technology that you're working with. You really just have to understand the capabilities that you want to take advantage of, and then you can pretty easily employ that within the Quartz Composer environment.

So just briefly, some of the places that Quartz Composer is integrated. We have things like Photo Booth and iChat. And Quartz Composer is used to apply all the filters to your input images. So if you've had a chance to play with Photo Booth, you'll know what I'm talking about. And all of these filters actually now come from the system-wide composition repository. So it's very easy to, for instance, leverage all of the filters that you're familiar with in Photo Booth within your own applications.

Alessandro Sabatelli Then we have iMovie HD and Podcast Producer. And so, for instance, these two applications use Quartz Composer to render graphics in both a real-time and a non-real-time way. Alessandro Sabatelli So, for instance, iMovie HD, all of your little themes, which are beautifully rendered in real-time, are also rendered out in non-real-time to HD. Podcast Producer using Quartz Composer to do things like lower thirds, titles, etc.

QuickTime Anywhere you can play back a QuickTime movie on OS X, as of Tiger, you can play back a Quartz Composer composition. If you want to use that content on Windows, you could always render it out or export to QuickTime and then export as a frame sequence. Alessandro Sabatelli QuickTime Anywhere you can play back a QuickTime movie on OS X, as of Tiger, you could always render it out or export as a frame sequence.

Of course, there's screen savers. Definitely a lot of fun. We have some new ones in Leopard. And now in Leopard, we also have integration with iTunes. And so now you can create music visualizers using Quartz Composer. And we'll take a look at that in a little bit. So how is content created? So as I mentioned, Quartz Composer is integrated into the operating system, but in order to create content for Quartz Composer, you'll need to download the developer tools. And once you do that, they will appear in developer applications. That's where you'll find our main application.

This is our main workspace here on the left, and our viewer on the right. So you would define content in the workspace, and then it would get rendered in our viewer. So let's take a look at just a simple example of how you define content in Quartz Composer. So if we can go to demo, please. Nice. All right, so as I mentioned, developer applications.

Here is Quartz Composer. So you'll notice on first launch, a whole bunch of windows will pop up. The first thing to note is the release notes. So if you're familiar with Quartz Composer on Tiger, this is going to tell you what's changed, what's new. For a more in-depth look at some of these changes, you can go to the session later today, Mastering the Quartz Composer Editor.

And if you are new to Quartz Composer in the Help menu, you'll see the Getting Started. And that'll just, it's some documentation just to get you quickly up and running. So for this first example, in our template picker, I'm just going to choose a blank composition. Get cleaned up here a little bit.

And so you'll notice three main windows. We have our workspace, which is this gridded area here on the left. Again, this is where you define content. We have our viewer window, which is this gray and white checked window on the right. This is where that content is rendered. And now, new in Leopard, we have a patch creator. And this is where you actually search for patches and add those to your workspace. So I'm just going to find a clear patch.

So basically, for those of you that are new to Quartz Composer, a patch can really be thought about as just kind of a function. It's a basic building block within Quartz Composer. And these functions, or patches in this case, can have inputs and/or outputs. And oftentimes, they'll act on those inputs, process some data, and produce some output.

So this first type of patch here, as denoted by the pink top, is known as a consumer patch. And consumer patches generally consume data, so they'll have some inputs on the left. And generally, consumer patches will render to the screen. So in this case, the clear patch is actually clearing the screen once per frame, which is a common concept in computer animation. Alessandro Sabatelli And also, consumer patches have an order in which they're executed.

So here at the top right of our clear patch, we have the number one, meaning this is being executed first. So I'm just going to add a particle system. Most of you are probably familiar with a particle system in some form or another. In this case, we simply have a bunch of white squares that are flowing around on screen.

And our particle system patch allows us to define some of these parameters holistically over the particle system. So I'm just going to add a little image to our particle system to get started. So I'm just going to drag this image from the Finder and directly into our workspace. And what that did was that actually created another patch. Here it's titled Particle Ball.

And what happened was, by dragging it from the Finder into the Quartz Composer workspace here, Quartz Composer created a new patch called the Image Importer Patch, copied the data from the Finder directly into our composition. And this created the second type of patch in Quartz Composer known as the Processor.

So I'm just gonna drag from my image output port on my particle ball to the image input port on my particle system, and you'll see a whole bunch of Little balls flying around on the screen. You'll notice they have a black border. This image actually does have an alpha. So if I just change my blending mode from replaced to over, you can see we now have proper transparency.

So now we have a bunch of little bubbles kind of flowing upwards. It's kind of fun. So the next thing I'm going to do is add a little bit of interactivity to our example. And I'm going to do that just by adding a mouse patch.

The mouse patch is the third type of patch found within Quartz Composer, or illustrates the third type of patch, and this is known as a provider. And providers generally provide data from an external source. So again, things like the keyboard, the mouse, video input, etc. So I'm just going to connect my X position and Y position from my mouse to my particle system. And you'll notice that I can now drag my little particle system around the screen.

Alessaandro Sabatelli: I'm actually quite enjoyable. Alessaandro Sabatelli: But unfortunately, I can't let go. That's because I'm directly driving these parameters with my mouse position. Alessaandro Sabatelli: And so the behavior that I'm really looking for, what I'd like to be able to do is drag the particle system around when I'm holding down the left mouse button.

Then when I release that left mouse button, I'm going to leave the particle system there. So basically like a typical drag and drop kind of experience. And one way you can achieve this effect in Quartz Composer is what is known as the sample and hold patch. And the sample and hold patch will simply remember a value when told to do so.

I'm just going to get a sample and hold. And I can duplicate that, one for the X, one for the Y, simply by holding down the Alt and dragging. Though I can just undo that, select that, and duplicate directly. So I'll just connect my X and Y position of my mouse to my sample and hold. And the left mouse button to the sampling input of each of the sample and holds. And so now I can actually drag, release, and place my little particle system.

So there's actually one other type of patch in Quartz Composer that you should be familiar with, and this is known as the macro patch. And what the macro patch does is it simply allows you to group patches which are similar or have similar functionality. Alessaandro Sabatelli: And it also allows you to kind of clean up your workspace, which is definitely key as things become more and more complicated. Alessaandro Sabatelli: So in order to illustrate that, I will just pick my two sample and hold patches. And in our menu bar, we have a Create Macro button. So I can just click on that. And Quartz Composer created a new patch, which is called Macro Patch.

And Macro Patches are denoted by their square corners. So this macro patch has three inputs corresponding to the X, Y, and left mouse button of our mouse patch, and outputs two values, the X and Y position, which is controlling the X and Y position of our particle system.

So it's important to note that what I've actually done is I've just created a hierarchy within our workspace. So we have our main workspace, or the top level of our workspace, which is known as the root macro patch. And you can actually see that in our new hierarchy browser at the upper left-hand corner, where it says root macro patch. And so if I delve into our macro patch by simply double-clicking it, You'll notice at the upper left hand corner it says root macro patch and then macro patch. We're now inside of that macro patch. You'll notice we have our two sample and hold patches.

And Quartz Composer has also created this Boolean splitter here on the left, which corresponds to the left mouse button. And so that the Boolean splitter simply takes a value from its input port and provides it on its output port. In this case, it's providing that left mouse button to both sampling inputs of our sample and holds.

It's also important to note that there are these colored or these solid circles for inputs and outputs, and these indicate that these values are published to the top layer. So I can just go back to our root macro patch by simply clicking on the root macro patch here in our hierarchy browser. Alessaandro Sabatelli: As a good practice, I'm going to go ahead and rename our macro patch.

You can simply do that by double-clicking on the title bar of your patch. Here's our sampled position. And as another good practice, you're going to want to go ahead and rename your inputs and your outputs. And you can do that now in Leopard by using the Patch Inspector. And going to published inputs and outputs. And I can just change the names of my published inputs. So I'm really just doing this to kind of hopefully reinforce some best practices. And then my exposition for output. Alessaandro Sabatelli: So this is kind of fun.

We can make this a little bit more fun. I can go ahead and just maybe modulate the color of my little particles. So HSL color. It's a little garish, but you get the idea. And then say, for instance, I could just pick a random hue every frame. By grabbing a random patch, and there we have our little colored particle system.

So this is just a very basic example, just to kind of give you guys a little bit of a tour of how you create content in Quartz Composer. Let's take a look at actually making a more interesting or fun example. So for this next demo, we're going to take a look at creating a music visualizer for use in iTunes.

So I'm going to create a new document, and this time I'm going to create a document from the Music Visualizer template. And you'll notice here below that we have

You're not actually creating music visualizers for iTunes. You're just creating music visualizers that can be used really with any application which is going to communicate with our composition using predefined inputs.

So as you recall, I had mentioned that our composition had what was known as a root macro patch. You can actually publish inputs and outputs from this root macro patch, and this is really how your applications can communicate with different compositions. So in this case, our music visualizer is going to have a bunch of inputs which are predefined, and this is how iTunes is going to send data directly to our composition. Choose Music Visualizer, and you'll notice that we have this nice little gray gradient in our viewer.

And here are the required inputs for our Music Visualizer protocol. In this case, the audio peak and the audio spectrum. Alessaandro Sabatelli: And then we also have some optional inputs, which are in this case the track signal, track position, and some track info. And so you'll notice that nothing's actually happening. And that's because we'll need to get some data coming from iTunes and, in fact, some music actually playing. So I'm going to go ahead and open iTunes.

And as this is, or as Leopard is still in beta, we're still working on integration with iTunes. So in order to actually get the data from iTunes into the Quartz Composer editor, what you'll just need to do is have a Quartz Composition playing as a music visualizer within iTunes. So I'll get some music playing. So I just have a simple composition which displays our little icon and a heads up display.

So this music was actually created by an employee here at Apple. His name is Justin Maxwell. I hope you enjoy it. And if you do so, please take a look at some of his other work. So what we have here is just our simple gradient and a 16 band spectrum going from lows on the left to highs on the right, reds to greens. And really in Quartz Composer, what you're doing is you're defining a data flow. So I can show you a little bit of what's going on here. So we have our data coming in on that required audio spectrum port.

And we have our 16 members coming in in structure, going from 0 through 15. Each of these is a number. And these numbers are actually just driving our little bars. Let's make a little space here. So the first thing that I'm going to do is add a little character that I've created for this year's WWDC.

Alessaandro Sabatelli: And I'm sure you can probably guess who that is. As you can see, I'm going a little gray. Hopefully that's not from overwork. So here's my little character that I built in a style that mostly, or most of you are probably familiar with in some form or another.

And what you'll notice is that when I went full screen, all of our bars, our text, everything is still very sharp. And that's because with Quartz Composer, you can actually define resolution independent content. This is definitely something that's becoming more and more important as we start to target different devices.

So here's my little character. I've rigged him up so I can actually control him. So let's see, so for instance I control his position in z space. I can make him smile. Blink. Get him to nod his head to the music.

And again, if you get a little lost, we have our little hierarchy browser in the upper left-hand corner. Right now I'm inside myself, interestingly enough.

Alessaandro Sabatelli: And so what I'm doing is I'm rendering out an image of my little character.

So within my actual character, basically I'm just kind of building him up out of little pieces that I can control. So the first thing that I do is I draw his legs, and then I draw his torso, which includes the little hands. His head, which is just really a little head drawn on a sprite that I can control the Y position of.

In order to do this, I just have a little reference character that I display, and then I take all of these little pieces and line them up, and then I can animate them. So here's my little reference character, which is a little disturbing. Okay. So now that you kind of see a little bit of how the structure is employed in order to kind of create this little character, we'll take a look at actually animating this with the music.

So, just as a side note, generally what I've found when I'm creating abstract characters that are being driven by music, I often find that I'm just generally inundated with a little too much data. So in this case I have 16 bars of audio, or 16 bands of audio, but I don't have 16 parameters that I want to directly drive from low to high.

So what I generally do is I generally reduce that data. So in this case what I've done is I have broken this data up into three buckets: lows, mids, and highs, and then I use that to drive higher level parameters. So what I did was I simply dragged my Simplify Audio composition, again, it really can be thought about as just a macro patch, dragged that directly into my new composition, and by doing that it just copied the contents of that original composition into my new composition.

And I'm just going to connect that there. And then I have some automation. So generally what I'm doing here is simplifying the audio, then using that to drive higher level parameters, and those will drive my character's parameters here. So I'm just going to rig him up. So in this case, he's going to smile anytime there's any bass, as you could imagine. He's going to blink any time there's a high level noise that breaks a certain threshold. He'll start nodding his head to the music. I'll get him to pump his little fists. This is kind of my favorite part here. It's kind of like my little break off.

So if this was a club that I was going to be going to, hopefully there'd be better visuals than these little bars on the floor, even though that would probably be pretty cool. So I'm just going to go ahead and delete our little audio spectrum. You can see that he's still moving with the music. So I have this kind of like abstract character here. This is being drawn on top of everything. I'm just going to move that behind and connect that up with the music.

So now here we have myself, I guess, standing in front of this abstract colored character behind me. Again, I'm doing the same thing. I'm just breaking that audio down into like lows, mids, and highs, and using that to drive higher level parameters. So keeping with tradition, for those of you that saw last year's session or were able to attend, we introduced Peter Graffagnino, our director of the interactive media group at Apple, into our composition.

And so I'm going to go ahead and do that again, just because I couldn't resist. So here we have Peter. He's kind of looking a little sad, and it's probably because he's not hearing the music. So let's go ahead and connect him to the audio. And so there we have our final composition.

All right. So you can imagine there's a lot of fun things that you can do. And again, now we've just created a composition which can simply be dropped into iTunes and sent to all your friends and sent all over Apple, for instance. So if we can go back to slides. All right, so now you have an idea of how you actually create content using Quartz Composer and some examples of how that content is used.

Let's take a look at some further examples. So we just took a look at music visualization using Quartz Composer. And so that is data coming directly from within the system. So for this next demo, we're going to take a look at visualizing data coming from the web. So what I did was I chose Twitter as my example of data to visualize coming from the web. For those of you that are not familiar with what Twitter is, it's basically a social messaging service which allows you to stay in touch or communicate with what you call friends in Twitter. These are basically just contacts that you decide are your friends.

Alessaandro Sabatelli: And it's actually a pretty interesting service because there's some nice constraints on it, and it's really easy to communicate with. So for instance, you can post the minutiae of your daily life to Twitter using, for instance, the main web interface. You can also use SMS, so via your mobile phone. You can use instant messenger, and you can also use web services.

So what I found in using Twitter, from my point of view, is that now that I have so many friends, Especially considering I now have it hooked up via SMS, I seem to be getting these posts every 10 or 15 minutes, 24 hours a day, seven days a week.

And it's not really going very well. I'm basically just being inundated with tons of information. And what I found is that almost every visualization or user interface that interacts with the Twitter service displays all the information coming from Twitter in a linear fashion. So in this case, we have the Twitter home page.

And so with all of my friends, this list can get very quickly saturated. So here we have a few other examples. Some of them can be more attractive than others. Over here on the upper right, we have one which is using Quartz Composer in its menu bar to display a little background animation. But you can see that they all basically display this information in a linear fashion. And as I mentioned, it's just complete information overload.

One example that I did find is called Twitter Vision, which is actually really interesting Google Maps and Twitter mashup. And what it does is that people that post what we call tweets to Twitter and include localization information, this is actually displayed in 2D and also in 3D in this case on a little Google Earth. So here we have Stephen Colbert, and he's wondering what he can't do with Quartz Composer. Alessaandro Sabatelli: I guess you'll have to wait to see.

So what I've done is I've created a little visualization of what I call the Twitterverse. So if we can go back to demo, please. So here is my Twitterverse. That's me at the center. Of course, I would be at the center of my own Twitterverse. And these are my friends surrounding me in the periphery.

What I've done is I've gone ahead and tried to make the friends that I'm most interested in more easily identified. So in this case, they're larger, they're brighter, they're closer to me. And then I have some friends on the periphery, and they're darker and further away. Alessaandro Sabatelli: For those of you that are familiar with Time Machine, you might recognize our little background here.

So the background that we built in last year's hands-on session, gone ahead and recycled that. So we have this background layer, which is being animated in real time using Core Image, among other technologies. And I'm also using Core Image to kind of process our images, and we'll take a little look at that in a second.

All right, so let's take a look at how this was actually built. So here's my composition. It's basically broken up into two main areas. On the left, I have all of my data coming from Twitter that I'm processing. And then on the right, what I'm doing is I'm just kind of displaying that information.

So the data that I end up getting from Twitter and processing, I end up getting my user image. Alessaandro Sabatelli: I've designed a bunch of my friend images, which I've then packed into a structure for display using an iterator. And then my friend tweets, which I actually didn't show you, but I can go ahead and display what my friends are saying at any given time.

So let's take a look at how you actually get data from the web using Quartz Composer. So the Twitter service requires that you authenticate or log in. It's not a very sophisticated service, but in this case what you basically do is you create a URL and post that to Twitter.

And once you do that, you'll be authenticated for a certain amount of time. So in this case, just a note for this demo, All of the data that you're seeing here is local. And the reason, as most of you can imagine, is not that I don't trust all of you, but I definitely don't trust some of you.

So here I construct my username and password, string, which I won't show you. And then I just go ahead and post that to Twitter using our XML Downloader patch, which is also new in Leopard.

So basically, once you've logged in or authenticated, then I can go ahead and get information about myself and my friends from the Twitter service. So I get my user info, and that includes the user image that I had mentioned earlier. Let's see. It's here. That's kind of a little bit of an interesting process. So again, I download my XML using our XML downloader patch.

And basically get the URL for that image. Then I use our image downloader patch to download that image. And once that image is downloaded, I then use Core Image to take this image, which, as you can see here, is 48 by 48 pixels square. Alessaandro Sabatelli: I then blow that up using Core Image to 256x256 square, and I add these nice little rounded corners and this little highlight. So I basically create this little badge of my character. Alessaandro Sabatelli: And this allows me to overcome the icon limit size of 48x48 inherent in Twitter. And so again, I can just go full screen, and I can still get some nice quality here.

Okay, so my friends data, it's a little bit more complicated there because in this case I have, I don't know, 20 some odd friends or friends. And I want to do the same thing to all of these images. So what I'm doing here, I won't really get too deeply into it, but I can just kind of explain it to you on a higher level.

What I do is basically the same thing that I just did for my first user image. I get my friend's image URL. I go ahead and download that image. I then process it using core image. And then I pack that into a structure. And you can now do that in JavaScript inside of Quartz Composer for Leopard.

And once I've packed that into that structure, I can then, using feedback, re-signal using a new URL for my friend image. I can then re-signal another download, grab the next friend's image, process that, pack that into the structure, and continue basically going down the list and downloading all of my friend's images and processing them.

So I can actually show you that in progress. First, I'm going to show you this. This looks like a lot of connections and this big patch. So what I'm actually doing here is I'm just getting a whole bunch of data, or a whole bunch of progress data, from all of my XML downloaders and concatenating that into a string.

Alessaandro Sabatelli: And this is really just going to give me some debug info. So generally when I'm dealing with an external service, I like to know what's going on because, so for instance, Twitter could be down, and I could just be bashing my head against the desk or something like that.

So I can just go ahead and turn that on. Here's my debug info. Alessaandro Sabatelli: So if I were to start this over, you can see very quickly, because it's local, it downloaded a whole bunch of images. So if you look on the right-hand side, You can just see a bunch of numbers changing, things like that. So this is going to tell me each step of the way what's going on with the Twitter service.

So once I have all of my friend images pre-processed, I do the same thing for my friends' tweets. So these are going to be updated periodically. These are the posts that they're actually posting to the Twitter service. I go ahead and grab those and pack those into a structure as well. And so then we have all of the data that we actually need.

So on the rendering side of our composition, the first thing I'm doing is I'm clearing the screen. Then I'm drawing our galaxy, which I can go ahead and disable, and then re-enable. So that's our little galaxy. And there's this little input here, and it's called Start Supernova. So basically, once my data has been downloaded, then I indicate to this macro patch that it can start its big bang or its explosion, its supernova.

And the way that this really works is once I tell this macro to start the supernova, I start a stopwatch, which is really the time base for this macro patch. And using the new timelines patch in Leopard, I can create an introduction animation for our composition. And so these are the timelines. These are the timelines that I'm using to actually do that. Alessaandro Sabatelli: I can show you that again.

And that's that whole kind of expansion of the galaxy, the stars flowing outwards, that little lenticular halo on the outside. Then I go ahead and draw the little stems coming from my tweets, which I want to draw underneath my friend images. I draw my friend images using an iterator.

Then I actually draw the friends' tweets on top of those in these little bubbles that you see here. Then my user image at the center, and then a little bit of a glow on top to add a little bit of radiance to the composition. And that about covers it. All right, if we can go back to slides.

So that shows you a little bit of how you can interact with data coming from the web, and how you can actually use Quartz Composer in more of a passive visualization sense. But you can imagine extending something like the Twitterverse by adding it to your application, adding it to a widget.

And in so doing, you can add a little bit more interactivity to it. So say, for instance, you could click on your main user icon, drop down a little bubble, post your little tweets. You can even move a step further. Say, for instance, clicking on your friends directly, dropping down a little bubble, posting tweets directly to them. Say, for instance, you could visualize communication between friends, so inter-friend communication, drawing little arcs, little lines.

You could even use it as a source of data mining. So for instance, you could use it to do friend intersections to find new friends in the Twitterverse. And so you can visualize those, say, perhaps on the periphery of your Twitterverse, and then just simply drag those into your Twitterverse. Or if you have one of those offending friends that seems to be a little bit too detailed with the minutia of his daily life, you could just drag them out of your Twitterverse.

So one thing to note is that if you were then to take this visualization and drop that into a--

All right, so let's take a look at some further examples. This one is probably of particular interest to you as designers that are new to Quartz Composer, and that's the use of Quartz Composer within our Genius Bars. So we use Quartz Composer to display within our Genius Bars times and some real-time data. So for instance, when the next appointment is, and this really helps people maximize their time within our stores.

And so what we do here is we actually have pre-rendered an HD movie that we use in the background, and this allows you to leverage the skills that you already have as designers. And then we simply overlay some text, which is the information that's coming from an RSS feed.

So here's a shot of some of the pre-rendered graphics that we're displaying behind our real-time text. This is really a great way in which you can use Quartz Composer very quickly. And again, it allows you to leverage skills that you probably already have, let's say, in Motion, and then use Quartz Composer on top of that.

Another example of some real-time signage is the signs here at WWDC. So, for instance, all of those 30-inch monitors that are displaying agenda information are using Quartz Composer. So here we have some examples. And it allows you to really easily lay out a whole bunch of information and update that in real time.

Another example is the Time Machine. So as you saw on the Twitterverse, I was doing that little background, something that we also covered in last year's hands-on session. And so Quartz Composer was really integral in building the time machine. It allows you to prototype a lot of ideas as designers and really play around with them. Before, you would have to program something, change a value, go ahead, recompile, test it out, see how it looked. Using Quartz Composer, you can very simply just build out a structure, and as you're building, see the contents rendered in real time.

And then, you can get approval for what it's actually going to be, because that's what it's going to be. You don't have to try to explain something to somebody in some kind of diminished way, particularly with interaction. You can just kind of show them exactly what it's going to be, get approval, and go from there.

So here's our time machine. And what we did for the actual shipping product is, we moved all of the windows and stuff like that into Core Animation for better integration within the Finder, but we left the background in Quartz Composer. And the reason being is because Core Animation is really good at displaying contents, but in this case, Quartz Composer is really good at generating those contents. So again, we have Quartz Composer here in the background and all of our windows in the foreground.

So here's a little video of our time machine in action. And so for instance, interactivity like this is fairly easy to prototype in Quartz Composer. And you can do things like, say, change the bend in all of the windows, change how the stars move, the gas clouds, colors, things like that. You can also prototype the little menu on the right, see how the bubbles feel, et cetera.

Next example is the Apple TV. So Quartz Composer is used on the Apple TV for the music visualizers and also our slideshows, and was really integral as well in prototyping a lot of the UI. Makes it really easy, again, to try out a whole bunch of different ideas and present those, and go really from your prototype directly to a production model.

Another example being iMovie HD. So in iMovie HD, all of those beautiful themes that we've created were rendered in Quartz Composer. As I mentioned, they're rendered in real time so you guys can see what exactly is happening, and then rendered out to disk at HD quality. So a few other things to note.

Quartz Composer is really great at generating adaptive content. And what this means is that you can actually create content which is going to adapt to the environment in which it's being displayed. So there's actual patches found within Quartz Composer that give you information about this environment. Say, for instance, is core image supported, other things like that, how many CPUs you have, CPU load, et cetera. And you can use this information to dynamically scale and adapt your compositions to fit within that environment.

So for instance, you could take advantage of the latest and greatest hardware out there and make these beautiful compositions. And at the same time, you can have the same composition running on older or lower end hardware. And so this is really important if your target is someone other than yourself, and you're producing a product that's going to be released to the general public.

Also, as I mentioned, it gives you access to a large number of data sources. So this is everything from RSS and XML that you saw on the Twitterverse to things like external devices, your mouse, your keyboard, video input, etc. And again, it's important to note that Quartz Composer is extensible. So whether you're a programmer yourself or you work with programmers or you find someone nice enough on our developer list to actually implement something for you, you can extend Quartz Composer.

And now in Quartz Composer, we also have some local networking capabilities. And these allow you to have compositions which communicate with other compositions on the local network. So for instance, you can imagine you have a lab filled with computers. You want to generate a screensaver. You can have these screensavers actually talk to each other and create all kinds of mayhem.

So just as a final example, one thing that we've gone ahead and done for you as developers is we've created what is known as the QC display wall. And this is on display downstairs within our graphics and media lab. And what this is, is this is a high resolution multi-monitor display system.

And what we've done is we've generated the code for this using all public APIs, and we've given the code to you free as part of the developer examples. And what this does is it simply takes a composition and tiles it out, so in this case, to nine Mac Pros, each with two 30-inch monitors, being coordinated by one master Mac Pro, which is setting up all the monitor positions, et cetera, and tiling out this composition. So what I do is I would invite you to come down to our lab, bring your favorite compositions, and we can help you get them up on the wall and see what they look like in all their glory on this massive display.

All right, so for more information, you can contact Alan Schaffer. He's our graphics evangelist. Of course, we have tons of documentation, sample code, other resources online. And again, our developer mailing list is really active. We have about a thousand members, and I invite you to become one of them. Oops.

So there are a few other sessions which may be of interest to you. For instance, with regards to the Twitterverse and Dashcode, you might want to go to Unlocking Potential of Dashcode. Later this afternoon, we're going to explain all the new things inside of Quartz Composer in the Mastering the Quartz Composer Editor session.

GLSL, for those of you that are interested, it's really powerful. Then tomorrow morning at 10:30, we have Using Quartz Composer in Your Application. And then we'll go further into actually how the display wall was built, along with a bunch of other really interesting examples of how you can push Quartz Composer. And then there is Create Stunning Effects with Core Image. Labs, again, I invite you to come down and play with our display wall.

So in closing, Quartz Composer is really part of the operating system. And again, this means you don't need any special downloads, no plug-ins, it just works. Again, in order to create content, you'll need to download developer tools, but then you'll get our super sexy application, and you can make all of your awesome graphics using it. It's also very easy to integrate into your applications. So again, the compositions that you build can be thought about as macro patches. You simply publish inputs and outputs from these compositions, and then you can, for instance, use bindings to communicate directly with your composition.

Quartz Composer is extensible. This was the main request that we got for Quartz Composer. We've gone ahead and implemented that. So we look forward to seeing a whole bunch of new patches and different ways in which you can use Quartz Composer. And then finally, and this one is probably the main focus of today's session, is that Quartz Composer really opens up a lot of new doors and a lot of new applications to us as designers.

So for instance, we can now approach a whole array of new problems and approach this new problem space as designers without actually having to be, again, proficient in all of these different technologies. You simply allow Quartz Composer to simplify the usage of these technologies, and now you can create, say for instance, real-time signage, real-time data visualization, installations, etc.