Quartz Composer Tutorial: Ribbon Cube

In this tutorial, I will take you step-by-step through my process for creating the following:

Click Image to View Clip – Quicktime 7 and TIGER Required

To start, you need to be running Tiger (10.4), you must have Quartz Composer installed, and the basic interface understood (using your Viewer, adding patches, making connections and saving). Also, you will need to enable the hidden patches. You can find instructions for that here (Don’t worry – it’s easy). Got all that? Let’s get started.

Legend: Patches in Bold, inputs in Italics.

1. Drag a Clear to your Editor.

2. Drag in a Cube.

3. Drag in an LFO, and connect its Result to the X Position on the Cube.
Click Image to View Clip – Quicktime 7 and TIGER Required

Your viewer should now appear like the movie above. The LFO is moving our Cube back and forth from the middle of the screen to the right.

4. Using the Inspector (Apple-i will bring it up), change the settings on the Cube to the following:

5. Use the Inspector to change the name of your first LFO to XPos LFO.

6. Drag in an LFO, name it XRot LFO, and connect its Result to X Rotation on the Cube. You’ll want to bump the Amplitude on this LFO up to at least 100 to see an effect. This is because our first LFO controlled screen position, which goes from -1 to 1, whereas this one controls rotation which goes from 0 to 360.

Our editor should now look something like figure 3:

And our output like this:

Click Image to View Clip – Quicktime 7 and TIGER Required

The next thing we’re going to do is explore the Replicate in Time patch.

7. Drag a Replicate in Time patch to the editor.

8. Our current project needs to go inside of the Replicate in Time, so select the Cube, XPos LFO and XRot LFO patches by dragging around them (leave the Clear where it is). Next, you will Cut (Apple-X) the selected patches, double-click on the Replicate in Time patch to go inside, and then Paste (Apple-V) the bits back inside. Click on the ‘Edit Parent’ button in your toolbar to go back up a level.

Your output should now look like the image above.

It looks like mush because we’re seeing all the frames of the cube spinning around at once.

9. Drag in an LFO, and connect its Result to the End Time of the Replicate in Time patch. Now we should see some action as our LFO moves the End Time of our mashed frames around, so sometimes we’re seeing the first frame only, sometimes we see the first 10 frames, the first 50, etc.

Click Image to View Clip – Quicktime 7 and TIGER Required

10. Add a Math patch, and connect the Result from the LFO to its Initial Value. Use the inspector to change Operation #1 in the Math patch to Subtract, and Operand #1 to 0.1. For simplicity’s sake, you can hit the ’-’ button next to the ‘Number of Operations’ option in the settings for the Math patch, since we only need to perform the one operation. Connect the Resulting Value from the Math patch to the Start Time on the Replicate on Time. The output in your viewer should now look like the window above. What we’ve done is set the Start Time on the Replicate in Time patch to always be 0.1 seconds behind the End Time. In the example below, I’ve set the LFO Period to 10 to slow things down a bit.

Click Image to View Clip – Quicktime 7 and TIGER Required

The next thing we’re going to do is add some color by using a Lighting Macro Patch.

11. Double-click the Replicate in Time patch to go inside.

12. Drag a Lighting (Environment) patch to the Editor.

13. Cut-and-Paste our Cube and its two LFOs so it resides inside of the Lighting patch – just like we did earlier to put them within the Replicate in Time patch.

Click Image to View Clip – Quicktime 7 and TIGER Required

Cool! Things are already looking a little more interesting. We now have a Cube within a Lighting environment within a Replicate in Time patch. We’re going to use the same techniques we employed to move around the patch in order to get some color effects on our cubes.

14. Drag in an HSL Color generator and drop it next to the Lighting patch.

15. Using the inspector, lower the Luminosity of the HSL Color patch to about .5 and connect the Color output to the Light 1 Color input on the Lighting patch. Now we’ve got red blocks. Let’s change them over time.

16. Drag in a new LFO and connect its Result to the Hue on the HSL Color patch. Now we get rainbow cubes!
17. Double-click on the Lighting patch to get down to the Cube level. Let’s change the XPos LFO to have an Amplitude of 1 and an Offset of 0. We’ll change the Type as well – let’s set it to Sawtooth Up.

Click Image to View Clip – Quicktime 7 and TIGER Required

Now we’ve got an organic-looking cube set that swims back and forth across our screen, changing color all the while.

From here, it’s your experiment. try adding LFOs to the other inputs on the Cube – XYZ Position, XYZ Rotation, Width, Depth, Height. Add an LFO to the Light 1 Position, try adding more lights. Another fun spot is the Math patch that feeds into the Start Time of the Replicate in Time patch – attach an LFO to the Operand #1 (the amount being subtracted from the End Time to calculate the Start) and your worm will grow and shrink over time.

For those of you who are looking to tweak your parameters in real-time, you have 3 choices. Build a Cocoa App, Use a MIDI Controller, or Publish your Inputs to Root. We’ll go over the first two methods another time, but for now I’ll show you how to get a dropdown menu from within QC to mess with your settings.

18. Right-Click (or Ctrl-Click if you’ve only got a 1 Button Mouse) on the XPos LFO that feeds into the Cube, and then select Published Inputs, then Amplitude. QC will create a text box for you, type in XPos Amp.

You’ll notice a black dot to the left of Amplitude on your XPos LFO now – this tells you that the input has been published, and is available for control one level up from your current spot. We’re going to need to patch this puppy all the way up to our root.

19. Click on ‘Edit Parent’ to go up one level – you’ll now see that the Lighting patch has an XPos Amp input – right-click on the patch, select Published Inputs, then XPos Amp, then hit Enter (this time, QC automatically calls it XPos Amp).

20. Click ‘Edit Parent’ again and we’re at the top level. Right-click and publish it one more time.

21. Click on your Viewer, and then push Apple-T on your keyboard. QC draws a dropdown containing all of your published inputs – just XPos Amp for right now. You can manually enter a new number, or twirl the little knob clockwise to raise the value, counter-clockwise to lower it.

That’s it! This is my first QC tutorial, so please let me know if it was helpful for you, and leave suggestions on how I could make future ones even better.

Related Posts:

The Morning After The Orb Show It was fantastic. Thank you everyone. Momo is officially a...
Quartz Composer Classes I'll be teaching two Quartz Composer classes at Machine Project...
Quartonian - Quartz Composer  Quartonian Mixer made in Quartz Composer. Roger Eskaton has built an...
Apple iPhone with Quartz Composer a Portable VJ Tool?  The Apple iPhone is all over the blogs today -...