Quartz Composer and Arduino

Quartz Composer is a graphics development environment that gives you access to the graphics stack of Mac OS X. Quartz uses a Visual Programming paradigm which enables you to combine the capabilities of Cocoa, Quartz 2D, Core Image, OpenGL, and QuickTime. You can create Image filters, screen savers, data-driven visual effects, live performance animations and custom user-interface widgets.

The Visual programing paradigm easily allows you to create prototypes by manipulating graphical API elements on the system rather than by specifying them textually as in traditional programming languages. These system API elements are referred to as patches and are connected to create a composition. As you work with a composition, you can visually see the results in a viewer window, no compilation required.

The following is a really simple Quartz example utilizing an Arduino Micro-Controller as an input. We will be connecting a pot (potentiometer ) to the Arduino and measuring the amount of voltage resistance as an analog value. The Arduino will convert the value to a number between 0 and 1023 and it will print the number to the serial port . We will set up Quartz to monitor the serial port and to display the incoming value in its viewer.


  • Arduino Board
  • 10-kilohm Potentiometer
  • Jumper wire

  • Arduino IDE
  • Quartz Composer
  • Kineme Serial IO patch
  • I’m going to assume you are familiar with the Arduino board and you have already installed the Arduino Ide on your computer. If not, here’s a basic tutorial to get you up and running. I will walk you through the necessary steps to connect Quartz Composer to the Arduino.

    Let’s start off by identifying your operating system version, and determine if your Mac’s graphics card supports Quartz Extreme or Core Image.

    *NOTE : If you use Mac OS X v10.6, your Mac already meets the requirements for Quartz Extreme and Core Image graphics.

    The following steps will help you identify your graphics card support for Quartz Extreme or Core Image.

    (1) Open System Profiler (in /Applications/Utilities).
    (2) Click “Graphics/Displays” under Contents.
    (3) In the right pane under “Display,” look for the Quartz Extreme and Core Image lines; next to each, you will see either
    “Supported” or “Not Supported.”

    Computers that have a Core Image capable graphics card will sometime display “Hardware Accelerated” and those that do not will have software written in system profiler like so: “Software (Titanium PowerBook G4) ”

    As you can see my Macbook Pro has the muscles needed to continue on to the next step of installing Apple’s Xcode suite of tools. If you haven’t already registered as an Apple Developer, (all the cool kids are doing it) this is the perfect opportunity to do so. The main reason to register is to be able to access the downloads section of the Developer Tools and of course to get support from Apple if ever needed. You don’t have to join the paid program, choose the FREE option.

    Here’s the direct link to the Apple Developer tools section (you must be logged in to Apple Support to access the page). Peruse the list, download and install a compatible version of Xcode for your current operating system.

    Once you have installed Xcode, you now have access to the Quartz Composer application. Quartz Composer is located under:

    (not in the standard/Applications directory)

    Quartz Composer file location
    Select the Quartz Composer.app icon and drag it to your dock for easier access. The next thing you need to do is register with Kineme to have access to their media patches. The patch we are most interested in is the Kineme Serial IO plugin (you need to be registered to access the Quartz patch). Once you have downloaded the patch, put it in the following folder:

    /Users/[you]/Library/Graphics/Quartz Composer Patches/

    If the folder doesn’t already exist, CREATE IT!.

    That pretty much covers the software needs for the Quartz Composer end of the equation. Now, lets focus on setting up your Arduino. Grab the Arduino, jumper wire and potentiometer. Connect a wire from one of the outer pins of the potentiometer to the ground pin on the Arduino. Connect another wire to the other outer pin of the potentiometer to the 5 volts pin on the Arduino . Lastly, connect a wire from the middle pin of the potentiometer to the analog input pin 0 on the Arduino.

    Connect your Arduino board via USB to your computer and open up the Arduino IDE.
    Go to Tools->Serial Port and choose the entry that reads /dev/tty.usbserial-XXXXXXXX. Take note of the Serial port location, we will need to add it as a variable to the Serial IO patch in the Quartz Composer composition.

    Next Go to Tools->Board and select your board.

    You can either copy, type or download the source for the following Arduino sketch.

    This example shows the output of an analogRead() of a Potentiometer.
    By M.Gonzalez
    The example code is in the public domain

    int potentiometerPin = A0;    // select the input pin for the potentiometer
    int potentiometerValue = 0;  // variable to store the value coming from the potentiometer

    void setup() {

      pinMode(potentiometerPin, INPUT);

    void loop() {
      // read the value from the potentiometer:
      potentiometerValue = analogRead(potentiometerPin);    
      // send the value to Quartz Composer with line break
      Serial.println( potentiometerValue);  

    The sketch is relatively simple. All it’s doing is reading the input from the pot and printing the data. Upload the Sketch to your Arduino and open your Serial Monitor (click on the button directly to the right of the “Upload” button). You should see a steady stream of numbers ranging from 0-1023, correlating to the position of the pot. As you turn your potentiometer, these numbers will respond almost instantly. If all went well, you can close the Arduino Ide and open up Quartz Composer.

    The first thing you will do is create a Blank Composition.

    Next, select the Patch Creator button, which will spawn the Patch Creator utility window. The window enables you to browse the available Quartz Composer patches and clips. When you select a patch name, you can read its description and pertinent information about the patch .

    In the search bar enter the text “clear”. The results should display the Clear patch. The Clear patch paints the entire rendering destination (Viewer Window) with a constant color and clears the depth buffer. Either double click on the patch or drag it to the composition editor window. If the Viewer Window is open, you will notice that it’s now rendering a black screen. To change the color, you select the Clear patch in the Editor window and click on the Patch Parameters button on the toolbar at the top of the editor window.

    The patch parameters pane will be shown to the right of the workspace. The pane provides convenient access for editing input parameters. You will notice that the Clear Color input is set to black, this is where you would change the color if need be.

    Next navigate back to the Patch Creator utility window and search for “Serial input”. If you followed the Quartz Composer set up, you will have successfully found the Serial input by Kineme. Double click on the Serial Input patch or drag it to the composition editor window. With the Kineme Serial Input patch selected in the editor window, select the Patch Inspector button on the toolbar to spawn the Patch Inspector utility window. Remember when I told you to take note of the Serial port location of your Arduino, well this is the time when you need it. Enter the location of your USB port, enter the Baud rate (by default 9600) and enter ‘\n’ into the Break String input field.

    This Serial patch is all you need to receive data from your Arduino. Whatever the Arduino is printing out, will be available to the Quartz application. It is up to you to handle the data and transform it into a visual representation.

    Navigate back to the Patch Creator utility window and run a search for “Image With String”. Double click on the patch or drag it to the composition editor window. Now here’s your first connection. Select the Data output on the Kineme Serial Input patch and connect it to the String input of the Image With String patch.

    Navigate back to the Patch Creator utility window and run a search for “Billboard”. Double click on the patch or drag it to the composition editor window. Connect the Image output of the Image With String patch to the Image input on the Billboard patch.

    There you have it, you should now be viewing the value of the Arduino pot in the Viewer Window. Turn the pot and the numbers will update in the viewer. This posting introduces you to the possibilities of interaction you can have between Quartz and the Arduino. If you are wondering if you can use Quartz to send data to Arduino, well the answer is yes, but I’ll save that for another post. For now get familiar with Quartz it’s a powerful application, take this example and plug it into a Particle system or make a blur filter. Swap out the pot for a Photocell, get creative!

    Quartz & Arduino (426)

    One thought on “Quartz Composer and Arduino

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    %d bloggers like this: