Origami Studio from Facebook


New prototyping tool coming out from Facebook, Origami Studio. Works a lot like Quartz Composer (which they used to use, but now are effectively replacing).

Looks interesting, but I’m not sure I’m sold on the “patches” concept. Also, part of me feels like instead of making super high fidelity mockups, shouldn’t these tools let designers make the actual product? I know there’s a benefit to sketching out ideas without worrying about productionizing / making the thing polished, but it seems like it should at least be an option (without designers having to “learn to code”).



What do you mean that you’re not sold on “patches”? (Full disclosure: I didn’t have the patience to watch the full video :blush:) Do you mean the idea that everything is a node in a dataflow graph?


Right, that’s sort of how I’m leaning but I should try to put more argument behind it :smiley:

I’ve only had limited experience using a graph/patch system, built a few shaders with one in the 3D tool Blender, and it worked well for a limited pipeline-ish thing. But I think my concerns are:

  • Things could become really messy quickly (though I could argue the same is true for plaintext code…we’re just better at reading it because we have practice). Part of the mess is from having “wires” all over the place.
  • Hard to see the “flow” unless it’s explicitly a left-to-right pipeline (though again this might be showing my bias from typing code, which itself is hard to follow without practice)
  • The biggest one is lack of direct manipulation. Shouldn’t they be drawing out / connecting the layers themselves? (easy for me to say, but of course I don’t think it’s ever been done super well in practice, and I sure as hell don’t know how to do it better, yet. Mostly just feels like it should be more direct, but I can’t back that up).


Gotcha. Yeah, I’m not sure that visual dataflow is a good general model for organizing programs. I think it’s a really good fit for certain things though.

One of the nice things about “wires” is that you avoid having to come up with variable names. Of course, that can also be a negative as variable names often serve as good documentation. PureData has “wireless connections”, which lets you name things when you want to: http://en.flossmanuals.net/pure-data/ch040_wireless-connections/

It would be interesting to have a visual dataflow language with some kind of automatic layout. It would be tricky, but maybe it would be possible to strike a nice balance between the total freedom of things like Origami/QC, and the linearity of textual code.


The wireless thing is neat.

Hastily thrown together / contrived pictures to follow, but it got me thinking about the linearity of text code, what if instead of messiness like this

<img src="/uploads/default/original/1X/49d2b600507159fc760a07262d5604021ad69076.png" width=“500” height=“500">

There was something a little more like

<img src="/uploads/default/original/1X/e7b74067f9b8f5e4908d99ee86282619db56a3cd.png" width=“500” height=“500">

Individual pipelines affecting the same nodes. So, the first pipeline might be labelled “spring stuff” and the second might be labelled “stretch out the image” or something. The purple image layer is the same object in both cases, just being affected in different places without all the mess. I’m not sure how you’d express these are the same objects, exactly (perhaps there’s another place that houses the nodes themselves, a list or something). It could also be read left-to-right instead of top to bottom. Though I wonder if that just becomes text code again after all heh