Switching from Origami to Form. A Curmudgeon’s Diary.

enter image description here

You may have heard about the Relative Waves product called Form. A visual programming tool largely inspired by Quartz Composer that “lets you build custom native prototypes directly on the device.”

Google acquired the product two weeks ago and made it available for free. So, if the price (~$80) ever made you second guess your actual need for a tool like that (especially when there’s the original Quartz Composer turbo boosted by Facebook’s Origami) that no longer is an issue.

As you can read on its website: “Form prototypes are native. They have access to the device’s camera and other sensors. Prototypes built with Form are as powerful as their coded counterparts”

Device Sensors

Indeed, the first thing I did with Form was a simple prototype that tested the above statement. I connected the Camera Preview patch to a View patch (analog of the Layer patch in QC) and the Device Motion patch let me use the pitch, yaw, and roll outputs to manipulate the rotation and position inputs on the View patch. Lo and behold, there appeared a rectangle with my face (front camera preview), rotating smoothly in 3D to reflect the way I was moving the iPod. I played with this stupid thing for 5 minutes and couldn’t stop smiling. AMAZING!

The big ol’ holy grail of the Origami Community, the ability to easily publish your composition directly to the device, is finally here, it’s free, and it’s backed by Google.

I dove head first into the Form editor. Quartz Composer wasn’t designed specifically for mobile design prototyping, but Form was. Naturally, I expected it to be superior to QC. As it turned out… Not yet.

Well, at first glance it looks a bit like QC’s twin brother. The patches, the keyboard shortcuts, and the workflow are all nearly the same. There are some cool new features like pinning a value output directly on a cable or creating a draggable input pin directly on the patch.

Output value on a cable

Unfortunately, there are some drawbacks, too.

Where’s the Mac Viewer?

The first letdown waiting for you once you install Form is that there’s no Viewer window. The device is your only testing environment.

I know I sound like a spoiled brat right now. Or a schizophrenic. I just said how great it is that we can finally easily publish the prototype to the device and now I’m bitching that I want to see it on the monitor again.

Well, the ideal working environment would include the viewer/simulator for quick testing and the ability to publish to device after you’re done building. I was happy as a pig in mud with seeing my prototype on the device, but quickly started missing the good ol’ viewer window once I started building something slightly more complex. Another issue with that setting is that there’s no simple way to reset the composition. Or maybe I just couldn’t find it. The workaround I did find requires you to disconnect the device and connect it again using the device manager.

Fortunately, Mac Viewer is included as a feature under Future Releases in the development roadmap for Form.

Another big letdown is that there is no option to publish input splitters. This is a must-have feature and a huge time saver even in small projects. There is a way to create a splitter on an existing cable, but you still can’t publish one from the output.

Some Interaction and Gesture patches are buggy and some of them will do crazy things if you leave the device alone for a while. Nothing really major, though. There are no time-based animation patches. Spring, with its enigmatic Strength and Damping input, is the only option. Also, you can’t zoom in/out of the editor canvas.

What really drove me to the edge of sanity were the input fields on the Patch Inspector. Trying to put decimal values in there is a truly infuriating experience. Also, they love to reset to default values when you click them so always put the value in before you change the focus. But don’t use the comma even though… they clearly display values separated by a comma. Still, nothing that can’t be fixed in future releases.


There is one big adjustment to make, though. It’s big because you need to change something that nestles deep down in the wiring of your brain once you get fluent with the Quartz Composer workflow.

Form patches cannot directly influence their own inputs. As of now (1.0.2), recursions like these will result in a crash of the viewer app.

If you’re not sure what I mean by “recursion,” consider the example below.

Stopwatch example

Let’s not look at the usefulness of such a setup and focus instead on the actual connection.

The output of the Stopwatch patch is connected to the Conditional patch and the result of the condition goes back to Stopwatch. Conditional checks whether the value is equal to or greater than 5 and returns 1 if it is. That signal goes back to the Stopwatch and stops counting. In other words, Stopwatch will “halt itself” after 5 seconds. Obviously. Right? It’s like a robot that pulls on its own power cord. Once the plug is out of the socket, the robot stops because it has no power supply. Nothing magical about it. Simple cause and effect at work.

Well, it won’t work in Form. It will crash the Viewer. There is some kind of initial evaluation that can’t get past the fact that there is a connection between the output and input of a single patch. No matter how long the path is and how many patches it leads through. Once it reaches the root patch again, it falls into a loop and “explodes.”

To quote Max Weisel, one of the creators of Form: “At the very least, in future versions the runtime will detect the infinite loop and break out, but it will most likely result in undefined behavior.”

It looks like this model is here for good, so it’s super important to make that switch in your mind as soon as possible.

Luckily, there is another dual-patch to deal with situations like these and it’s called State. State Input will hold the value and pass it to State Output in the next frame. So, the example from above reproduced in Form should look like this:

Stopwatch example Form

Actually, there’s another way to do it and it looks like this:

Stopwatch example Form version 2

So, why the heck do you even…!?

Well, I guess the bottom line is that even in the simplest situations like the one described above, you need to think about frames and passing values between them. In a sense, Quartz Composer did that for you. It took the need to fully understand every part of your composition on a frame-by-frame level off your shoulders, and it invisibly put the State patches for you whenever the evaluation found a loop. Form forces you to manually find and break those loops.

That being said…

Form is the the answer to the most frequent question on any QC/Origami-oriented forums: “How can I launch my composition on the phone?” It is an advantage that will always outshine all the flaws.

I can’t wait for future releases as they will include the Mac Viewer, the SDK, and even Sketch and Photoshop Plugins, making it the ultimate superstar on the prototyping stage.

Here’s hoping your transition goes smoothly.

As an exercise I rebuilt my pagination patches in Form:

7 Things Matt Damon Taught Me About Digital Disruption
Magic Wand for Paginated Content