QuartzComposer + MadMapper tutorial

For this tutorial,
you’ll need QuartzComposer Syphon plugin,
a plugin developped by Anton Marini and Tom Butterworth
that allows to share video frames between applications.
If you don’t have it, download it from their official Syphon V002 site.

Once downloaded, place the plugin in your /Library/Graphics/Quartz Composer Plug-Ins/ folder
on the rootdrive of your Mac.

This tutorial also assumes that you are somehow “familiar” with QuartzComposer.

STEP #1:
Now open up Quartz Composer and make a simple patch.
Here we have 4 sprites whose Color are connected to 4 Interpolation patch,
each driven by an external timeline, offset a little bit (0.25) so that the color is varying out of sync.
We also have 2 red bars moving on the Y axis using the same technique.

STEP #2:
Now place all these elements into a Render In Image patch.
This will render a plain image in a Frame Buffer.
I’ve set the size of the Render in Image patch to something like 512by512 pixels,
as we don’t need ultra-high quality for this simple example.
Connect to Image output port of the Render In Image to a Sprite, so that you can see the rendering.

STEP #3:
Now place the Syphon patch in the graph and also connect it to the Render In Image output.
This allows to share the rendered image between applications, thanks to the Syphon framework.
Don’t forget to give a name to your Syphon server. I’ve named it 4x (because there are 4 parts in the picture)

STEP #4:
Open up MadMapper.
You should see your Syphon shared image automatically in the media section of MadMapper,
listed under the Syphon section. Double click it and it will appear in the Input View.
Note that the displayed size is effectively 512by512 pixels.

STEP #5:
Now it is about time to load a background image to start working in MadMapper.
Go to the View menu, select Change Preview Background, and load your favorite building photo.
In this tutorial I’ve loaded a photo of Frank Gehry ‘s building in Prag.
Once loaded the photo will appear in the Preview Output, but not in the real output.
It is just a background picture to help you prepare your mapping setup.

STEP #6:
Place a few Quad primitives on the windows,
each window being a different cropped part of your Syphon input.
You can adjust the corners of the Quda to make them fit perfectly the geometry of the building.
You can also play with some flipping option, to give the final result a more random look.

STEP #7:
Admire the final look of your mapping, and go back to Quartz Composer to give your projected elements some more complexity.