This app uses <atarget="_blank"href="https://threejs.org/">three.js</a> to visualize and interact with the 3D geometry of the folding.<br/>
<br/><br/>
Triangulation of quad faces in origami patterns is achieved by adding the shortest edge across the quad (this helps to preserve symmetry, which
Built by <ahref="http://www.amandaghassaei.com/"target="_blank">Amanda Ghassaei</a> as a final project for <ahref="http://courses.csail.mit.edu/6.849/spring17/"target="_blank">Geometric Folding Algorithms</a>.
makes the simulation work better). Arbitrary polygonal faces are triangulated using the <atarget="_blank"href="https://github.com/mapbox/earcut">Earcut Library</a>.<br/>
Code available on <ahref="https://github.com/amandaghassaei/OrigamiSimulator"target="_blank">Github</a>.
Additionally, I used <atarget="_blank"href="https://jquery.com/">jQuery</a>, <atarget="_blank"href="http://getbootstrap.com/">Bootstrap</a> and the
<atarget="_blank"href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> to build the GUI.<br/>
<br/>
Built by <ahref="http://www.amandaghassaei.com/"target="_blank">Amanda Ghassaei</a> as a final project for <ahref="http://courses.csail.mit.edu/6.849/spring17/"target="_blank">Geometric Folding Algorithms</a>.
Code available on <ahref="https://github.com/amandaghassaei/OrigamiSimulator"target="_blank">Github</a>. 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 <b>File>Demos</b> menu. My email address is on my website. Thanks!
</p>
</p>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-content -->
...
@@ -656,16 +661,17 @@
...
@@ -656,16 +661,17 @@
<b>Importing SVG:</b><br/><br/>
<b>Importing SVG:</b><br/><br/>
<ul>
<ul>
<li>The SVG importer supports path objects and line objects (coming). Please convert polygons to paths before importing.</li>
<li>The SVG importer supports path objects and line objects (coming). Please convert polygons to paths before importing.</li>
<li>Valley folds are red - <spanstyle="color:red">rgb(255, 0, 0), hex #ff0000</span></li>
<li>Valley folds are <spanstyle="color:red">red</span> - rgb(255, 0, 0), hex #ff0000</li>
<li>Mountain folds are blue - <spanstyle="color:blue">rgb(0, 0, 255), hex #0000ff</span></li>
<li>Mountain folds are <spanstyle="color:blue">blue</span> - rgb(0, 0, 255), hex #0000ff</li>
<li>Outline edges are black - <spanstyle="color:black">rgb(0, 0, 0), hex #000000</span></li>
<li>Outline edges are <spanstyle="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
<imgsrc="assets/examplepattern.jpg"/>
<imgsrc="assets/examplepattern.jpg"/>
<li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
<li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
To control the triangulations draw lines in yellow - <spanstyle="color:#999900">rgb(255, 255, 0), hex #ffff00</span></li>
To control the triangulations draw lines in <spanstyle="color:#cccc00">yellow</span> - rgb(255, 255, 0), hex #ffff00<br/>
In general, patterns move better when their triangulation is symmetric and minimizes long, skinny triangles.</li>
<imgsrc="assets/patternwithtriangulations.jpg"/>
<imgsrc="assets/patternwithtriangulations.jpg"/>
<li>Stroke and line style do not matter.</li>
<li>Stroke and line style do not matter.</li>
<li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180°
<li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180°