An Introduction To Quartz Composer 0


An Introduction To Quartz Composer


After my recent post about cool hidden screen savers I have been fiddling with the Quartz Composer more and more. This post will serve as an introduction to the application as well as the pre post to a tutorial that I will posting in the next couple of days. As with all of the images posted on this site you can click any of them to see a larger version, it helps understand some of the explanation given. Before we begin if you want to learn more about Quartz Composer I recommend reading Learning Quartz Composer.

If you haven’t got Quartz Composer installed and want to run through the app while you are reading this, you need to pop in your installation disk that you got with your Mac. Head over to the optional installs, Xcode Tools and install the Xcode tools package. The will install all of the Xcode tools, 2.5Gb of it. If you don’t want all of the extras and just the application, look through the packages folder for Developer Tools .pkg . This should hopefully install Quartz Composer in /Developer/Applications.

The main area within Quartz Composer (Quartz or QC from here on), is the larger gridded area and the tool bar at the top. It will look different in older versions but the application works just the same. As well as this things might be called and look different but they mostly do the same job.

The grid area is designed to hold all of your Patches. Patches are the building blocks of a Quartz file and visualization. Quartz is designed to make it very easy to build applications that are visually appealing and complex. You can do a whole range of things with it as I will describe in up coming tutorials.

Each of the Patches will be placed on the grid and linked. To place a patch you need to invoke the Patch Creator. The Patch Creator is a floating palette that holds all of the built-in Patches made by Apple, as well as any custom made Patches done by yourself. You search for the Patch you want by typing in a couple of letters of the Patch name. The different Patches will be explained in the future. Once as you find the one you want you can either drag it to the work area, press enter after selecting the patch or clicking the add button by the search box.

This next screen shot shows the Patch Creator palette, the Patch Inspector and the Patch Parameters window. The Inspector and Parameters window act as way to change the settings and what happens to a patch. You don’t want the default options in your compositions, you want them to be unique and different. Thats why you change the settings through these two windows. Out of the two, they are used ever so slightly differently, but still very important.

Once as you have added in a Patch you can change all sorts of settings depending on the Patch inserted. The inspector window has many panes accessed by the arrows at the top of the window. In future tutorials you will be changing these a lot to get different effects.

So far I have explained the work area and the Patch creation palettes. But what is a Patch and how does it work? I like to think of a Patch as a node. Although I don’t think QC is node based programming, I like to think it as connecting the function together to do your task.

A Patch is very simple in principle. You have the name at the top. The one below is a Math Patch, which can be added from the Patch Creator palette. Each Patch has inputs on the left and outputs on the right. Imagine it as a machine. You put what you have in on the left, magic happens in the middle and the output values is spat out on the right.

Each Patch will vary. You can have ones with just on input and output. On the other hand you can have custom made Javascript and code based Patches which have hundreds of inputs and outputs. Each do a different job as described in the description and good old fiddling and messing about.

At the moment in this introduction you know what the bits on the application look like and why they are there, you know what Patches are and how they work. The next step is how to get them to interact with each other. You never have a composition with just one Patch you want lots of them working together.

Once as you have two Patches on the work area connecting them is, once again, very simple. (Overall this program is one of the easiest to work with, as well as being able to do just about anything). To connect two Patches you select the small circle of the the output values of your first Patch drag your mouse to the next Patches circle input. Once as you let go and the connection is valid the two Patches will be connected and interacting with each other.

This drag and drop means the data will flow along that pipe. In the example above the information will leave the Math Patch, this piece of information will then flow along the pipe and be an input into the X Position of the Sprite Patch. You can also link to multiple Patches together in different ways, with multiple inputs and outputs to the same part of the Patch. As shown in the crazy example below.

The final piece which you will use in a QC is the viewer. Accessed from the toolbar, this is your visual output for any composition you will make. The two buttons you really need to use is start and stop. You will find as you use this program, it takes a lot of CPU up trying to render stuff you haven’t finished making yet. As well as this after a while it can get a bit distracting watching something loop over and over.

Hopefully this tutorial has served as a way to learn what all of the bits and pieces mean within Quartz Composer. Within a couple of days I will posting a tutorial on how to make something cool. I wanted to write this to keep any tutorial length down. As it can get quite long. In the mean time sit tight and have a play. As a final tip if you want to output any images use the Sprite Patch with the input from another Patch using the image input on your Sprite.

If you want to learn more, I recommend Learning Quartz Composer on Amazon a useful book.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips