animate fold angle

amandaghassaei · Jul 3, 2017 · 5f9f5d7 · 5f9f5d7
1 parent 6a338f8
commit 5f9f5d7
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 16 deletions.
diff --git a/css/main.css b/css/main.css
@@ -481,4 +481,11 @@ a.seeMore.closed>.fui-triangle-down{
 #animationSetupModal p, #animationSetupModal ul, #animationSetupModal div.btns{
     text-align: center;
     padding: 0;
+}
+.warning{
+    color: #f1970f;
+}
+
+.red{
+    color:red!important;
 }
diff --git a/js/controls.js b/js/controls.js
@@ -276,6 +276,10 @@ function initControls(globals){
         $("#recordStatus").show();
         globals.shouldScaleCanvas = false;
         globals.capturer.start();
+        if (globals.videoAnimator.isValid()) {
+            globals.shouldAnimateFoldPercent = true;
+            globals.videoAnimator.compile();
+        }
     });
     setLink("#doGifRecord", function(){
         globals.capturerFrames = 0;
@@ -290,6 +294,10 @@ function initControls(globals){
         $("#recordStatus").show();
         globals.shouldScaleCanvas = false;
         globals.capturer.start();
+        if (globals.videoAnimator.isValid()) {
+            globals.shouldAnimateFoldPercent = true;
+            globals.videoAnimator.compile();
+        }
     });
 
     setLink("#stopRecord", function(){
@@ -299,6 +307,7 @@ function initControls(globals){
         globals.capturer.save();
         globals.capturer = null;
         globals.shouldScaleCanvas = false;
+        globals.shouldAnimateFoldPercent = false;
         globals.threeView.onWindowResize();
         $("#recordStatus").hide();
     });
@@ -425,6 +434,14 @@ function initControls(globals){
         $('#creasePercent>input').val(val);
     }, -100, 100);
 
+    function updateCreasePercent(){
+        var val = globals.creasePercent*100;
+        creasePercentSlider.slider('value', val);
+        creasePercentNavSlider.slider('value', val);
+        $('#currentFoldPercent').val(val);
+        $('#creasePercent>input').val(val);
+    }
+
     function setDeltaT(val){
         $("#deltaT").html(val.toFixed(4));
     }
@@ -774,7 +791,8 @@ function initControls(globals){
     }
 
     return {
-        setDeltaT: setDeltaT
+        setDeltaT: setDeltaT,
+        updateCreasePercent: updateCreasePercent
     }
 }
 
diff --git a/js/dynamic/dynamicSolver.js b/js/dynamic/dynamicSolver.js
@@ -71,6 +71,13 @@ function initDynamicSolver(globals){
 
     function solve(_numSteps){
 
+        if (globals.shouldAnimateFoldPercent){
+            globals.creasePercent = globals.videoAnimator.nextFoldAngle(0);
+            globals.controls.updateCreasePercent();
+            setCreasePercent(globals.creasePercent);
+            globals.shouldChangeCreasePercent = true;
+        }
+
         if (globals.forceHasChanged) {
             updateExternalForces();
             globals.forceHasChanged = false;

diff --git a/js/globals.js b/js/globals.js
@@ -93,7 +93,8 @@ function initGlobals(){
         capturerScale: 1,
         capturerFrames: 0,
         shouldScaleCanvas: false,
-        isGif: false
+        isGif: false,
+        shouldAnimateFoldPercent: false
     };
 
     function setCreasePercent(percent){

diff --git a/js/videoAnimator.js b/js/videoAnimator.js
@@ -7,9 +7,41 @@ function initVideoAnimator(globals){
 
     var foldAngleSequence = [];
 
-    function clear(){
-        foldAngleSequence = [];
-        render();
+    function compile(){
+        var lastAngle = globals.creasePercent*100;
+        var t = 0;
+        for (var i=0;i<foldAngleSequence.length;i++){
+            var item = foldAngleSequence[i];
+            item.t = t;
+            item.from = lastAngle;
+            if (item.type == "delay") item.to = lastAngle;
+            lastAngle = item.to;
+            t += item.dur;
+        }
+    }
+
+    function nextFoldAngle(stepNum){
+        var fps = globals.currentFPS;
+        var frame = globals.capturerFrames + stepNum/globals.numSteps;
+        var t = frame/fps;
+        var item = getItemForT(t);
+        if (item === null) {
+            globals.shouldAnimateFoldPercent = false;
+            return globals.creasePercent;
+        }
+        if (item.dur == 0) return item.to/100;
+        t -= item.t;
+        t /= item.dur;
+        var angle = item.from*(1-t) + item.to*t;
+        return angle/100;
+    }
+
+    function getItemForT(t){
+        for (var i=0;i<foldAngleSequence.length;i++){
+            var item = foldAngleSequence[i];
+            if (t <= item.t + item.dur) return item;
+        }
+        return null;
     }
 
     function addItem(){
@@ -23,26 +55,37 @@ function initVideoAnimator(globals){
     }
 
     function addDelay(){
-        foldAngleSequence.push({type:"delay", dur:null});
+        foldAngleSequence.push({
+            type:"delay",
+            dur:null,
+            from: null,
+            to: null
+        });
         render();
     }
 
-    function setAnimationStatus(){
-        if (foldAngleSequence.length == 0) {
-            $("#foldPercentAnimationStatus").html("no animation configured");
-            return;
-        }
-        var complete = true;
+    function isValid(){
+        if (foldAngleSequence.length == 0) return false;
         for (var i=0;i<foldAngleSequence.length;i++){
             var item = foldAngleSequence[i];
             if (item.type == "delay" && item.dur !== null) continue;
             if (item.type == "animation" && item.dur !== null && item.to != null) continue;
-            complete = false;
-            break;
+            return false
+        }
+        return true;
+    }
+
+    function setAnimationStatus(){
+        if (foldAngleSequence.length == 0) {
+            $("#foldPercentAnimationStatus").removeClass("warning");
+            $("#foldPercentAnimationStatus").html("no animation configured");
+            return;
         }
-        if (complete) {
+        if (isValid()) {
+            $("#foldPercentAnimationStatus").removeClass("warning");
             $("#foldPercentAnimationStatus").html("animation configured");
         } else {
+            $("#foldPercentAnimationStatus").addClass("warning");
             $("#foldPercentAnimationStatus").html("incomplete config, will be ignored");
         }
     }
@@ -124,6 +167,9 @@ function initVideoAnimator(globals){
 
     return {
         addItem: addItem,
-        addDelay: addDelay
+        addDelay: addDelay,
+        isValid: isValid,
+        compile: compile,
+        nextFoldAngle: nextFoldAngle
     }
 }