sceen capture

css/main.css

@@ -353,7 +353,8 @@ input.form-control.bigInput{
 }
 
 .actionButton{
-    width: 110px;
+    min-width: 110px;
+    font-size: 16px;
 }
 
 #unitsDropdown{
@@ -450,3 +451,13 @@ a.seeMore.closed>.fui-triangle-down{
       -webkit-transform:rotate(45deg);
     transform: rotate(45deg);
 }
+
+#recordStatus{
+    position: absolute;
+    bottom:20px;
+    width:50px;
+    left:50%;
+    margin-left:-25px;
+    z-index: 2;
+    display: none;
+}
\ No newline at end of file

index.html

@@ -500,6 +500,7 @@
     <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
     <script type="text/javascript" src="dependencies/earcut.js"></script>
     <script type="text/javascript" src="dependencies/fold.js"></script>
+    <script type="text/javascript" src="dependencies/CCapture.all.min.js"></script>
     <!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
 
     <!--<script type="text/javascript" src="dependencies/EffectComposer.js"></script>-->
@@ -554,6 +555,9 @@
                     <!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
                     <li><a id="tips" href="#">File Import Tips</a></li>
                     <li class="divider"></li>
+                    <li><a id="createGif" href="#">Record animated GIF...</a></li>
+                    <li><a id="createVideo" href="#">Record video...</a></li>
+                    <li class="divider"></li>
                     <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
                     <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                     <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
@@ -909,6 +913,7 @@
                     <ul>
                         <li>All rendering and 3D interaction done with <a target="_blank" href="https://threejs.org/">three.js</a></li>
                         <li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG parsing</li>
+                        <li><a href="https://github.com/edemaine/fold" target="_blank">FOLD</a> is used as the internal data structure, and methods from the FOLD api are used for SVG parsing</li>
                         <li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>
                         <li><a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
                             <a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> used to build the GUI</li>
@@ -1046,7 +1051,7 @@
                 Filename: &nbsp;&nbsp;<input id="stlFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
                 Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
                 Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
-                <span class="smallTxt">(the STL file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
+                <span class="smallTxt">( the STL file format is unitless, but typically assumed to be either in inches or mm )</span><br/>
                 <label class="bigLabel checkbox" for="doublesidedSTL">
                     <input id="doublesidedSTL" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                     Double Sided
@@ -1069,7 +1074,7 @@
                 Filename: &nbsp;&nbsp;<input id="objFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
                 Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
                 Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
-                <span class="smallTxt">(the OBJ file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
+                <span class="smallTxt">( the OBJ file format is unitless, but typically assumed to be either in inches or mm )</span><br/>
                 <label class="bigLabel checkbox" for="doublesidedOBJ">
                     <input id="doublesidedOBJ" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                     Double Sided
@@ -1390,5 +1395,29 @@
         </div>
     </div>
 </div>
+<div class="modal fade" id="screenCaptureModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
+    <div class="modal-dialog modal-med">
+        <div class="modal-content">
+            <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <b>SCREEN RECORDING</b><br/><br/>
+                Filename: &nbsp;&nbsp;<input id="screenRecordFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .webm<br/><br/>
+                Scale: &nbsp;&nbsp;<input id="capturerScale" value="" placeholder="" class="float form-control" type="text"><br/><br/>
+                Dimensions: &nbsp;&nbsp;<b><span id="canvasDimensions"></span></b><br/>
+                <span class="smallTxt">( resize browser window to change aspect ratio )</span><br/><br/>
+                Quality ( 0-63 ): &nbsp;&nbsp;<input id="capturerQuality" value="" placeholder="" class="float int form-control" type="text"><br/><br/>
+                FrameRate ( 1-60 fps ): &nbsp;&nbsp;<input id="capturerFPS" value="" placeholder="" class="float int form-control" type="text"><br/><br/>
+            </div>
+            <div class="modal-footer">
+                <button id="doScreenRecord" type="button" class="actionButton btn btn-success" data-dismiss="modal">Start</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="recordStatus">
+    <a href="#" id="stopRecord" class="btn btn-lg btn-danger">Stop Record <span></span></a>
+</div>
 </body>
 </html>
\ No newline at end of file

js/controls.js

@@ -189,6 +189,60 @@ function initControls(globals){
         globals.vertTol = val;
     });
 
+    setLink("#createGif", function(){
+        globals.capturer = new CCapture({format:'gif', name:globals.filename, framerate:60, display:true, verbose:true, workersPath:'js/'});
+        globals.capturer.start();
+    });
+    setLink("#createVideo", function(){
+        //quality 0-63
+        //timeLimit: 30
+        $("#screenCaptureModal").modal("show");
+        $("#screenRecordFilename").val(globals.filename);
+        globals.screenRecordFilename = globals.filename;
+        updateCanvasDimensions();
+    });
+    setInput("#capturerFPS", globals.capturerFPS, function(val){
+        globals.capturerFPS = val;
+    }, 0, 60);
+    setInput("#capturerQuality", globals.capturerQuality, function(val){
+        globals.capturerQuality = val;
+    }, 0, 63);
+    setInput("#capturerScale", globals.capturerScale, function(val){
+        globals.capturerScale = val;
+        updateCanvasDimensions();
+    }, 1);
+    function updateCanvasDimensions(){
+        var $body = $("body");
+        var dim = (new THREE.Vector2($body.innerWidth(), $body.innerHeight())).multiplyScalar(globals.capturerScale);
+        $("#canvasDimensions").html(dim.x + " x " + dim.y + " px");
+    }
+    setInput("#screenRecordFilename", "OrigamiSimulator", function(val){
+        globals.screenRecordFilename = val;
+    });
+
+    setLink("#doScreenRecord", function(){
+        globals.capturerFrames = 0;
+        globals.capturer = new CCapture({
+            format:'webm',
+            name:globals.screenRecordFilename,
+            framerate:globals.capturerFPS,
+            // display:true,
+            // verbose:true,
+            workersPath:'js/',
+            quality: globals.capturerQuality
+        });
+        $("#recordStatus").show();
+        globals.capturer.start();
+    });
+
+    setLink("#stopRecord", function(){
+        if (!globals.capturer) return;
+        globals.capturer.stop();
+        globals.capturer.save();
+        globals.capturer = null;
+        $("#recordStatus").hide();
+    });
+
 
     setLink("#navPattern", function(){
         if (globals.noCreasePatternAvailable()){

js/globals.js

@@ -83,7 +83,13 @@ function initGlobals(){
         rotateModel: null,
         rotationSpeed: 0.01,
 
-        backgroundColor:"ffffff"
+        backgroundColor:"ffffff",
+
+        capturer: null,
+        capturerQuality: 63,
+        capturerFPS: 60,
+        capturerScale: 1,
+        capturerFrames: 0
     };
 
     function setCreasePercent(percent){

js/threeView.js

@@ -96,12 +96,17 @@ function initThreeView(globals) {
         globals.simulationRunning = true;
     }
 
+    var captureStats = $("#stopRecord>span");
     function _render(){
         if (globals.vrEnabled){
             globals.vive.render();
             return;
         }
         renderer.render(scene, camera);
+        if (globals.capturer) {
+            captureStats.html("( " + ++globals.capturerFrames + " frames )");
+            globals.capturer.capture(renderer.domElement);
+        }
     }
 
     function _loop(callback){