Search form

You are here

What do I need to know if I'm coming from a Quartz Composer background?

Although there are many differences from Quartz Composer, probably the most important is that Vuo explicitly uses events to send data through your composition, whereas in Quartz Composer events are implicit and partially hidden.

Push and Pull

In Quartz Composer, behind the scenes, data is pulled when the display refreshes (typically 60 times per second). In order to make patches execute, you need to connect them to a Renderer patch that pulls the data through the patches toward the end of the stream.

In Vuo, it's the opposite — you should connect an event generator at the beginning of the stream, which will push events and data downstream. You can read more about how Vuo's events work in the manual section "How events and data travel through a composition".

Vuo's Image Generator Protocol works similarly to a typical Quartz Composer composition — when this protocol is active, the time published input port fires an event every time the display refreshes, analogous to Quartz Composer's Renderer patches. Check out our tutorials on protocols: part 1, part 2.

Example: Display a radial gradient image

In Quartz Composer, the Billboard patch pulls data from Radial Gradient to Image Crop to Billboard.

In Vuo, the Fire on Start node pushes an event to Make Radial Gradient Image and then to Render Image to Window. This happens one time, when the composition first starts running. When the event reaches Make Radial Gradient Image, that node executes (evaluates) and outputs an image plus the event. When the image and event reach the Render Image to Window node, that node executes by displaying the image in a window.

In Vuo, another way to display a radial gradient image — that may feel more natural to you as a Quartz Composer user — is shown below. This composition uses the Image Generator protocol, indicated by the green sidebars for published ports. Instead of having to pick a node like Fire on Start to fire an event, you can let the Image Generator protocol handle event flow behind the scenes. Events flow in through the width, height, and time published ports at the display refresh rate. The Image Generator also takes care of displaying the output image in a window.

Scenes and Layers

In Quartz Composer, everything — both 2D and 3D graphics — is treated as a layer, rendered in the order specified by the little number in the top-right corner of each Renderer patch.

In Vuo, 2D and 3D rendering are handled separately. You can use Vuo's Layers system when you want to explicitly specify the order in which each 2D layer is rendered — the order in which you connect them to a Render node determines the back-to-front order in which they're rendered. Or you can use Vuo's Scene system when you want to construct a 3D scene, in which case explicit order is dynamically replaced by the third dimension — depth.

In Quartz Composer, you implicitly get a single window to render on. In Vuo, you can use the Render Layers to Window and Render Scene to Window nodes to create however many windows you'd like.

You can combine 2D and 3D graphics by using Vuo's Render Layers to Image and Render Scene to Image nodes, and then rendering that image as part of your 2D or 3D scene.

Example: Display one square layered on top of another

In Quartz Composer, the Billboard patch numbered 3 is layered on top of the Billboard patch numbered 2, which is layered on top of the Clear patch numbered 1.

In Vuo, the Make Color Layer patch into input 2 of Render Layers to Window is layered on top of the one into input 1.

Colors, Images, and Shaders

In Quartz Composer, rendering is done using OpenGL's old fixed-function pipeline, meaning that you can only render images and solid colors onto objects (unless you use the GLSL Shader patch, which requires implementing your own projection and lighting algorithm in text code).

In Vuo, rendering is done using a modern OpenGL shader approach. You can assign any shader to any object (using one of Vuo's built-in shaders, or using your own custom shader) and it will fit seamlessly into your 3D scene. Some nodes have Material ports, which can directly accept either a color, an image, or a shader.

Example: Display a sphere with lighting

In Quartz Composer, the Lighting environment applies lighting to the sphere rendered inside of it. The sphere's color comes from the Sphere patch's Color input.

In Vuo, the Make Sphere node has a Material input that controls both lighting and color. When Material is a color, lighting is automatically applied with some default settings.

In Vuo, the Shade with Color node provides additional control over lighting and color.

Coordinates

In both Quartz Composer and Vuo, the coordinate system's origin is the center of the window, X extends rightward, Y extends upward, and Z extends toward the camera. In both, the left edge of the window is X=-1, the right edge is X=+1, and the vertical extent depends on the window's aspect ratio.

In Quartz Composer, the camera by default is located at (0, 0, 1.73205), with a 60° field of view. In Vuo, the camera by default is located at (0, 0, 1), with a 90° field of view.

In Quartz Composer, you specify the 3D orientation of objects by using the X/Y/Z Position, X/Y/Z Rotation, and X/Y/Z Scale ports. In Vuo, we've consolidated these into Transform ports, so you can easily pass complete transformations through your compositions without having to wire up 9 separate cables. You can create a Transform from individual parts by using the Make 2D Transform and Make 3D Transform nodes, and access their parts by using nodes like Get Transform Rotation.

Patches and Nodes

Quartz Composer uses the word "patch", and Vuo uses the word "node" — but they both pretty much mean the same thing. There's a lot of overlap between QC patches and Vuo nodes, but there isn't always a one-for-one correspondence, and the names are not always the same. Here are some common QC patches and some information about attaining the same functionality in Vuo:

Quartz Composer

Vuo

Vuo Node Set

Input Splitter

Share Value or Share List

vuo.data

Clear

Make Color Layer

vuo.layer

Billboard

Make Layer or Make Real Size Layer + Render Layers to Window

vuo.layer

Sprite

Make 3D Square + Render Scene to Window

vuo.scene

Logic

Are All True, Is One True, Negate

vuo.logic

Conditional

Compare Numbers, Is Greater Than, Is Less Than, Is Within Range, Are Equal

vuo.math

Math

Add, Subtract, Multiply, Divide, Find Minimum, Find Maximum

vuo.math

Math Expression

Calculate

vuo.math

Interpolation

Curve

vuo.motion

Wave Generator (LFO)

Wave

vuo.motion

Multiplexer

Select Input

vuo.select

Structure Index Member

Get Item from List

vuo.list

Documentation on every Vuo node is available in Vuo Editor's Node Library, or on the web at doc.vuo.org.