amandaghassaei/origamisimulator

Realtime WebGL origami simulator

OrigamiSimulator

Live demo at origamisimulator.org

This app allows you to simulate how any origami crease pattern will fold. It may look a little different from what you typically think of as "origami" - rather than folding paper in a set of sequential steps, this simulation attempts to fold every crease simultaneously. It does this by iteratively solving for small displacements in the geometry of an initially flat sheet due to forces exerted by creases. You can read more about it in our paper:

• Fast, Interactive Origami Simulation using GPU Computation by Amanda Ghassaei, Erik Demaine, and Neil Gershenfeld (7OSME)

If you have feedback about features you want to see in this app, please see this thread.

All simulation methods were written from scratch and are executed in parallel in several GPU fragment shaders for fast performance. The solver extends work from the following sources:

• Origami Folding: A Structural Engineering Approach by Mark Schenk and Simon D. Guest
  
• Freeform Variations of Origami by Tomohiro Tachi
  

This app also uses the methods described in Simple Simulation of Curved Folds Based on Ruling-aware Triangulation to import curved crease patterns and pre-process them in a way that realistically simulates the bending between the creases.

Originally built by Amanda Ghassaei as a final project for Geometric Folding Algorithms. Other contributors include Sasaki Kosuke, Erik Demaine, and others. Code available on Github. If you have interesting crease patterns that would make good demo files, please send them to me (Amanda) so I can add them to the Examples menu. My email address is on my website. Thanks!

Instructions:

• Slide the Fold Percent slider to control the degree of folding of the pattern (100% is fully folded, 0% is unfolded, and -100% is fully folded with the opposite mountain/valley assignments).
• Drag to rotate the model, scroll to zoom.
• Import other patterns under the Examples menu.
• Upload your own crease patterns in SVG or FOLD formats, following these instructions.
• Export FOLD files or 3D models ( STL or OBJ ) of the folded state of your design ( File > Save Simulation as... ).

• Visualize the internal strain of the origami as it folds using the Strain Visualization in the left menu of the Advanced Options.

• If you are working from a computer connected to a VR headset and hand controllers, follow these instructions to use this app in an interactive virtual reality mode. (sorry I think this may be deprecated now!)

External Libraries:

• All rendering and 3D interaction done with three.js
• svgpath and path-data-polyfill helps with SVG path parsing
• FOLD is used as the internal data structure, methods from the FOLD API used for SVG parsing
• Arbitrary polygonal faces of imported geometry are triangulated using the Earcut Library and cdt2d
• numeric.js for linear algebra operations
• GIF and WebM video export uses CCapture

You can find additional information in our 7OSME paper and project website. If you have feedback about features you want to see in this app, please see this thread.

origamisimulator's Issues

error loading SVG files

HI,

Amazing work!

While running downloaded simulator in Chrome, OSX (10.10.5) i get this error on launch

Error loading SVG assets/Tessellations/huffmanWaterbomb.svg : [object ProgressEvent]

I do not get the error in firefox.

s

High-throughput simulations of origamis

Thanks for the nice tool! I was wondering whether there is any way of running those origami simulations in a high-throughput manner. I am more familiar with Python so any suggestions in terms of language would be much appreciated.

BTW, it seems that Prof. Erik Demaine was replying to these issues. If so, I would like to shout out to your excellent MIT course "Introduction to Algorithms". Although I took it via MIT OpenCourseWare, I really learned a lot. Thanks a lot for teaching it!

SVG support extension

Here are some incompatibilities importing SVG that I've bumped into. Help implementing them would be appreciated; else I will work on them as time allows.

• Paths do not support z/Z which closes the path (common in Inkscape, for example)
• Global <style> is not supported (and warned), but common with Adobe Illustrator output.
• Groups (<g>) with transforms are not supported (but transforms on rendering elements are supported). Sadly not dealt with by THREE.SVGLoader. I had to work around this in https://erikdemaine.org/fonts/maze/ (see source).
• Objects in <defs> are treated as regular objects. This is annoying because Inkscape tends to make an invisible <rect> in there, which causes a warning (because it has no stroke). Probably same issue with <symbol>.
• <use> will not expand <defs>/<symbol>s. This is probably less important than the previous item, but I've worked around it many times, so would love to have it.

