Archive for the 'Quartz Composer Plug-Ins' Category


Kineme Anaglyph Render Plugin

The good people at Kineme released the latest version of their excellent GL Tools plugin set yesterday.

One of the most exciting additions for me was the new Stereo Environment patch, that acts a bit like a Render In Image patch, but outputs two images instead of one. Any geometry placed inside is rendered twice from slightly different point-of-view, and Left and Right images are produced. These two images can then be composited together to create 3D Anaglyphs that jump out of the screen when viewed with coloured glasses.

Anaglyphs have always fascinated me, so I was excited about giving it a go. After some initial disappointment, a very quick update to the plugin (thanks again smokris), and some head-scratching, I managed to get it to work. The effect isn’t perfect, but it definitely gives a sense of depth to the images with the glasses on. This version needs the Red/Cyan style 3D specs (there’s another system that uses Red/Green).


Taking a Random Walk

Inspired by this video by Simon Geilfus (which sadly hasn’t fared well with Vimeo’s compression-method), I decided to try something similar in Quartz Composer.

The basic idea, as outlined in Simon’s post, is very simple:
1. Place a point in 3D space
2. Take the position of the previous point, and add a small random offset on the X, Y and Z axes
3. Create a new point at the coordinates thus generated
4. Repeat, offsetting each new point from the coordinates of the last point.

Here’s some JavaScript:

3D Random-Walk experiment, inspired by Simon Geilfus’ video at

– PointsStruct –
output should be connected to Kineme GL Tools
Point/Quad/Triange Structure patches.

– LastX/Y/Z –
conect to GL Look At Center inputs (with smoothing)
so camera appears to follow point-drawing.

– dummy –
input fed from Patch Time to force updating every frame.

toneburst 2009

// Init array to hold points
var points = new Array();

// Init object to hold initial point
var p = new Object();
p.X = 0;
p.Y = 0;
p.Z = 0;
p.R = 0;
p.G = 0;
p.B = 0;

// Add point to array
points[0] = p;

// Init Frame/Iteration-counter variable
var frames = 1;

