1 files changed, 14 insertions, 57 deletions
diff --git a/shader-animate.html b/shader-animate.html
index 80d71aa..6591d6d 100644
--- a/shader-animate.html
+++ b/shader-animate.html
@@ -33,6 +33,8 @@ delay <input type="text" id="delay" value="60">
 <script type="text/javascript" src="js/canvasquery.dither.js"></script>
 <script type="text/javascript" src="js/color.js"></script>
 <script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
@@ -43,67 +45,22 @@ $(init)
 
 function init(){
   $("#url").change(load)
-  $("#demo").click(function(){ demo("#first") })
-  $("#dither-demo").click(function(){ demo("#second") })
-  demo('#first')
+  $("#demo").click(function(){ run("#first") })
+  $("#dither-demo").click(function(){ run("#second") })
+  run('#first')
+
   load()
-  draw()
-}
-function demo(el){
-  $el = $(el)
-  s = $el.html()
-  $("#shader").html(s)
-}
-function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
-}
 
-var frame;
-function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = { ctx: fc.context }
-  }
-  w = cc.canvas.width = frame.ctx.canvas.width
-  h = cc.canvas.height = frame.ctx.canvas.height
-}
+  document.getElementById('shader').addEventListener('input', shader_build);
+  shader_build()
 
-var timeout = null;
-function draw(t){
-  requestAnimationFrame(draw);
-  shade(frame, t)
+  requestAnimationFrame(animate)
 }
-function shade(frame, t){
-  try {
-    if (window.gif) frame = giveImage()
-    var f = $("#shader").val()
-    if (!f.length) return;
-    var shader = new Function('x','y','t', f)
-    var imageData = frame.ctx.getImageData(0,0,w,h)
-    var data = imageData.data
-    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)
-        data[q] = r
-        data[q+1] = g
-        data[q+2] = b
-        data[q+3] = a
-      }
-    }
-    cc.putImageData(imageData,0,0)
-  }
-  catch (e){
-    console.log(e)
-  }
+function run(el){
+	$el = $(el)
+	s = $el.html()
+	$("#shader").html(s)
+	shader_build()
 }
 
 </script>