Missing "COPYING" license file, or equivalent

Hi Amanda,

Could you add a "COPYING" license file outlining what (if any) code licensing you're sharing this under? e.g. https://github.com/openscad/openscad/blob/master/COPYING / https://help.github.com/articles/licensing-a-repository/#disclaimer

Whatever it may be, thanks for sharing what you have!

Andrew.

Insert a CUT into a model based on file.FOLD?

This is a wonderful tool!!! Thank you so much.
Can I insert a cut into a model based on file.FOLD.

I tried to change the edges_assignment to "B", but the model is still connected.
Do you have any advice for me to cut in a model by modifying the file based on FOLD format?

Thank you.

FOLD import robustness

Generating FOLD files in some code of mine, I noticed the following import robustness issues:

• If the FOLD has edges (edges_vertices and edges_assignment, and maybe certain subsets thereof, maybe even in all cases?), then it's required to also have edges_foldAngle. Should default to 180 for valleys, -180 for mountains, and 0 for others.
• If edges_assignment has an unsupported value, then the program crashes. It should instead report an error dialog, like when there are unsupported colors in an SVG file, and default to something (U I guess?).

Error loading SVG assets

I get this in firefox on Linux: "Error loading SVG assets"
//re: just seeing this now, is this still an issue?

Originally posted by @amandaghassaei in #1 (comment)

Fold percentage opacity vs rgba

In the design tips, I thought that fold percentage via opacity meant define stroke colors as RGBA. But I guess that should actually be opacity on the strokes? It might be good to support both (Cuttle can do RGBA but not opacity so far.)

.cuttle.svg: https://cuttle.xyz/@forresto/folds-with-rgba-AJritDsxIJkN

Opacity map to fold angle doesn't work with curves

Example in the Treble Clef example. Getting the effect to work properly is at ~35% folded. Updating the red line in the SVG file to have a 35% or similar opacity doesn't appear to affect the way the piece folds.

C'ant inport simple SVG!

Beautiful app. Good job!
I can hardly wait to try it out with my own designs.

I am trying to import a simple file created with Inkscape before I try the real job. I always get the message "Grouped elements found in SVG, they are currently being ignored by the app. Remove all elements before importing them." I'm sure there are no groups.
Please, can you take a look and tell me what I do wrong.

Thanks in advance,
Bart

<polyline>s don't work

At least this very simple example (output from Cocreate) causes the import code to throw an exception:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="73.0199966430664 73.0199966430664 80.5199966430664 80.5199966430664">
<rect data-id="aS47dNvo5fpb2Gk4H" x="75.52" y="75.52" width="75.52" height="75.52" stroke="black" stroke-width="5" stroke-linejoin="round" fill="none"></rect>
<polyline data-id="7YWXYPdzfyYnuFgE4" points="75.52,151.04 151.04,75.52" stroke="#ff0000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"></polyline>
</svg>

foldAngle import bug

Apparently the current .fold import code assumes that edges_foldAngle is specified in radians, but the spec and the documentation within Origami Simulator says to use degrees (between -180 and 180). Could you add a * Math.PI / 180 multiplier to the import code?

We might also take this opportunity to support FOLD spec 1.1, which uses edges_foldAngle instead of edges_foldAngles. We should support either name when loading. For saving, we should probably use whatever Freeform Origami supports (if it even supports it as input?).

Link to paper

We should link to our 7OSME paper about the simulator in the About page.

Folding order

Hi,

Is there any way to control the folding steps, I believe how the folding process works in orders could help for many use cases.

Regards,

Adding texture?

