documentation

css/main.css

@@ -340,4 +340,8 @@ input.form-control.bigInput{
 #unitsDropdown{
     height: 100px;
     overflow: auto;
+}
+
+.modal img{
+    width: 200px;
 }
\ No newline at end of file

index.html

@@ -628,25 +628,35 @@
                     <b>Importing FOLD:</b><br/>
                     <br/><br/>
                     <b>Importing SVG:</b><br/>
-                    supported line types: path objects, line objects (coming), rect objects (coming).<br/>
-                    valley: red rgb(255, 0, 0), hex #ff0000<br/>
-                    mtn: blue rgb(0, 0, 255), hex #0000ff<br/>
-                    outline: black rgb(0,0,0) hex #000000<br/>
-                    stroke and line style do not matter.<br/>
-                    target fold angle set by opacity: 1.0 = PI, 0.5 = PI/2, 0 = 0<br/>
-                    This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
-                    duplicate lines (coming), and anchor points falling in the middle of an edge (coming),
-                    but it is recommended to remove these errors yourself in order to avoid problems.<br/><br/>
-                    <b>For Adobe Illustrator users:</b><br/>
-                    I use Illustrator to create SVGs (though any vector editing program should be fine), here are some tips to make patterns that will work.<br/>
-                    If you are starting with a premade vector file, first ungroup any groups, release all compound paths
-                    (<b>Select all + Object>Compound Path>Release</b>), and release all clipping masks (<b>Select all + Object>Clipping Mask>Release</b>).<br/>
-                    Create geometry using the <b>Line Segment Tool</b>.<br/>
-                    Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together.  Click the line,
-                    then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
-                    To turn lines and polygons into path objects, select the geometry then right click and select <b>Make Compound Path</b>.<br/>
-                    Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG Tiny 1.1 settings, but I believe versions 1.0 and 1.1 will work.
-
+                    <ul>
+                        <li>The SVG importer supports path objects and line objects (coming).  Please convert polygons to paths before importing.</li>
+                        <li>Valley folds are red - <span style="color:red">rgb(255, 0, 0), hex #ff0000</span></li>
+                        <li>Mountain folds are blue - <span style="color:blue">rgb(0, 0, 255), hex #0000ff</span></li>
+                        <li>Outline edges are black - <span style="color:black">rgb(0, 0, 0), hex #000000</span></li>
+                        <img src="assets/examplepattern.jpg"/>
+                        <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 - <span style="color:#999900">rgb(255, 255, 0), hex #ffff00</span></li>
+                        <img src="assets/patternwithtriangulations.jpg"/>
+                        <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&deg;
+                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).</li>
+                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
+                        duplicate lines (coming), and extra vertices falling in the middle of an edge (coming),
+                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
+                        <li>If your simultion is not working, check that the pattern looks correct by clicking on the "Pattern" view in the top nav bar.</li>
+                    </ul><br/>
+
+                <b>For Adobe Illustrator users:</b><br/><br/>
+                I use Illustrator to create SVGs (though any vector editing program should be fine), here are some tips I've found for making svgs to import into this tool.<br/><br/>
+                    <ul>
+                        <li>If you are starting with a premade vector file, first ungroup any groups, release all compound paths
+                        (<b>Select all + Object>Compound Path>Release</b>), and release all clipping masks (<b>Select all + Object>Clipping Mask>Release</b>).</li>
+                        <li>Create geometry using the <b>Line Segment Tool</b>.</li>
+                        <li>Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together.  Click the line,
+                        then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
+                        <li>To turn lines and polygons into path objects, select the geometry then right click and select <b>Make Compound Path</b>.</li>
+                        <li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG Tiny 1.1 settings, but I believe versions 1.0 and 1.1 will work.</li>
+                    </ul>
                 </p>
             </div>
         </div><!-- /.modal-content -->

js/dynamic/dynamicSolver.js

@@ -202,6 +202,7 @@ function initDynamicSolver(globals){
                 positions[3*i+1] = nexPos.y;
                 positions[3*i+2] = nexPos.z;
                 if (shouldUpdateColors){
+                    if (nodeError>globals.strainClip) nodeError = globals.strainClip;
                     var scaledVal = (1-100*nodeError/globals.strainClip) * 0.7;
                     var color = new THREE.Color();
                     color.setHSL(scaledVal, 1, 0.5);