Forums » Getting started with Quartz Composer

New to Quartz Composer? Start here.

    • Moderator
    • 78 posts
    April 24, 2013 5:37 AM PDT

    Getting started

     

    What is QC Designers?

    QC Designers is a community of UI designers, animators and developers interested in creating more delightful experiences with tools like Quartz Composer. Our focus is on getting people up to speed with QC, but we’ll continue to adapt as new tools come into fashion.

     

    While there are other forums for QC users, we cater to Interaction Design, specifically. We recommend Kineme and iloveqc for QC communities focused around its strengths as a tool for VJs and audio visualization.

     

    What is Quartz Composer?

    From Wikipedia:

    “Quartz Composer is a node-based visual programming language provided as part of the Xcode development environment in Mac OS X for processing and rendering graphical data.”

    It is an Apple product used by designers & animators to create animations and prototypes. It also has wide use by VJs for live visualizations, among other uses. It has been around for a number of years but has recently had a resurgence in the software world following news of its role as a prototyping tool at industry giants Apple and Facebook.

     

    To create a composition, a user uses the Editor to connect a number of patches with “noodles” that sends a signal from one patch to another. The end result is displayed in the Viewer. Changes you make in the Editor immediately appear in the Viewer, which makes QC particularly well-suited for creating interactive prototypes.

     

    How to download QC

    Quartz Composer is a free download from Apple’s developer site. Here’s a video walking through how to get it.

     

    YouTube video:

    http://www.youtube.com/watch?v=DwobezAOnqk

     

    The short version:

    1. Go to Apple’s developer site
    2. Register for a Developer account, or log in if you already have one
    3. Download “Graphics Tools for Xcode”
    4. Once installed, you can find Quartz Composer in Macintosh HD > Developer > Applications > Quartz Composer. Again, it will be inside your Developer folder, not your main Applications folder.


    How to extend Quartz Composer with jQC and Origami

    jQC and Origami are frameworks for QC that make it easier to use for interaction design. jQC is an open source framework that was built with help from this community and first released here, on this site. Origami is a framework developed by Facebook that includes many helpful bugfixes for QC as well as a number of patches. Both frameworks can be installed at the same time, and are complimentary to each other.

     

    jQC download thread

    The jQC framework is free and open source. It has no dependencies outside of QC, and is highly backward compatible.

     

    Origami download thread

    The Facebook Origami framework is free and fixes some longstanding QC bugs. It requires OSX 10.8 or higher to run.

     

    Both frameworks are highly recommended.

     

    Common resources for learning QC

    This site hosts a Forum and has tutorials and sample projects to get you started. In addition, we’d recommend:

     

    Learning Quartz Composer by Graham Robinson and Surya Buchwald. This book is geared toward visualization work, but it’s still a good introduction to the app. Widely recommended.

     

    Apple’s Quartz Composer User Guide (PDF). Similar in content to Learning Quartz Composer, but free. Last updated in 2007, but still largely useful.

     

    Kineme forums. Tends toward more advanced users, but there’s a lot of knowledge collected here.

     

    This Forum

    If you’re new to QC, welcome! Please introduce yourself and share any comps or questions you have.

     

    General pointers

     

    Pixels vs Units

    QC measures the Viewer in Units, not pixels. Units are a relative unit of measure, and the coordinates are measured from the center of a given object. 1 Unit is the distance from the center of the Viewer to the top or side. Here’s a graphic from Apple’s User Guide:

     

     

    You can think of Units like a percentage - something positioned at 0.5 X Units will be 50% of the way between the middle of the Viewer and its right edge, while something positioned at -.75 Y Units will be 75% of the way down the viewer from the middle.

     

    Pixel perfection

    Because Units are relative to the size of the Viewer, the elements will resize automatically with the window. This can be tricky when working with pixel-precise mocks. Pixels are an exact unit of measure, so any scaling will cause blurriness. It’s entirely personal preference whether to make your mock scalable or pixel-perfect, and each have their pros & cons. If you want to ensure your mocks appear pixel-perfect, do the following:

     

    1. Select the output patch for your image (Billboard or Sprite)
    2. Press CMD+2 to bring up the Settings inspector & choose Dimensions Mode: Real Size
    3. Press CMD+1 to bring up the Input Parameters inspector & change Pixel Aligned to 1

     

    To position elements with Pixels instead of Units, you can use the Pixels to Units and Units to Pixels patches to convert from one format to another.

     

    In addition, the patches in the jQC framework use pixel values by default. For example, you can automatically get the same effect as described in the three steps above by using the Pixel Aligned Billboard patch.

     

    How to install custom QC patches

    1. Select the patches in the editor to make up the custom patch
    2. Click Add to Library in the top bar

     

    The custom patch will now show up in your Patch library under Custom and will be available to any comp you work on.

     

    How to install 3rd Party Plugins for QC

    http://vimeo.com/809083

    Guide on Kineme:

    http://kineme.net/HowToInstallCustomQuartzComposerPatches

     

    How to upload your comps for the Forum

    We recommend the following to upload your comps:

    Dropbox - (Instructions)

    droplr

    CloudApp

     

    Comps won’t open in 10.7+?

    This is due to a security feature called Gatekeeper preventing files from opening that could potentially harm your computer. To get around this, you can either:

     

    1. Right-click on the file and choose Open. You only need to do this once per file you download

     

    Or,

     

    2. Disable Gatekeeper under Security in System Preferences

     

    Apple has more information at their website

     

    Help - graphics are glitching out!

    This can usually be fixed by adding a Clear patch. Apple covers this in more detail.

     

    More questions?

    Ask someone!


    This post was edited by Hans van de Bruggen at March 12, 2014 6:29 PM PDT
    • 7 posts
    April 29, 2013 10:07 PM PDT

    Hi there,

     

    I tried what you suggested for using pixel-based units instead of the default Units, but I'm running into a weird issue. After positioning my Billboard using the Y position property, if the canvas width changes, then the position changes. I took a screen capture of it: http://f.cl.ly/items/0l470R3p2t0c2s1Y0y3d/qc-weirdness.mov

     

    Any ideas?


    This post was edited by Joseph Schmitt at April 29, 2013 10:07 PM PDT
  • April 30, 2013 2:21 AM PDT
    Joseph Schmitt said:

    Hi there,

     

    I tried what you suggested for using pixel-based units instead of the default Units, but I'm running into a weird issue. After positioning my Billboard using the Y position property, if the canvas width changes, then the position changes. I took a screen capture of it: http://f.cl.ly/items/0l470R3p2t0c2s1Y0y3d/qc-weirdness.mov

     

    Any ideas?

    Hi Joseph, you could use "Pixel to Unit Patch". In this case, the coordinates will be recalculated and the bar will stay put.

     

    Example: https://dl.dropboxusercontent.com/u/1909742/QC/statusbar_example.qtz 

    • 7 posts
    April 30, 2013 8:59 AM PDT

    Hi Joseph, you could use "Pixel to Unit Patch". In this case, the coordinates will be recalculated and the bar will stay put.

    Awesome, that worked great, thanks!

    • 19 posts
    May 5, 2013 5:55 AM PDT

    Yeah I should say that I didnt know about Pixels to Units and vica versa before I saw Hans examples so forgive me for not using those in the tutorials! :)

    • 6 posts
    May 8, 2013 3:04 PM PDT

    Very helpful. Thanks Alexander.

    • 6 posts
    June 5, 2013 10:23 AM PDT

    Hi! in itunes podcast ther is a nice video for the quartz beginners:

     

    https://itunes.apple.com/ar/podcast/quartz-composer-fundamentals/id420558277?i=91322369&l=en&mt=2

     

    (the video n6)

    • 2 posts
    November 1, 2013 9:51 AM PDT

    When I open the Settings inspector on a Sprite patch it only shows one setting (Antialiased Edges). I was hoping to use pixels instead of units, but Billboard patches don't suit my purposes as well as Sprites. What am I missing here?

We'd like to hear from you. Sign in or join now: