Quartz Composer Absolute Basics

by

Screen Shot 2013-09-29 at 9.36.56 PMQuartz Composer(QC) is a graphical(patching) programming language for processing and rendering images, movies, and 3D spaces. Because of the tight integration with Quick Time, Apple’s operating system, and OpenGL(Apple’s 3D rendering system) Quartz Composer compositions are efficient and playback smoother than some other graphical patching programming languages.

Quartz Composer is free to download as an extension to Apple’s developer tool Xcode: sign up for a free developer account, download Xcode, and download the graphic tools for Xcode—Quartz Composer is one of the graphic tools.

Screen Shot 2013-09-29 at 7.38.54 PMProgramming in QC is done through connecting patch cables between patches (kind of like routines in traditional programming). The extensive list of patches is found within the patch library and a simple drag and drop adds the patch to your composition.

When working in QC there will always be two windows: the Editor and the Viewer. In the Editor you create your composition and in the Viewer you see the results of your composition. The composition can be run or stopped, but a fun part of programming with QC is that you can change the program while it is still running; immediately seeing the results of your experiments.

Screen Shot 2013-09-29 at 9.44.33 PMAnother important window is the Patch Inspector which gives you information about the currently selected module. Patches themselves can be configured and adjusted, so you will find yourself in the Patch Inspector quite frequently.

Modules have inputs on their left side and outputs on their right side; connect modules  by dragging from an output to an input. To remove a cable drag the right side of the cable so it is over a blank portion of your composition and release the mouse (this took me way to long to figure out!).

Screen Shot 2013-09-29 at 9.42.32 PMThe first module to add to most QC compositions is a “Billboard,” which is like a simple movie screen to play your composition on.

There are many types of messages that can be sent between modules in QC: Boolean, Index, String, Color, Image, Structure, Mesh, and Interaction. The first type you will want to use is “Image.” Which is, as you would expect, an image; a movie is a stream of images.

Notice that the Billboard module has an Image input, an image sent to that input would be shown on the billboard, and hence on the screen.

Screen Shot 2013-09-29 at 9.43.44 PMDrag a Quicktime movie to the editor and a Movie Importer patch preconfigured to play your movie is added to your composition. Connect the Image output of the Movie Importer patch to the Image input of the Billboard and you can watch your movie on the QC Viewer window.

Screen Shot 2013-09-29 at 9.42.46 PM

coords_wsThe movie playback will be half the size of your screen, but centered in the middle because of how the QC coordinate system works: the center of the screen is 0,0 and the edges are +1 and -1—OpenGL is a 3D system so the Z axis is also available. Open up the info view after clicking on the Billboard and you will see that width is set to 1. So, because it is positioned around the origin it goes from -0.5 to 0.5. Change the width parameter to 2 and the billboard will fill the entire screen.

Screen Shot 2013-09-29 at 7.40.30 PM

From here on out, you are on your own to experiment!

Before I leave you here are some great patches to experiment with:

  • Video input: Render video from a webcam.
  • Dissolve: Cross fade between two videos.
  • Wave Generator: Low Frequency Oscillator
  • Audio Input: Use audio input level as a control source.
  • Keyboard: Capture keyboard input for control source.
  • Image from string: Render words as an image.
  • MIDI controllers Receiver: Use MIDI as a control source.
  • Math: General purpose math module.

When working with QC, the first place I look for help is the Mac Developer Library.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: