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.

9 Responses to “QuartzComposer + MadMapper tutorial”

  1. Nice! You can actually forgo the Render in Image if you use the “source” port in the Syphon Server plugin and change it to “OpenGL Scene”, it will grab everything with a lower layer number than it :)

    The only gotcha is that the image is sized based on the Quartz Composer Editors “Viewer” size (the output window size). So if you re-size it, effectively you can change the aspect ratio. Might be useful to know though?

    That looks really cool with the image you used btw. Nice :)

    • Josue Abraham Says:

      hey Vade how can i rem place the render in imagen?

      what i should conect to source port?

  2. Alastair Says:

    Wow, amazing work.

  3. many thanxs for this !!

  4. yangtao Says:

    hi franz, great job. maybe you can give one QC patch downloadlink, i m not found REDLINE in QC. thank you.

  5. yangtao Says:

    sorry , you change sprites’name. thank you

  6. nice, how i change colors to blue scales ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: