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.
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.
Quartz Composer is a technology provided with Mac OS X for processing and rendering graphical data. It comes with a visual programming environment (this editor) and is suited for:
• Developing graphics processing modules without writing a single line of code,
• Exploring the visual technologies available in Mac OS X without needing to learn the application programming interface (API) for that technology.
Quartz Composer brings together a rich set of graphical and nongraphical technologies, including Quartz 2D, Core Image, Core Video, OpenGL, QuickTime, MIDI System Services, and Real Simple Syndication (RSS), which is a lightweight XML format.
Starting in Mac OS X Leopard, you can write your own extensions (i.e. custom patches) to the Quartz Composer system, to make it operate with even more technologies or devices.
You use Quartz Composer to create compositions, which are graphical programs. Compositions can run autonomously, or you can incorporate them into an application. You can play back and interact with a composition from within an application by using a very straightforward runtime API or without any code at all by using QCView, which is provided on the Quartz Composer palette in Interface Builder. Quartz compositions are fully compliant with the Cocoa controller layer and key-value bindings, allowing you to combine Interface Builder and Quartz Composer to rapidly develop data-driven visualizations.
Quartz
Composer는 Mac OS의 그래픽 응용 프로그램의 개발을 도와주기 위한 비주얼 프로그래밍 툴이다. 직관적이고 사용하기
쉬우며 높은 품질의 그래픽을 생성할 수 있으므로 여러 미디어 아티스트와 VJ들이 사용하고 있다.
특정한 역할을 하는 패치와
패치 사이의 케이블 연결로 복잡한 scene을 간단히 구성할 수 있다. Javascript, Core Image, GLSL을
이용하여 텍스트 기반 프로그래밍으로 패치를 바로 만들어낼 수도 있다. 인터페이스 빌더와 쿼츠 컴포저의 간단한 연결로 Mac OS
X용 그래픽 애플리케이션을 손쉽게 제작할 수도 있고, Xcode의 전통적인 프로그래밍 언어를 이용하여 Custom Patch를
만들어서 쿼츠 컴포저에 사용할 수 있다.
Mac OS의 스크린 세이버, 아이튠스 비주얼라이저, 키노트 배경 애니메이션 등을 손쉽게 만들 수 있다.
Quartz
Composer는 Mac OS X용 Developer Tools에 포함되어 있으므로 맥 사용자라면 쉽게 접근할 수 있다.
아쉽게도 다른 플랫폼은 지원하지 않는다. Developer Tool은 Mac OS X 설치 디스크에 번들로 내장되어 있으며 최신
버전을 developer.apple.com에서 다운로드 받을 수 있다.