How to Best Learn Quartz Composer & Form

The Best Way to Learn Quartz Composer & Form

There’s not really a huge number of Quartz Composer resources that are relative to interaction designers at the moment. Quartz Composer is used by a lot of video jockies (VJs), that would be like the trippy psychedelic drugs-inspired visuals triggered by music. So they’re are not particularly interactive; there are a lot of tutorials out there like how to make, for example, things with feedback loop.

That said, there are a couple of videos by Dave O’Brien, who was one of our interns and now works for Twitter, where the videos would teach you how to recreate Facebook’s home. So you know there’s a goofy chart head. He made a three part-video talking about how we built that in Quartz Composer. This was before Facebook made the little library called Origami, which has a bunch of patches that made some improvements to Quartz Composer.

Google Form has the same situation where they do have their own community like a Facebook group where we can learn a lot, but I would love to see some more fundamental resource out there. Maybe it’s something I can work on in my own time. Personally, I mostly hacked around to learn these things.

The thing is, Quartz Composer and Form are old paradigms that existed like long before we’ve seen these tools made for the Mac desktop. The single flow stuff has been the most prominent in 3D software, and it was really familiar to me because I spent my early days using Autodesk Maya, which had a node-graph thing where you can rig stuff. For example, when animating a character, I can twist its arm, which is similar to making the character flex a muscle. You can wire things up with each other and tell it to rotate 30 degrees, scale 20 percent, etc. When you think in these ways, animation isn’t that difficult.

I’d say the best way to learn Quartz Composer, form, or any these signal processing apps, is to just come up with very simple interactions. Alternatively, you can find something in one of your own projects to apply it to (e.g. making a hover state, a toggle, etc.) You might already know how to do these things with some simple Javascript, so learning how to recreate that stuff in this signal processing environment will open your mind to understand how to do the other pieces.

Auto-layouting Multiple Screens in Quartz

Unfortunately, you can’t auto-layout multiple screens, and this layout issue is the bane of my existence! Something I think that Quartz Composer and form is sorely missing is the concept of a state machine. I saw a couple of libraries where you can toss a PSD into it and it would lay it out, but it’s all based off of top/left/etc coordinates instead of views and subviews. So, layouts are still a pain, and it’s something we’re working on really hard here at Keezy. We just started opening up that can of worms, but at the moment there’s nothing good for auto-layouting right now. Hopefully it’ll get better.

Is there something similar with Form?

For a while, it was a rumor Facebook their own thing but hadn’t released it. I think they ended up snagging a lot of interesting ideas when they acquired Mike Matas from Apple, who has done a lots of Quartz Composer prototyping from over there. I think they got a lot of interesting secrets from him and other people. I know they’re working on that stuff over there and I’ve been trying to grill it out of the people who work there, but I don’t know if it’s even on their radar to consider getting that stuff out. At any rate, the main thing form has going for them is it can let you get things to a device, but I think Quartz Composer is definitely more powerful.

Other Posts in This Series

• UX Design Tips: How to Make Amazing Animated Mobile & Web Apps
• How to Get Started with Animation Design