step forward, fix frame-giving issue

1 files changed, 44 insertions, 12 deletions

diff --git a/shader-gif.html b/shader-gif.html
index 7ac08db..afa8e22 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -34,6 +34,7 @@ div { display: inline-block; padding: 10px;}
   background <input type="text" id="background" value="#fff">
   <button id="reset">reset</button>
   <button id="pause">pause</button>
+  <button id="step-forward">&gt;&gt;</button>
   <br>
   <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
   <br>
@@ -98,6 +99,7 @@ function init(){
   $("#url").change(load)
   $("#reset").click(reset)
   $("#pause").click(pause)
+  $("#step-forward").click(step_forward)
   $("#add-frame").click(add_frame)
   $("#demo").click(function(){ demo("#first") })
   $("#dither-demo").click(function(){ demo("#second") })
@@ -132,7 +134,7 @@ function init(){
 
   demo('#first')
   load()
-  draw()
+  animate(0)
 }
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
@@ -151,14 +153,20 @@ function reset(){
   start_t = old_t
   pause_t = 0
   $("#rendered").hide()
+  draw(0)
 }
 function pause(state){
   $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused)
 }
-
-var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false, rendering = false;
-function draw(t){
-  raf_id = requestAnimationFrame(draw);
+function step_forward(){
+  var step = $("#framedelay").float() * 1000 || 100
+  old_t += step
+  draw(old_t)
+}
+var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
+var paused = false, rendering = false;
+function animate(t){
+  raf_id = requestAnimationFrame(animate);
   if (paused || dragging || rendering) {
     pause_t += t - old_t
     old_t = t
@@ -167,12 +175,27 @@ function draw(t){
   else {
     old_t = t
   }
+  draw(t)
+}
+function draw(t) {
   t -= start_t
   t -= pause_t
+  frame = giveFrame(t)
   shade(frame, t)
 }
 
-var frame;
+var frame, img_frame;
+function giveFrame(){
+  if (window.gif) {
+    return gif.frames[0]
+  }
+  else if (window.img) {
+    return img_frame
+  }
+  else {
+    return cq(w, h)
+  }
+}
 function ready(){
   loading = false
   if (window.gif) {
@@ -181,18 +204,21 @@ function ready(){
   else {
     fc = cq(img.width, img.height)
     fc.drawImage(img, 0, 0)
-    frame = { ctx: fc.context }
+    frame = img_frame = { ctx: fc.context }
   }
   w = cc.canvas.width = frame.ctx.canvas.width
   h = cc.canvas.height = frame.ctx.canvas.height
 }
 
 function shade(frame, t){
-  try {
-    if (window.gif) frame = giveImage(t)
+  if (! t || isNaN(t)) throw Error ("No time specified")
+  if (! frame) throw Error ("No frame specified")
+ // try {
+ if (1) {
     var f = $("#shader").val()
     if (!f.length) return;
     var shader = new Function('x','y','t','d', f)
+
     var imageData = frame.ctx.getImageData(0,0,w,h)
     var data = imageData.data
 
@@ -210,9 +236,9 @@ function shade(frame, t){
       }
     }
     cc.putImageData(imageData,0,0)
-  }
-  catch (e){
-    console.log(e)
+//  }
+//  catch (e){
+//    console.log(e)
   }
 }
 
@@ -239,7 +265,9 @@ function add_frames(frame_count){
   rendering = true
   var t = old_t - start_t - pause_t
   var frame_delay = $("#frameinterval").float() * 1000
+  var frame
   for (var i = 0; i < frame_count; i++) {
+    frame = giveFrame(t)
     t += frame_delay
     shade(frame, t)
     add_single_frame()
@@ -286,6 +314,10 @@ encoder.on("quantized", function(url){
   encoder.encode()
 })
 
+encoder.on("encoded-frame", function(done,count){
+  status("encoded " + done + " / " + count)
+})
+
 encoder.on("rendered", function(bytes){
   status(filesize(bytes.length))
 })