4 ms·

Origami Simulator

261 points by diginova 3y ago

bbor 3y ago
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: https://github.com/robbwdoering/origamiodyssey/blob/main/CS6460%20Proposal.pdf https://github.com/robbwdoering/origamiodyssey/blob/main/CS6... 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.
daedlanth 3y ago
[dead]
mensetmanusman 3y ago
This is one of many impressive projects, awesome to see someone with passion continue to execute and finish.
metflex 3y ago
this deserves 2000000 points
- ProllyInfamous 3y ago
  I just purchased the most-capable GPU that my motherboard can handle, and this has been quite a wonderful and informative stress-test. 120Hz never looked so brilliant, and the in-browser simplicity/accessibility/controls are just astonishingly breath-taking. ¢¢ +1
Stevvo 3y ago
Playing around with this is see many parallels between Origami and UV mapping. UV mapping is basically origami in reverse.
thomasfromcdnjs 3y ago
Well I just developed a love for origami...
sufficer 3y ago
This is really cool. I'm gonna make some origami noob stuff irl now
ninacomputer 3y ago
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).
fuzzythinker 3y ago
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. https://foldmation.com https://foldmation.com Edit: Best viewed on a computer/tablet. Please revisit if you're on a mobile.
- moffkalast 3y ago
  Very nice, but it would be cool if the camera view wouldn't reset every time you go ahead one step, it's very disorienting.
- lovegrenoble 3y ago
  I love little web gems like this, here another one: https://sharkle.com https://sharkle.com
  - diginova 3y ago
    Actually I landed on this website using Sharkle so credits to that!
- setr 3y ago
  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.
ur-whale 3y ago
Very nice sim, but looks like the self-intersection problem isn't solved ... the crane example under strain goes sideways.
- Kluggy 3y ago
  The paper airplane one passes though itself multiple times during the fold from 60%-100%
flyrain 3y ago
Pretty cool! I like it.
foehrenwald 3y ago
If you grab and move really fast the simulator breaks...
bobse 3y ago
[dead]
01HNNWZ0MV43FF 3y ago
Do I need multi-touch? I tried grabbing with my mouse and it just wiggled the paper..

261 points by diginova 3y ago

bbor 3y ago

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: https://github.com/robbwdoering/origamiodyssey/blob/main/CS6460%20Proposal.pdf https://github.com/robbwdoering/origamiodyssey/blob/main/CS6... 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.

daedlanth 3y ago

[dead]

mensetmanusman 3y ago

This is one of many impressive projects, awesome to see someone with passion continue to execute and finish.

metflex 3y ago

this deserves 2000000 points

ProllyInfamous 3y ago
I just purchased the most-capable GPU that my motherboard can handle, and this has been quite a wonderful and informative stress-test. 120Hz never looked so brilliant, and the in-browser simplicity/accessibility/controls are just astonishingly breath-taking. ¢¢ +1

Stevvo 3y ago

Playing around with this is see many parallels between Origami and UV mapping. UV mapping is basically origami in reverse.

thomasfromcdnjs 3y ago

Well I just developed a love for origami...

sufficer 3y ago

This is really cool. I'm gonna make some origami noob stuff irl now

ninacomputer 3y ago

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).

fuzzythinker 3y ago

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. https://foldmation.com https://foldmation.com Edit: Best viewed on a computer/tablet. Please revisit if you're on a mobile.

moffkalast 3y ago
Very nice, but it would be cool if the camera view wouldn't reset every time you go ahead one step, it's very disorienting.
lovegrenoble 3y ago
I love little web gems like this, here another one: https://sharkle.com https://sharkle.com
- diginova 3y ago
  Actually I landed on this website using Sharkle so credits to that!
setr 3y ago
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.

ur-whale 3y ago

Very nice sim, but looks like the self-intersection problem isn't solved ... the crane example under strain goes sideways.

Kluggy 3y ago
The paper airplane one passes though itself multiple times during the fold from 60%-100%

flyrain 3y ago

Pretty cool! I like it.

foehrenwald 3y ago

If you grab and move really fast the simulator breaks...

bobse 3y ago

[dead]

01HNNWZ0MV43FF 3y ago

Do I need multi-touch? I tried grabbing with my mouse and it just wiggled the paper..