pull out frames editor, main render loop

1 files changed, 9 insertions, 27 deletions

diff --git a/shader-animate.html b/shader-animate.html
index 80d71aa..2525088 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">
 
@@ -48,6 +50,11 @@ function init(){
   demo('#first')
   load()
   draw()
+
+  document.getElementById('shader').addEventListener('input', shader_build);
+  shader_build()
+
+  requestAnimationFrame(animate)
 }
 function demo(el){
   $el = $(el)
@@ -76,35 +83,10 @@ function ready(){
 }
 
 var timeout = null;
-function draw(t){
-  requestAnimationFrame(draw);
+function animate(t){
+  requestAnimationFrame(animate);
   shade(frame, t)
 }
-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)
-  }
-}
 
 </script>
 <script type="text/javascript-shader" id="first">