Bar graph visualizations with Quartz Composer and VDMX

​Download the completed QC composition and VDMX project file for this tutorial.

Among the many uses of Quartz Composer, and perhaps one that is often overlooked for live performance visuals, is the ability to make visualizations of data and other information. Since QC compositions are rendered in realtime, when creating them for this purpose it can be helpful to make the patches reusable with published input values for use in other environments, or replicating within QC itself.

In this two part video tutorial we'll first create a composition in Quartz Composer that renders a simple bar graph data visualization with inputs for changing its labels and values that can be used in other applications. Once the patch is completed it can be loaded into VDMX and set up to respond to a variety of different inputs as a visualizer of tempo or audio levels as part of a VJ set, an on screen display of MIDI / DMX channels, or any other arbitrary data that you can get into your computer by OSC.

A Quartz Composer patch used to create two separate 4 column bar graphs in VDMX visualizing tempo and audio analysis levels respectively.


1. Creating the Bar Graph Composition in Quartz Composer

​If you aren't interested in how the patch is made, download it and move on to the VDMX part below.

Note that this quick bar graph example is designed for beginners to the Quartz Composer language--

More experienced QC users following along may want to try the additional challenges of working with ‘Cube’ objects instead of a ‘Sprite’ to create a 3D chart, make use of an ‘Iterator’ to make the number of columns adjustable along with the other parameters, or include published input splitters for color values.


2. Using the Bar Graph Visualizer Composition in VDMX

The reusable Quartz Composer composition created in part 1 now makes it possible for it be used to visualize any data-source available to VDMX as a bar graph on a layer--

In this video we'll go through a few of the built-in options such as audio analysis and LFOs, as well as using the Hardware Learn option to quickly detect some MIDI sliders to the patch inputs.

Finally, we'll end by demonstrating the loading of the patch multiple times to use on more than one layer for displaying different sets of real-time data side by side.

3. Next Steps & Pro Tips...

Enable ‘Quad’ mode in the Layer Composition to apply perspective correction for basic projection mapping of the graphs onto surfaces.

Enable ‘Quad’ mode in the Layer Composition to apply perspective correction for basic projection mapping of the graphs onto surfaces.

Compositions can also have published outputs for returning numbers, colors, images and other control data back to VDMX for visualization.

Compositions can also have published outputs for returning numbers, colors, images and other control data back to VDMX for visualization.

​Advanced: The text fields for QC inputs can receive their string values over OSC - use the UI Inspector for setup.​