1 files changed, 23 insertions, 4 deletions
diff --git a/shader-gif.html b/shader-gif.html
index ee903b4..d830af1 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -12,13 +12,13 @@ div { float: left; padding: 10px;}
 <body>
 <div id="controls">
 <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
-
-
 <!--
 frames <input type="text" id="frames" value="7">
 delay <input type="text" id="delay" value="60">
 -->
 <button id="reset">reset</button>
+<button id="pause">pause</button>
+<button id="add-frame">+frame</button>
 <button id="render" disabled>render</button>
 <button id="demo">demo</button>
 <button id="dither-demo">dither</button>
@@ -51,6 +51,7 @@ $(init)
 function init(){
   $("#url").change(load)
   $("#reset").click(reset)
+  $("#pause").click(pause)
   $("#demo").click(function(){ demo("#first") })
   $("#dither-demo").click(function(){ demo("#second") })
   demo('#first')
@@ -70,13 +71,25 @@ function load(){
 
 function reset(){
   start_t = old_t
+  pause_t = 0
+}
+function pause(){
+  paused = ! paused
 }
 
-var timeout = null, raf_id, start_t = 0, old_t = 0;
+var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false;
 function draw(t){
   raf_id = requestAnimationFrame(draw);
-  old_t = t
+  if (paused) {
+    pause_t += t - old_t
+    old_t = t
+    return
+  }
+  else {
+    old_t = t
+  }
   t -= start_t
+  t -= pause_t
   shade(frame, t)
 }
 
@@ -121,6 +134,12 @@ function shade(frame, t){
   }
 }
 
+frames = []
+function add_frame(){
+  frames.push(cc.clone())
+}
+function remove_frame(){
+}
 </script>
 <script type="text/javascript-shader" id="first">
 t /= 500