doc

css/main.css

@@ -510,4 +510,9 @@ a.seeMore.closed>.fui-triangle-down{
     left: 0;
     width: 100%;
     height: 100%;
+}
+
+object{
+    width:100%;
+    margin-bottom: 10px;
 }
\ No newline at end of file

index.html

@@ -1252,28 +1252,60 @@
                     <b>Importing SVG:</b><br/><br/>
                     <ul>
                         <li>The SVG importer supports path, line, rect, polygon, and polyline objects with the appropriate
-                            <a href="https://www.w3schools.com/graphics/svg_stroking.asp" target="_blank">stroke</a> color:</li>
+                            stroke color:</li>
                         <li>Mountain folds have <b style="color:red">red</b> stroke - rgb(255, 0, 0), hex #ff0000</li>
                         <li>Valley folds have <b style="color:blue">blue</b> stroke - rgb(0, 0, 255), hex #0000ff</li>
                         <li>Boundary edges have <b style="color:black">black</b> stroke - rgb(0, 0, 0), hex #000000 - use
                         this edge type for both the outline of the pattern, and any internal holes.</li>
-                        <li>Cuts have <b style="color:#00ff00">green</b> stroke - rgb(0, 255, 0), hex #00ff00- use this edge type
+                    </ul>
+                        <object type="image/svg+xml" data="assets/doc/simplePatterns.svg">
+                          Your browser does not support SVG
+                        </object>
+                    <ul>
+                        <li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180&deg;
+                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).  Any fold angle between  0&deg; and 180&deg; may be used.  The following
+                            patterns contain creases with varying final fold angles:
+                        </li>
+                    </ul>
+                        <object type="image/svg+xml" data="assets/doc/opacityExamples.svg">
+                          Your browser does not support SVG
+                        </object>
+                    <ul>
+                        <li>Before the model can enter the simulator, this tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
+                        To control the triangulations, draw lines in <b style="color:#cccc00">yellow</b> - rgb(255, 255, 0), hex #ffff00.  In general, patterns are more stable when their triangulation is symmetric and minimizes long, skinny triangles.  You can see
+                        how the app automatically triangulated your pattern by enabling "Facet Crease" visibility in the <b>Edges Visiblity</b>
+                            menu on the left side of the screen.  It may not be necessary to add triangulation lines on your pattern.</li>
+                    </ul>
+                        <object type="image/svg+xml" data="assets/doc/triangulations.svg">
+                          Your browser does not support SVG
+                        </object>
+                    <ul>
+                        <li>Facet creases (yellow triangulation lines) are creases that try to remain flat (0&deg; fold angle) as the pattern folds, but some compliance
+                            in the constraints of the simulation will allow them to bend slightly.  Drawing in facet creases allows you to control
+                            the way the model bends in between mountain/valley folds.
+                        This is especially relevant in patterns with curved creases.
+                        </li>
+                    </ul>
+                        <object type="image/svg+xml" data="assets/doc/triangulationsCurved.svg">
+                          Your browser does not support SVG
+                        </object>
+                    <ul>
+                        <li>Cuts have <b style="color:#00ff00">green</b> stroke - rgb(0, 255, 0), hex #00ff00 - use this edge type
                         to form thin slits in the pattern.</li>
-                        <li>Hinges (undriven creases) have <b style="color:magenta">magenta</b> stroke - rgb(255, 0, 255), hex #ff00ff</li>
                     </ul>
-                    <img src="assets/examplepattern.jpg"/>
+                        <object type="image/svg+xml" data="assets/doc/cuts.svg">
+                          Your browser does not support SVG
+                        </object>
                     <ul>
-                        <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 <b style="color:#cccc00">yellow</b> - rgb(255, 255, 0), hex #ffff00<br/>
-                        In general, patterns are more stable when their triangulation is symmetric and minimizes long, skinny triangles.  Triangulation lines are not always necessary, look at
-                        the example files in the <b>Pattern</b> view to see how triangulation lines are used to help make a pattern more stable in simulation.</li>
+                        <li>Hinges (undriven creases) have <b style="color:magenta">magenta</b> stroke - rgb(255, 0, 255), hex #ff00ff -
+                        edges of this type will swing freely.</li>
                     </ul>
-                    <img src="assets/patternwithtriangulations.jpg"/>
+                        <object type="image/svg+xml" data="assets/doc/hinges.svg">
+                          Your browser does not support SVG
+                        </object>
                     <ul>
                         <li>Line style and stroke width do not matter.</li>
                         <li>Remove all groups and clipping masks from your file before importing.</li>
-                        <li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180&deg;
-                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).  Any fold angle between  0&deg; and 180&deg; may be used.</li>
                         <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
                         duplicate lines, and extra vertices falling in the middle of an edge,
                         but it is recommended to remove these errors yourself in order to avoid problems.</li>