I recently made one that is simulates a step-by-step folding. The player supports play, replay, forward, back, and restart. The Creator generates the domain specific steps via the UI. It can do most squash, petal, crimp, rabbit ear, and inside & outside reverse folds. Follow the tutorial in the /create page to learn more.
I'm going to complain about this, because I have attempted to follow several origami books in the past to utter failure, usually due to a single cursed step that I simply could not parse (and video-tutorials always corresponding to a similar but different design) -- I want this to be a useful thing.
Using video control icons for operations that have nothing to do with the associated video control behavior is insanity.
Play seems to mean play the current step animation (not sequence of steps)
Restart seems to mean replay the current step animation (not restart the whole
sequence)
Fast Forward/Backwards seems to mean move one step forwards/backwards
Not sure what video mechanic |<- corresponds to, but >| is usually "next video", and here it means "restart sequence"
It also irks me that you can't skip to a specific step by clicking the item in the list
restarting the animation sometimes resets the camera position, defeating the purpose of being 3D. Crane steps 9,10,11 seems to do this consistently
I actually have no idea why there's an animation in the first place. It seems like it's always two-frames -- one to show the arrows, the other to show eventual crease? Since it doesn't actually animate into the next image, I think this would be better off as simply a toggle flag to view and persist
Relevant points in the current step should probably be perpetually highlighted, rather than only on-hover. On hover, do an additional highlight (bigger circle, brighter color, etc) to denote the specific number hovered on.
I agree with all this, and also: don't use the "play" icon as a "current step" indicator on the steps list, I kept trying to click it. People will expect a "play" icon to be a button.
I also had no clue that you could change the viewpoint, there's no indication that this is possible aside from the subtle mouse cursor, which I didn't notice.
Actually animating the folds would be useful. This still mostly relies on the user understanding the meaning of the dotted/dashed lines, especially since the folding arrows are only shown briefly. I don't think I would be able to follow what's happening if I didn't already know how the lines work. Step 4 of the Crane is especially confusing without animation.
> I have attempted to follow several origami books in the past to utter failure, usually due to a single cursed step that I simply could not parse
That's part of the challenge of origami books. The step-by-step graphical fold-notation and vocabulary is, still, the best way to communicate this stuff. It's hard but rewarding if you see it like a puzzle. Just put it aside and come back to it or start over with larger paper.
The 3d animation stuff is nice. This latest effort in the OP looks great. It's not how one actually folds stuff, however, unless it's a regular tessellation (for making a hull). For things like animals, one almost never starts with creases first and then simultaneous movement of the whole thing into the final shape.
I think this woman is amazing, and that this is only a first step to using three.js/webgpu both for instructional and engineering use. If anyone wants to read some context and analyis on this topic, I wrote a paper on it a few years back for Georgia Tech’s Educational Technology course:
The most interesting tidbit, for me, is the connection to Erik Demaine’s other work on computational origami, and specifically the .FOLD file format specification. As I show in that repo it needs augmentation, but I hope it’s the seed a one-day flourishing computational origami community.
Whoa. This was way more impressive than I expected! And now I'm learning about Kirigami (and hoping my ancestors forgive me for not knowing this already).
https://foldmation.com
Edit: Best viewed on a computer/tablet. Please revisit if you're on a mobile.