frame weaving

1 files changed, 44 insertions, 82 deletions

diff --git a/shader-picker.html b/shader-picker.html
index d3d4904..65a1a11 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -64,12 +64,17 @@ form { display: inline-block; }
   <button id="remove-all-frames">clear</button>
   <button id="render" disabled>render</button>
   <br>
-
+  reorder:
+  <button id="weave-frames">weave</button>
+  <button id="shuffle-frames">shuffle</button>
+  <button id="reverse-frames">reverse</button>
+  <button id="sort-frames">sort</button>
+  
   <div id="frames"></div>
   <br>
   <br>
 
-  gif delay <input type="text" id="framedelay" value="0.1s">
+  gif delay <input type="text" id="framedelay" value="0.06s">
   background <input type="text" id="background" value="#fff">
   your name here &rarr; <input type="text" id="username" value="">
   <br>
@@ -115,6 +120,7 @@ form { display: inline-block; }
 <script type="text/javascript" src="js/color.js"></script>
 <script type="text/javascript" src="js/image.js"></script>
 <script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
@@ -154,6 +160,11 @@ function init(){
   })
   $("#frames").disableSelection();
   $("#remove-all-frames").click(remove_all_frames)
+  $("#weave-frames").click(weave_frames)
+  $("#shuffle-frames").click(shuffle_frames)
+  $("#reverse-frames").click(reverse_frames)
+  $("#sort-frames").click(sort_frames)
+
   $("#render").click(render)
   $("#save").click(save)
   $("#upload").click(upload)
@@ -201,24 +212,25 @@ function choose (){
   $("#url").val(imageURL)
   loadImage(imageURL, ready)
 }
-
-function drag_start(){ dragging = true; $(this).addClass("dragging") }
-function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
+function load(){
+  loading = true
+  var imageURL = $("#url").val()
+  loadImage(imageURL, ready)
+}
 function demo(el){
   $el = $(el)
   s = $el.html()
   $("#shader").html(s)
   shader_build()
 }
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
+
+function drag_start(){ dragging = true; $(this).addClass("dragging") }
+function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
 function reset(){
   start_t = old_t
   pause_t = 0
+  pause(false)
   $("#rendered img").remove()
   draw(0)
 }
@@ -229,6 +241,7 @@ function step_forward(){
   var step = $("#framedelay").float() * 1000 || 100
   old_t += step
   draw(old_t)
+  pause(true)
 }
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
 var paused = false, dragging = false, rendering = false, scrolling = false;
@@ -296,78 +309,6 @@ function ready(){
   }
 }
 
-var shader_build = function(){
-  var fn_str = document.getElementById('shader').value
-  if (!fn_str.length) return
-  try {
-    var fn = new Function('x','y','t','d', fn_str)
-    shader = fn
-    shade = shade_error_handling
-  } catch (e) {
-    throw Error ("Shader compilation error")
-  }
-}
-
-var r,g,b,a;
-
-function shade_no_error_handling(frame, t){
-  if (! t || isNaN(t)) throw Error ("No time specified")
-  if (! frame) throw Error ("No frame specified")
-
-  var imgData = frame.ctx.getImageData(0,0,w,h)
-  var data = imgData.data
-  var clone = frame.cloneData.data  
-  var realw = w, realh = h, v, index
-
-  for (var x = 0; x < w; x++) {
-    for (var y = 0; y < h; y++) {
-      q = 4*(y*w+x)
-      r = data[q], g = data[q+1], b = data[q+2], a = data[q+3]
-      result = shader(x,y,t,clone)
-      data[q] = r
-      data[q+1] = g
-      data[q+2] = b
-      data[q+3] = a
-      w = realw, h = realh
-    }
-  }
-  cc.putImageData(imgData,0,0)
-}
-
-function shade_error_handling(frame, t){
-  if (! t || isNaN(t)) throw Error ("No time specified")
-  if (! frame) throw Error ("No frame specified")
-
-  var imgData = frame.ctx.getImageData(0,0,w,h)
-  var data = imgData.data
-  var clone = frame.cloneData.data
-
-  try {
-    var realw = w, realh = h, v, index
-
-    for (var x = 0; x < w; x++) {
-      for (var y = 0; y < h; y++) {
-        q = 4*(y*w+x)
-        r = data[q], g = data[q+1], b = data[q+2], a = data[q+3]
-        result = shader(x,y,t,clone)
-        data[q] = r
-        data[q+1] = g
-        data[q+2] = b
-        data[q+3] = a
-        w = realw, h = realh
-      }
-    }
-  }
-  catch(e){
-    // console.log(e.stack)
-    throw Error ("Shader execution error")
-  }
-  cc.putImageData(imgData,0,0)
-  shade = shade_no_error_handling
-}
-
-shade = shade_error_handling
-
 function add_frame(){
   var frame_count = $("#framecount").int()
   if (frame_count < 2) {
@@ -380,6 +321,7 @@ function add_frame(){
 function add_single_frame(){
   var $el = $("<div>")
   $el.html( $("#frame-template").html() )
+  $el.attr('index', $("#frames div").length)
   var frame = cc.clone().appendTo($el.find(".frame")[0])
   frame.canvas.className = "fullsize"
   frame.canvas.style.display = "none"
@@ -409,6 +351,26 @@ function remove_frame(){
 function remove_all_frames(){
   $("#frames").empty()
 }
+function shuffle_frames(){
+  var shuffled = []
+  var $frames = $("#frames div")
+  $("#frames").empty().append(shuffle($frames))
+}
+function reverse_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(reverse($frames))
+}
+function weave_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(weave($frames))
+}
+function sort_frames(){
+  var $frames = $("#frames div")
+  var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] })
+                     .sort(function(a,b){ return a[0]-b[0] })
+                     .map(function(i,e){ console.log( e ); return e[1] })
+  $("#frames").empty().append(sorted)
+}
 
 function render (){
   if (rendering) return