Quartz Composer Basics Tutorial : Lighting (and some incidentals)

The Lighting patch in Quartz Composer is a very fundamental and useful patch. It is a macro patch that provides you with a GL Lighting Environment. This is a basic Quartz Composer tutorial that will touch upon some principles involved in effectively using the Lighting patch.

In Quartz Composer, the Lighting macro patch allows you to have up to 8 independent light sources, all with independent Color, Attenuation, and control for placement on the x, y and z axis. Then, you have global control for specular highlights (material specularity), as well as overall shininess (material shininess).

One thing that can really illustrate the power of this patch is using it on a simple, uncolored, object.

First, select shift/command/n (⇧⌘N) to open a new blank composition in Quartz Composer. Alternately, go to the File menu, and manually select "new blank".

Let's take a walk....

I'm of the opinion that learning as many shortcuts as possible leads to a more seamless experience for any program, and it's nice that Quartz Composer actually has a decent amount for commonly used functions, and it does save on time when you use them.)

...and down a different path...

Option and Spacebar will turn the cursor into a hand. Clicking on your trackpad or mouse will make that hand grab the editor surface. That can be an interesting alternative to the classic two finger scroll for navigating the editor, and I sometimes like to use this if working with a mouse.

I tend to use the onscreen GUI controls instead of shortcuts in scenarios where they are "there", and don't require multiple steps to access (whereas pulling something down from the menu takes longer).

Walk over.

That said, click the circular "+" icon on the top left of the Editor, and pull up the "Patch Creator".

Type in "Sphere" in the top field of the Patch Creator, and then click on Sphere in the Category/Name field. One click will select it, and allow you to preview information about it by reading the Description field at the bottom of the Patch Creator. Double clicking it or manually dragging it onto the editor via trackpad/mouse will allow you to actually use it in Quartz Composer. This holds true for all patches, except for Clips, which cannot be dragged onto the editor, and must be double clicked (for some idiosyncratic reason).

Click on the Viewer icon at the top right of the Editor interface, and if all is well, you will see something like this:

Placing a the sphere on the editor, and subsequently rendering it clearly illustrates something important. All you &^%$@ see is a circle... isn't a sphere 3 dimensional?

Of course it is. However, you can't tell that without a light source silly.

Lighting is a key part in creating a scene, conveying depth, and creating the optical illusion that things are working in 3 dimensions.

Select the Sphere patch on the editor by hovering over it with your cursor and clicking. You will see a green highlight outline around any currently selected patches in Quartz Composer.

Now, "Command X" to cut the sphere patch. Select the Lighting patch via the Patch Selector in the same way that you selected the Sphere patch. Once the Lighting patch is on the editor, "double click" on it, and you are now in an empty "macro level" which the Lighting patch "wraps around". Every renderer patch (if it has normals, which is all standard patches, I believe), will respond to the settings of the Lighting patch when those patches are operating inside of the Lighting environment. Now, "Command V" to paste the sphere, and you will see a very different look, something much like this:

Now, note the right hand side of the editor, right below the controls. You now have a legend that reads Root Macro Patch-Lighting. Anytime you start nestling macros and creating "levels" you will see this appear, and it is also a handy way of keeping track of things occasionally. You can "jump" back to the Lighting level by selecting the Root via this interface, or you can choose the "Edit Parent" control (my usual route).

Decreasing the default value of .5 on the Material Specularity will make your specular highlight lose intensity and appear smaller. The Material Specularity can be used to make the area that the actual specular highlight encompasses larger or smaller. A value of 1 will be largely unfocused, while 128 would be extremely focused.

The ambient light should be looked at as your indirect light... ambient! Typically this will be set darker. Double click on the patch on the circle where "Ambient Light" is written. This pulls up a something that should look fairly familiar to most Apple users, a classic color choice interface. For now, leave it at the same darkness level, but try previewing different hues by changing the color position on the actual color choice circle. Note how the specular highlight shines through to the actual "white" surface of the sphere, "defeating" the weaker ambient light.

Now, close your color panel, and reselect the Lighting patch. Shift/Command/I pulls up the Settings panel for the Lighting patch, where you will note the ability to add Light Sources. Go ahead and bump it up to 3 for now.

Also note the ability for two sided Lighting. This is very useful for scenarios where you take a lighted scene and are then manipulating it in ways that you will end up seeing the "backside" of objects. Something to keep in mind. Computing the specular color before or after the texture operation comes into play if you are using image sources with the renderer; the default is generally what you want to use.

Go to your Light 2 color, and your Light 3 color and adjust them to red and blue, respectively. Note that you see no change. Why?

This is because your Light 2 and 3 sources are effectively "inside" of your Sphere object by default, placed at 0/0/0! When you first pull up a Lighting patch, the "Light 1" defaults at a position of -1/1/1.

Now, take your Light 2 and place the x parameter at +5, and the Light 3 x parameter at -5.

Note that you now probably have some pretty ugly looking specular highlights! Tame them. Bring Material Specularity down to ".1".

What you will see is fairly stark... blue, to grey, to red, with some highlighting. This shows you the effect of two colored light sources mingling with the main white light source, and the area where the light source is weak (the grey area).

Now, where it can get interesting is when you position things so that lights begin to mix more, creating stronger secondary hues. Adjust both z positions of Light 2 and 3 to +2, and you will see now see that the area that was formerly grey is flushed with a mix of blue and red light, because the light sources are now in front of the object on the z-axis while the sphere remains at 0/0/0. There is still a darkness to the bottom, because the initial lightsource, 1, is placed at +1 y, which is above the Sphere object. This logically means that the bottom would have to be darker, and it is.

So, you now have a nice violet hue, and a real feel of a lit environment. Also consider the strong ability of the Lighting patch to add color to your compositions and programming in addition to your choice of colors via texture inputs and by choosing to change the color of the actual renderer. Remember that this sphere is still white, but we now effectively have 6 other elements- 3 primary light colors, a 4th ambient color, a 5th inferred "darkness/absence of light" being cast upon the sphere, and the 6th, which is the effect of intermediate blended areas, all via the Lighting patch.

Until next time,