Show HN: FoldMation – Interactive origami learning and creation

[fuzzythinker]

https://foldmation.com

Hi, I've created an application where you can follow step by step origami fold instructions, and a Creator where you can make these interactive folds.

On comparing to video instructions, you have the ability to quickly skip/rewind steps and replay a complicated step many times.

On the creation side, there have been one or two attempts at this before, but those solutions rely on mouse drags as the user interface. This greatly limited the kinds of folds possible. The foldMation Creator uses commands, keywords and values to compose a domain specific language/step and provides a (relatively speaking) easy to use user interface to compose the steps.

For those interested in using the Creator, please go through the tutorial at the top of the create page.

Btw, the DSL for foldMation uses https://github.com/mationai/mation-spec. I created it since I couldn't find anything out there that is similar, allowing me to specify a well structured data with English-like readable syntax.

Let me know what you think?

[fuzzythinker]

Oh wow, just realized looking at the footer here that @thunderbong posted it 2 weeks ago, thanks!

I didn't get a chance to reply to some feedback to another post I commented on few days ago (one on Origami Simulator), so I'll post/reply them here.

The Creator is capable to make most squash, petal, crimp, rabbit ear, and inside & outside reverse folds.

- the step indicator has been changed from a "play" like icon to a circle to lessen the confusion, thank you.

- I will likely add point # circles to points for the next step in play mode.

- Not in complete agreement with showing fold arrows then animation of the fold is bad. Even if it is, it's difficult to change that, and there are more important bugs, fixes and features that to me have a higher priority.

- Not knowing that the model can be panned. The hand cursor is a big hint. I also appreciate finding features and gems on my own, and I think many users can find this feature.

ps. You can email/share the heart as an autoplay V-day "e-card" with http://foldmation.com/fold/m7ua3j8e6feac--heart?p=-1 . The p=-1 makes it autoplay, but it errors out if model has more than a few steps and the heart is the only model with a few steps so it's prefect.

[pimlottc → fuzzythinker]

I appreciate you making changes based on the previous feedback!

Looking at the V-day heart you linked, the “autoplay” feature is more like what I expected the “play” button to do: play through the whole construction, start to finish.

I also like the 3D folding animation for the last step; it would be nice if all the folding/creasing steps were fully animated like this. Unfortunately the last animation doesn’t seem to work correctly when I try to replay it, I have to reload the page entirely for it to work again.

[fuzzythinker → pimlottc]

The idea for the play mode is a better tool than video, as mentioned in my top main text. So while autoplay to the end is cool (when I fix the timing issue on more than a few steps), I don't see how that can be more useful than a manual controlled one for learning purpose if I have to choose only one for the play button. If I can fix the timing issue, the autoplay will likely get its own button.

Forgot to reply to "why can't click on step in steps viewer to skip". That's my original intention, but the effort to make that work well is too time consuming, so the step viewer is just that, a viewer.

My original thought on selecting other models to view is something like youtube. But I like the cleanliness of the current layout and not clutter it with next suggestions. I think clicking "folds" at the top is a fairly easy thing to do to find the next fold.

[pimlottc → fuzzythinker]

I don’t think there’s anything wrong with going a different way than auto play. But call it something else. ”Play” as an action has well-established conventions, and contradicting them will just cause confusion.

Maybe just rid of the play button and use next/previous arrows instead? Something like that has a clear expectation of “one thing at a time”.

[pineaux → pimlottc]

I totally agree. You COULD use play for next step. But the convention is that the next step is used by the "next track" button. This is because play usually also goes to "next track" and then plays it. Play should continue while the end is not reached (end of album/end of book/end of origami object).

[fuzzythinker → pineaux]

Replying to your comment 4-lvs deep:

> Play for playing all steps in succession. Pause for pausing play... No need for other icons

Good idea, I'll give it a go when I fixed the timing. All other icons - replay a step, fast forward/backward, and restart from step 1 are all still needed.

[fuzzythinker → pimlottc]

I don't see an contradictions. It is just play all vs. play 1 step. There are existing previous/next buttons already, they skip back/forward a step. If anything, it is the play-all that will the odd one since it doesn't really fit along with all the other buttons. When it's ready, it will likely be placed on the rightmost and be clearly labeled.

[em-bee → fuzzythinker]

the triangle play arrow is frequently used as a next page arrow as well, and noone expects pages to advance automatically instead of just going to the next page when clicking it

