Screencast: Creating an iTunes Music Visualizer in Quartz Composer

I’ve put together a basic screencast tutorial which introduces you to Apple’s Quartz Composer, the graphical programming environment which ships with OS X. Quartz Composer is a graphics generator, capable of drawing 3D graphics, animations, and all sorts of Good Stuff. And you make it work just by dragging little boxes about and connecting them up with little lines, mostly.

This introduction assumes that you tend towards the geeky (although you don’t have to write any code to get cool results with Quartz Composer, it would help if you understood at least the basics of programming in some form.) You’ll also need to install Quartz Composer from your OS X install disc, by installing the Xcode tools. This is an optional install on the DVD, but it’s quite straightforward. For Leopard, head for Optional Installs/Xcode tools, then install the Xcode package.

To demonstrate Quartz Composer, first I do some really simple stuff, like creating a cube and colouring in its faces, then rotating it.

Then I dive in and create a Music Visualizer. The Quartz Composer that ships with Leopard has a template for iTunes Music Visualizers that makes it easy to create your own visualizer, so I do just that, creating a simple animation that moves my mouth up and down in time with certain frequencies of the music.

I think this is the best way to get an idea of what Quartz Composer is, really — it helps to see it, and see how easy it is to get things happening.

Snippets of music for the demo provided by the Podsafe Music Network:

• Baja Taxi, by BRAIN BUCKIT
• Return of the King (reprise), by Al Phlipp and the Woo Team

Post-release observations:

• If you want to give your finished Visualizer to your friends to try out, save the Composition, and then put it in their user’s Library/Compositions folder (you may need to create it if it doesn’t exist.) Then restart iTunes and it should appear in the Visualizations list.
• Some of the animations look a lot jerkier in the screencast than they do in real life. This is a side-effect of compressing the video down to a sensible size.