I recently pushed out version 1.0 with some new features that make OriDomi easier to use.

It now has an internal queueing system so you can chain up effect sequences instead of dealing with callback handlers. [1] What looks like a chain of synchronous calls will now be deferred and sequenced automatically, e.g.:

folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();

Secondly, OriDomi elements are now fully responsive, meaning they adapt to changing dimensions caused by media queries, window resizing, etc. You can see this behavior with the demos by resizing your browser, or on the current iteration of my personal site. [2]

Finally, there are two new methods that make it easy to do custom folding behavior and content manipulation, .map() [3] and .modifyContent() [4]. The former lets you pass your own function to define folding based on input angle and panel index.

It's still relatively lightweight with zero dependencies and 7.6KB gzipped and minified. More than anything, a testament to what you can do with the modern browser API.

Looking forward to seeing what else people do with it. Check out the annotated source [5] for a look at how it works.

[1] http://oridomi.com/#queueing

[2] http://oxism.com

[3] http://oridomi.com/#custom

[4] http://oridomi.com/#content-manipulation

[5] http://oridomi.com/docs/oridomi.html

For those interested in going beyond what the docs cover, the annotated source page is a great place to understand the inner workings.

  console?.warn 'OriDomi: First argument must be a DOM element'

So, my friend Torsten (who is really into papercraft and origami) explained to me the purity hierarchy within the papercraft community.

At the bottom is having to cut the paper and use glue in your creations. One level above that is if the form requires only cutting or tearing. Getting more and more pure is the form known as kirigami, which involves cuts but is made from a single sheet of paper as the base. At the top is origami - no glue, no cuts, only folds (although I'm not sure if there is such a thing as higher order origami), and ideally only one sheet of paper.

The comparison with functional programming ("no glue and cuts" and "no state") is so obvious I'm surprised I've never seen it in the wild - maybe because programming has more in common with algebra, whereas origami is geometric?

Although mostly unrelated to this library, we can conclude that some of the effects in OriDomi should be in a section called KiruDomi. ;)

Actually, from a usability perspective, I see a problem with using those effects, like "twist" and "fracture": once scrambled, it is not obvious from the shape in which way to drag to unfold again, unlike with an effect like "stairs"

Actually, it does occur in the wild ;):

http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.p...

http://www.google.com/search?q=algebraic%20origami

Thanks!

How would multiple sheets of paper really differ from cuts?

My first experience with functional programming was being quizzed to solve certain maths problems with Haskell, and not being allowed to save intermediate results in a variable like an integer was really frustrating due to existing habits. Yes, yes, accumulators and recursion - point is our instructor gave us zero hints about how to think differently, and just kept saying "no, Haskell has no variables."

It might say more about how poorly guided my first encounter with functional programming was, but still, I'd say that is a lot like what you just described.

Er... what? What does "glue and cuts" mean in functional programming?

And functional programming has state, like most other programming paradigms (see the ST and State monads).

You get €5,000 for passing the qualification phase. Are you up to the challenge?

Edit: clarification, 10 teams will be selected from the qualification phase for the design phase and awarded €5,000. That's at least how I understand it :) (I am not involved in the competition in any way.)

Looks AMAZING in webkit browsers! Sadly in firefox I get "jaggies" on the diagonal edges due to the lack of antialiasing.

I noticed that adding a transparent outline (outline: 1px solid transparent;) to the class ".oridomi-mask" I smoothed these jaggies. Although they look better they still aren't quite as crisp as webkit.

Update: Correction, didn't work the first time I went to the link but the second time was fine.

(No IE11 supports at all, I'm hoping it at least runs well in Chrome / Webkit browsers?)

(I hate to be negative, but the aliasing really is quite extreme! Sorry!)

  outline: 1px solid transparent;

It's a hack but it does give nice anti-aliased edges.

Performance is perfectly smooth for me even with the AA hack above on Windows.

Playing with it more, my performance complaints appear to actually be caused by individual elements losing my mouse when I am clicked down on them and then drag outside of their bounds. This makes it seem like I have to keep re-grabbing things, the end effect is a lot of stuttering as I release and reclick on an element to grab a hold of it ahead.

Purely perceptual, but still nasty.

http://oridomi.com/#ripple

http://caniuse.com/#feat=transforms3d

http://stackoverflow.com/questions/19483742/does-ie11-suppor...

Of course now that IE is supposed to work they won't let you use the conditional comment targeting method so I must - it seems - break it for IE11 by instructing all IE above 9 to fallback to IE9 compatibility mode.

Nothing else seems to fail with it and applying the hack (IE9 compat mode in a meta-tag) is problematic too.

Has IE changed that much?

That said the site is an application generated mess, it's painful. So maybe IE have really come around.

The problem is old IE. fuck old IE and every bit of its ridiculous, antiquated and outdated self.