Tutorial: Lighting 3D Cubes and Moving them with Audio Input

If you’ve been intrigued by all this talk of Quartz Composer, the free visual creation software that ships with Mac OS X 10.4 and 10.5, here’s your chance to actually learn how to do cool stuff with it. Our friend Momo walks us through a basic tutorial on simple 3D and audio processing, which you could easily apply to more complex ideas. With QC support in the upcoming VDMX5, you could drop this into a VJ set with traditional clips, as well. We’ve got step-by-step instructions, plus a video. Let us know if you create anything wild with this as its basis.

Quartz Composer: Lighting 3D Cubes and Moving them with Audio Input from momo_the_monster on Vimeo.

In this Quartz Composer tutorial, We’re going to make a 3D cube that responds to our voice.

First we start up Quartz Composer. The icon will be different depending on whether you’re running OS X 10.5 or 10.4.

From the File menu, choose New Blank (or simply ‘New’ in Tiger).

In Leopard, we need to open the Patch Creator. In Tiger, this is always open, and called the Patch Library, found anchored to the left side of the Editor. Type ‘Clear’ into the search field to drill down to the patch we want. Drag-and-drop the Clear patch to the Editor.

Now we’ll do the same with a cube. Type ‘cube’ into the search field, and then drag the patch into the Editor.

Select the Cube and press Apple-i to bring up the Inspector. This is where we can hand-adjust all the aspects of our Cube.

The cube is a little too big to work with, so we’ll take it down in size. Type 0.25 into the Width, Height and Depth fields.

Now let’s play with the X, Y and Z positions of the cube. Spin the dials to the right of the text fields labeled X Position, Y Position and Z Position and watch how the cube moves around in space. To change the values, you need to click and hold on a dial, and the move the mouse in small clockwise circles to raise the value, and counter-clockwise circles to lower it.

Let’s reset these values to 0 by typing directly into the fields.

Now let’s play with the X Rotation property. You’ll notice that the changes we’re making are very small. This is because Rotation is measured in degrees, so to go all the way around once, we need to increment from 0 to 360. Hold down the Shift key for faster rotation. We can recognize that the Cube is three-dimensional, but it’s hard to tell, and not very pleasing to look at. Let’s add some lighting to flesh out the look.

Type ‘lighting’ into the patch search, then drag and drop a Lighting environment into your composition. Notice the square edges on this patch. Our previous two patches, which are both Renderers, have rounded edges. The squared edges of this Lighting Environment patch tell us that we can put other patches inside of it.

Select the cube and press Apple-X to Cut it to your clipboard just like you would with a Word Processor. Double-click on the Lighting patch and press Apple-V to paste your Cube back inside. In Leopard, you’ll see the above breadcrumb trail letting you know that we’re inside the Lighting Patch, which is inside the Root patch of our composition. In Tiger, you may have to click on the ‘Hierarchy Browser’ to see this. Click ‘Edit Parent’ to return to our Root Patch.

Back in our Root Patch, click on Lighting and press Apple-i to bring up the Inspector. Change Attenuation to 0.1 to smooth out the lighting, and play around with the Light 1 XY and Z Position to see how it affects the composition.

Click on the color box next to Light 1 Color to bring up a color wheel. Pick a new color and observe the changes in your viewer.

Next we’re going to bring in an Interpolation patch which will provide some automated control.

In the Inspector for the Interpolation patch, choose a Start and End Value of 0 and 360, respectively. This tells the Interpolator what values we want it to output.

Connect the Result from the Interpolation patch to Y Rotation on Cube. Now the Interpolation patch is counting from 0 to 360 (using decimals in-between for a smooth output) and we’re using those numbers to change the Y Rotation on the cube. Change the Duration of your Interpolation from 1 to 0.1 and watch it go freakishly fast. Change it to 10 and observe it slow down. Revert it to 1 second and let’s move on.

Next we’ll add an Audio Input patch so we can interact with our composition.

Connect the ‘Volume Peak’ output to the ‘Height’ input on the Cube.
In your viewer, your cube should now be responding to your default system input - on a laptop, this will be your internal Mic. On a desktop, you may need to plug in a Mic or some other External Audio source to see it respond.

NOTE: It is possible to redirect iTunes to your QC comp using a utility called Soundflower - look for a tutorial on this topic soon.

Looking at the viewer, you’ll notice that our Cube is not hitting the top and bottom of the display area. In order to change this, we’ll add a Math patch. We’ll route the signal through the Math patch (as pictured above) before sending it along to the cube.

In the Math Patch Inspector, we’ll change the Operation to Multiply, and try ‘4′ for the amount. In Tiger you will default to having two operations - you can leave the other one blank.

Now we should see the cube stretch all the way to the top and bottom of the screen. We can play with the multiplication amount until we find a spot we like.

Now it’s time to experiment on your own. Open up patches and change some values, see what happens. When you find a change you like, hook up an Interpolation or Audio Input patch to it. Stick Math patches in your routing streams to take control of your values. Experimenting like this works to cement the ideas you learn, and steadily increase your understanding of the Quartz Composer System.