[fuzzythinker → em-bee]

Yup. Thank you. It is playing 1 step, so play is right icon for it. I've found a movie/reel play icon that is perfect for the play all should I find a way to fix the timing issue on > than few step folds.

[pineaux → fuzzythinker]

You dont need another icon.

Play for playing all steps in succession. Pause for pausing play. Next track for next step in the folding. Its the most logical. You should see each step as a new track and the whole origami object as an album. No need for other icons

[notfed]

Awesome!

Nitpick first-impression feedback:

- On main screen, I have no idea what the "Lv: 1", "17", "1heart" mean. Add tooltips to make them discoverable.

- In a fold, the icons for prev and next step are unintuitive (to me). Each icon literally has two arrows, but only moves one step. I'd suggest simply using left and right arrow symbols.

[fuzzythinker → notfed]

Agree. Changed to ones with a vertical bar now. I was debating which to use and didn't rethink after. I do think ones with a vertical bar is more applicable here since they are more discreet like CD/dvd tracks, where double triangle is more for "continuous" fast tracking.

Will likely add tooltip as suggested.

Oh, unrelated. I see most visit with a mobile. Please revisit on a computer or tablet for a much better experience if you find it interesting enough to play with more.

[smusamashah]

I think needs more examples. I am not into origami and my first thought was 'is there an example to fold a paper box here' which I didn't find. So may be simple utility items like a box or even some paper airplanes will be more interesting for new users like me.

[fuzzythinker → smusamashah]

Agree. That's why I made and opened up the creator and spent much time creating the quick reference and tutorial UI and contents. That way, the burden is not on me to create most models. Right now 2 creators other than myself have creations on it. One in particular has amazed me with fold steps and I didn't even thought of!

Specifically on boxes, it may be possible, but I think it's something that is not supported at the moment. Folds that are not complete 180 are "shaping" fold steps that is are done towards the end, like in crane. Boxes not only have these, but may also include folds the engine currently doesn't support.

So yes, not enough models but more are coming, just probably not boxes.

[fuzzythinker]

Update, in case anyone is still reading this. No animation when pressing play button was a bug, now fixed. The timing issue on auto-play-all has been fixed too, and a play-all button has been added, with the ability to pause.

It is now a much better experience for those who just want to enjoy "watching" how the folds are done.

Enjoy!

[fuzzythinker]

The number circles has now been added to show in the model. Hover on the point in the steps viewer will highlight the circle in the model.

[turtlebits]

This looks great, however the UI is pretty infuriating.

- Clicking on a step does nothing, and using the arrows sometimes advances steps, but sometimes gets stuck in a loop or takes multiple keypresses? (ie 3>4>3>4>4>5).

- Arrow key also scrolls the list so your current step moves out of view.

- There is a long lag between keypress and diagram change.

- The numbered circles don't show up in the diagram, and clicking them does nothing (even though they should a "link" pointer on hover).

[fuzzythinker → turtlebits]

Thank you for the feedback.

- Clicking on a step does nothing -- Each click shows the fold/crease arrow steps followed by a fold animation if it's a fold or turnover. If it is really stuck, can you please provide the link and browser/OS you are using?

- Arrow key also scrolls the list so your current step moves out of view. -- Yes, arrow keys are mapped to the controls. But I'm not sure I understand what do you mean by "current step moves out of view". Can you please elaborate?

- There is a long lag between keypress and diagram change -- As mentioned above, each click display the fold/crease arrow hints for ~1.5 secs followed by an animation if it's a fold or turnover. If you want to skip around, use the fast forward/backwards buttons.

- The numbered circles don't show up in the diagram, and clicking them does nothing -- Yes, as mentioned in my other comment, the number circles will be added to be shown in the model in the future. Right now, it does do something -- it shows a small circle indicating where that point is.

[pekim → fuzzythinker]

> Clicking on a step does nothing

I found the same thing. For example, if you're currently at step 2 and click on step 6 in the list nothing happens. I would expect it to jump immediately to step 6.

I've tried in both Firefox and Chrome (on Fedora 39 with sway window manager).

[fuzzythinker → pekim]

I missed what he means by "Clicking on a step does nothing". As mentioned elsewhere here, the steps viewer is view only and just shows the steps of the fold. All the controls are at the bottom of the screen.

[fuzzythinker → fuzzythinker]

I've now dimmed the text on non-current step.