1 files changed, 37 insertions, 9 deletions
diff --git a/shader-gif.html b/shader-gif.html
index e509d0a..8259f82 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -3,7 +3,7 @@
 <title>Shader</title>
 <style type="text/css">
 #url { width: 100px; }
-#width,#height,#frames,#delay {width: 30px; }
+#width,#height,#framecount,#delay {width: 30px; }
 #shader { width: 100%; height: 247px; font-family: fixed; }
 #frames { width: 450px; height: 100px; }
 #controls { width: 450px; }
@@ -19,10 +19,8 @@ div { display: inline-block; 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">
--->
+frames <input type="text" id="framecount" value="1">
+delay <input type="text" id="delay" value="0.1s">
 <button id="reset">reset</button>
 <button id="pause">pause</button>
 <button id="add-frame">+frame</button>
@@ -95,6 +93,8 @@ function load(){
 function reset(){
   start_t = old_t
   pause_t = 0
+  $("#rendered").hide()
+  $("#frames").empty()
 }
 function pause(state){
   $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused)
@@ -133,7 +133,7 @@ function ready(){
 
 function shade(frame, t){
   try {
-    if (window.gif) frame = giveImage()
+    if (window.gif) frame = giveImage(t)
     var f = $("#shader").val()
     if (!f.length) return;
     var shader = new Function('x','y','t', f)
@@ -158,6 +158,15 @@ function shade(frame, t){
 }
 
 function add_frame(){
+  var frame_count = $("#framecount").int()
+  if (frame_count < 2) {
+    add_single_frame()
+  }
+  else {
+    add_frames(frame_count)
+  }
+}
+function add_single_frame(){
   var $el = $("<div>")
   $el.html( $("#frame-template").html() )
   var frame = cc.clone().appendTo($el.find(".frame")[0])
@@ -167,6 +176,17 @@ function add_frame(){
   $("#frames").append($el)
   $("#render").enable()
 }
+function add_frames(frame_count){
+  rendering = true
+  var t = old_t - start_t - pause_t
+  var frame_delay = $("#delay").float() * 1000
+  for (var i = 0; i < frame_count; i++) {
+    t += frame_delay
+    shade(frame, t)
+    add_single_frame()
+  }
+  rendering = false
+}
 function remove_frame(){
   $(this).closest("div").remove()
   if ($("#frames div").length == 0) {
@@ -177,13 +197,18 @@ function remove_frame(){
 function render (){
   if (rendering) return
   rendering = true
+  encoder.reset()
+  var delay = $("#delay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
-    encoder.addFrame(this, 60)
+    encoder.addFrame(this, delay)
   })
   $("#pause,#render,#add-frame").disable()
   $("#rendered").find("img").remove()
   $("#rendered").show()
-  status("quantizing")
+  // really bad results with neuquant?
+  // status("quantizing")
+  // encoder.quantize()
+  status("encoding")
   encoder.encode()
 }
 
@@ -198,8 +223,11 @@ encoder.on("quantized", function(url){
   encoder.encode()
 })
 
+encoder.on("rendered", function(bytes){
+  status(filesize(bytes.length))
+})
+
 encoder.on("rendered-url", function(url){
-  status("")
   var image = new Image ()
   lastGif = image.src = url
   $("#rendered").append(image)