function (__structure PointsStruct,
__number LastX, __number LastY, __number LastZ,
__string NumPoints)
(__boolean Draw, __index MaxPoints, __number StepSize,
__number dummy)
if(!_testMode && Draw) {

// Fetch previous point from array
var previousPoint = points[frames – 1];

// Init temp Object variable to hold new point
var tmpP = new Object();

// Random 3D position based on offset from last point
tmpP.X = previousPoint.X + StepSize * (Math.random() – 0.5);
tmpP.Y = previousPoint.Y + StepSize * (Math.random() – 0.5);
tmpP.Z = previousPoint.Z + StepSize * (Math.random() – 0.5);
// Random RGB values (only works for Triangles and Quads)
tmpP.R = Math.random();
tmpP.G = Math.random();
tmpP.B = Math.random();

// Add point to array at index set by frames variable
points[frames] = tmpP;

// Increment frame-counter and reset frame-counter if MaxPoints exceeded.
// Reset to 1 rather than 0 so that previous point
// can be fetched from points array index 0 after reset
frames += 1;
frames = (frames < MaxPoints) ? frames : 1; // Init output object var result = new Object(); // Assign Points array to output object // (JavaScript array converted to QCStructure on output) result.PointsStruct = points; // Last point coordinates (for camera control) result.LastX = points[frames - 1].X; result.LastY = points[frames - 1].Y; result.LastZ = points[frames - 1].Z; // Number of iterations (for debugging) result.NumPoints = frames + " iterations"; // Output values return result; } }[/code] The key to rendering the data is the Kineme GL Tools Point/Line/Triangle/Quad Structure plugins, which takes a simple array of 3D points (and optionally colours, for the Triangle and Quad versions), and create 3D primitives from them. I've also added a stock fog effect to increase the sense of depth, and placed all the rendered objects inside a Kineme GL Tools Look At patch, which effectively makes the camera appear to follow the points as they are drawn. [vimeo 4607256] and another variation. [vimeo 4626625] This time, only complete triangles are drawn, and a Queue patch is used to keep track of the points (speeding things up quite a lot). and another [vimeo 4636184] in which I mess around with a GLSL fake depth-of-field effect on a set of point-sprites.


New Audio-Reactive Thing

Inspired by the famous 3D waveform display of the 80’s Fairlight CMI sampler.
Requires Kineme Audio Tools and GL Tools plugins.

I must start using the Queue patch more! This one uses a Queue to create the movement of the waves. Each frame, coordinates for a new waveform line are created by a JavaScript patch, as a series of X, Y and Z points, with their Z-positions modulated by data from the Audio Tools Waveform output structure.

This array of points then goes into a Queue.

Each line is created by a single iteration of the Iterator patch, and each iteration picks a different item out of the Queue- so iteration 0 picks the data from the first Queue slot (ie the most recent), the second iteration gets data from the second slot, and so on.

The points data for each line is then fed into a Kineme GL Line Structure patch, which joins the points to form a line.

Then, it’s just a matter of spreading the lines out along the Y axis. This was done with a 3D Transformation patch inside the Iterator, to save having to mess around with JavaScript to change the Y-position of each point individually.

I stuck the whole thing inside another 3D Transformation patch, to rotate it and make the lines appear to recede into the distance. I also added an Interpolator patch, driven by Iterator Position and linked to the Alpha of each line, to make them fade out as they got further away, for a kind of fog effect.

Because the data in the Queue is continually being pushed along to the next slot by new incoming data, you get the effect of the waveform moving, as the waveform ‘jumps’ from one line to the next.

The only slight annoyance is that the speed of movement is entirely down to the frame-rate the QTZ is running at. I may investigate artificially slowing down the framerate (as psonice has mentioned doing with some of his demos) to make it more consistent. I could also sync the update rate to VDMX’s tempo, which would make it more jerky, but if it’s tempo-synced, you probably won’t notice.

‘tb Fairlight Waveform 1.01.qtz’ in the download widget.


tb SoundFlower at Richie Hawtin Gig

Thanks to Ali M. Demirel

Looks especially cool when it emerges out of the centre of the eye, I think!

Original video


tb SoundFlower

An audio-reactive circular oscilloscope-type thing, with feedback.
Requires Kineme Audio Tools plugin.

This is an old project resurrected. I’ve finally got around to adding the ability to choose the audio interface and channel for the effect via a little info box, overlaid on top of the output. It’s a not-particularly elegant hack, but I can’t see any other way of doing it, since you can’t populate an Index splitter with names items programmatically from inside QC (as far as I know).

tb_soundFlower.qtz in the widget.


Very Useful Things: Structs, Spooky Patch

I know I’ve mentioned structures before, but using a simple chunk of JavaScript to roll a load of controls into a single structure is a great way of mitigating cable spaghetti.

In the example above, I’ve connected the struct, to a Kineme Spooky Send patch, which can be used to eliminate cabling between macros completely, allowing you to ‘wirelessly’ transmit any kind of information QC can deal with (including structures) from any part of a QTZ to any other part. It even works between separate QTZs embedded in the same application, apparently.

This is a very useful too for ‘modularising’ your QTZs. For example, I’m currently working on a generalised set of macros for creating the ‘pseudospreads’ compositions. I’ve used Spooky Send and Receive patches to send control values between the macro containing the controls of the mesh instances and the one containing the meshes themselves. I’ve also added range ports to the control macro, so it can be tweaked to fit different surface formulas.

Incidentally, the eagle-eyed may have spotted that the order of items in the structure pictured above is pretty random. This is a potentially very annoying feature of structs created with JavaScript (an maybe generally, I’m not sure). Fortunately, it’s quite easy to use the Structure Sort patch to sort them into the correct order. In this case, though, it’s not really necessary, as I’m using the item key (name) to extract the relevant value anyway.


Audio Tunnel

Audio-reactive 2D feedback effect. More info to follow.

October 2019
« Aug    


Blog Stats

  • 490,370 hits