https://origamisimulator.org/js/videoAnimator.js

1/**
2 * Created by amandaghassaei on 7/2/17.
3 */
4
5
6function initVideoAnimator(globals){
7
8    var foldAngleSequence = [];
9
10    function compile(){
11        var lastAngle = globals.creasePercent*100;
12        var t = 0;
13        for (var i=0;i<foldAngleSequence.length;i++){
14            var item = foldAngleSequence[i];
15            item.t = t;
16            item.from = lastAngle;
17            if (item.type == "delay") item.to = lastAngle;
18            lastAngle = item.to;
19            t += item.dur;
20        }
21    }
22
23    function nextFoldAngle(stepNum){
24        var fps = globals.currentFPS;
25        var frame = globals.capturerFrames + stepNum/globals.numSteps;
26        var t = frame/fps;
27        var item = getItemForT(t);
28        if (item === null) {
29            globals.shouldAnimateFoldPercent = false;
30            return globals.creasePercent;
31        }
32        if (item.dur == 0) return item.to/100;
33        t -= item.t;
34        t /= item.dur;
35        var angle = item.from*(1-t) + item.to*t;
36        return angle/100;
37    }
38
39    function getItemForT(t){
40        for (var i=0;i<foldAngleSequence.length;i++){
41            var item = foldAngleSequence[i];
42            if (t <= item.t + item.dur) return item;
43        }
44        return null;
45    }
46
47    function addItem(){
48        foldAngleSequence.push({
49            type:"animation",
50            dur: null,
51            from: null,
52            to: null
53        });
54        render();
55    }
56
57    function addDelay(){
58        foldAngleSequence.push({
59            type:"delay",
60            dur:null,
61            from: null,
62            to: null
63        });
64        render();
65    }
66
67    function isValid(){
68        if (foldAngleSequence.length == 0) return false;
69        for (var i=0;i<foldAngleSequence.length;i++){
70            var item = foldAngleSequence[i];
71            if (item.type == "delay" && item.dur !== null) continue;
72            if (item.type == "animation" && item.dur !== null && item.to != null) continue;
73            return false
74        }
75        return true;
76    }
77
78    function setAnimationStatus(){
79        if (foldAngleSequence.length == 0) {
80            $("#foldPercentAnimationStatus").removeClass("warning");
81            $("#foldPercentAnimationStatus").html("no animation configured");
82            return;
83        }
84        if (isValid()) {
85            $("#foldPercentAnimationStatus").removeClass("warning");
86            $("#foldPercentAnimationStatus").html("animation configured");
87        } else {
88            $("#foldPercentAnimationStatus").addClass("warning");
89            $("#foldPercentAnimationStatus").html("incomplete config, will be ignored");
90        }
91    }
92
93    function render(){
94        setAnimationStatus();
95        var html = "";
96        if (foldAngleSequence.length == 0){
97            $("#animationSetupHelp").html("No animation items in sequence.");
98            $("#animationHTML").html("");
99            return;
100        }
101        for (var i=0;i<foldAngleSequence.length;i++){
102            if (foldAngleSequence[i].type == "delay") html += renderDelay(foldAngleSequence[i], i);
103            else html += renderItem(foldAngleSequence[i], i);
104        }
105        $("#animationSetupHelp").html("Configure automatic <b>Fold Percent</b> control:");
106        $("#animationHTML").html(html);
107
108        //bind events
109        $(".deleteItem").click(function(e){
110            e.preventDefault();
111            var $target = $(e.target);
112            var index = $target.data("index");
113            if (index === undefined) index = $target.parent(".deleteItem").data("index");
114            foldAngleSequence.splice(index, 1);
115            render();
116        });
117        $(".durVal").change(function(e){
118            var $input = $(e.target);
119            var val = $input.val();
120            if (isNaN(parseFloat(val))) return;
121            val = parseFloat(val);
122            if (val < 0) val = 0;
123            $input.val(val);
124            var index = $input.data("index");
125            foldAngleSequence[index].dur = val;
126            render();
127        });
128        $(".toVal").change(function(e){
129            var $input = $(e.target);
130            var val = $input.val();
131            if (isNaN(parseFloat(val))) return;
132            val = parseFloat(val);
133            if (val < -100) val = -100;
134            if (val > 100) val = 100;
135            $input.val(val);
136            var index = $input.data("index");
137            foldAngleSequence[index].to = val;
138            render();
139        });
140    }
141
142    function renderItem(item, index){
143        var dur = "";
144        if (item.dur !== null) dur = item.dur;
145        var to = "";
146        if (item.to !== null) to = item.to;
147        return '<li class="animationStep">Animate to &nbsp;' +
148            '<input value="' + to + '" placeholder="Target" data-index="'+index+'" class="toVal float form-control" type="text">' +
149            ' % for &nbsp;' +
150            '<input value="' + dur + '" placeholder="Duration" data-index="'+index+'" class="durVal float form-control" type="text">' +
151            '&nbsp; seconds &nbsp;&nbsp;&nbsp;' +
152            '<a href="#" data-index="'+index+'" class="red deleteItem"><span data-index="'+index+'" class="fui-cross"></span></a>' +
153            '</li>';
154    }
155
156    function renderDelay(delay, index){
157        var dur = "";
158        if (delay.dur !== null) dur = delay.dur;
159        return '<li class="animationStep">Wait for &nbsp;' +
160            '<input value="' + dur + '" placeholder="Duration" data-index="'+index+'" class="durVal float form-control" type="text">' +
161            '&nbsp; seconds &nbsp;&nbsp;&nbsp;' +
162            '<a href="#" data-index="'+index+'" class="red deleteItem"><span class="fui-cross"></span></a>' +
163            '</li>';
164    }
165
166    render();
167
168    return {
169        addItem: addItem,
170        addDelay: addDelay,
171        isValid: isValid,
172        compile: compile,
173        nextFoldAngle: nextFoldAngle
174    }
175}