At first I must say I love your software,
I Thought I asked this before,
Would you please add importing an image as texture , use on obj, simulate it and export with obj as texture?

Keeping a specified face rigid

Thank you so much for this wonderful tool. Can i precise somehow that a face is unfodable? i have an svg file where the base of my origami is a polygon that i want to preserve it during the folding process.

Thank you in advance

Bug in FOLD save or load

Steps to reproduce:

1. Load Examples / Maze Foldings / origami simulator
2. Save as FOLD
3. Load as FOLD

In the result, some faces are (seemingly) missing:

Edit: turns out to be a bug in triangulation of large 3D faces during import, as fixed in #32.

Cannot Export as OBJ / STL

To Reproduce

1. Go to http://apps.amandaghassaei.com/OrigamiSimulator/
2. Load the Paper Crane: Examples > Origami > Crane (3D)
3. File > Save Simulation as OBJ...
4. Use the Default Settings and press Save.

BUG: Nothing happens, no download initiates.

If you open the Console, you'll see this error:

saveSTL.js:128 Uncaught TypeError: Cannot read property 'length' of undefined
    at saveOBJ (saveSTL.js:128)
    at controls.js:160
    at HTMLButtonElement.<anonymous> (controls.js:753)
    at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

This is the section of code it's referencing:

for (var i=0;i<flatGeo.vertices.length;i++){

Thanks,

Donovan

Texturing in app

Let's add the ability to upload a custom PNG, or use an in-built "real paper" texture, to texture onto the folded surface, perhaps registered to the topmost leftmost vertex of the crease pattern by default. In SVG input format, we could even support an <image> tag (with inline data).

As suggested in #50, we could also support exporting the folded surface as OBJ with texture.

Face opacity?

I'm not sure whether this is technically possible, but supporting semitransparent faces would be a nice visual aid, and a slider for such would fit well with the current color selectors.

Transform support is broken

I previously thought that transform attributes on graphical elements worked, but they don't. Here is an example output directly from Ipe that looks terrible loading.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449pt" height="513pt" viewBox="0 0 449 513" version="1.1">
<g id="surface12902">
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 576 L 320 512 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 512 L 320 448 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 512 L 64 320 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 320 448 L 512 640 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 320 448 L 320 256 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 768 L 256 512 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 320 448 L 320 768 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 512 L 256 256 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 576 L 64 384 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 320 512 L 512 704 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 64 768 L 64 256 L 512 256 L 512 768 Z M 64 768 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 256 576 L 256 512 " transform="matrix(1,0,0,-1,-63,769)"/>
<path style="fill:none;stroke-width:0.4;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(100%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 320 512 L 320 448 " transform="matrix(1,0,0,-1,-63,769)"/>
</g>
</svg>

Simulation Angle Export/ FOLD with multiple frames export

I have completed code to export the current simulation angles for each edge in a custom edges_crease_angle_os: field and added an option to simulate multiple fold percents from one percent to another by a step size as frames and add them to a FOLD file in the FOLD format.
This introduces another file menu item.
Is it appropriate to open a pull request? I feel like these changes are in line with the project, but could see it also not fitting.

Holes in faces

Currently, the triangulator/importer does not support holes in faces unless you get fancy with how you apply facet creases to force it to work. For example, this will import correctly (with a square hole):

In general, this is related to an issue in FOLD where faces do not support holes, see Issue edemaine/fold#21

Error when saving to OBJ

When trying to save the file to OBJ on Chrome, macOS 10.14.4 the following error appears in the console:

Uncaught TypeError: Cannot read property 'length' of undefined
at saveOBJ (saveSTL.js:128)
at controls.js:160
at HTMLButtonElement. (controls.js:753)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

(Saving to STL works correctly)

Paper or mesh thickness

Hi,

I love it so much and just wondering if paper or mash thickness can be adjusted. I know it sounds crazy but the use case I'm looking for is the cartoon fold, and of course, not all have the same paper materials.

Regards,
Rafeek