1 files changed, 133 insertions, 0 deletions
diff --git a/shader-animate.html b/shader-animate.html
new file mode 100644
index 0000000..afacad0
--- /dev/null
+++ b/shader-animate.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+#url { width: 100px; }
+#width,#height,#frames,#delay {width: 30px; }
+#shader { width: 400px; height: 247px; font-family: fixed; }
+div { float: left; padding: 10px;}
+</style>
+</head>
+<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">
+<button id="render" disabled>render</button>
+<button id="demo">demo</button>
+<button id="dither-demo">dither</button>
+<br>
+<br>
+<textarea id="shader">
+</textarea>
+</div>
+<div id="workspace">
+</div>
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+
+$(init)
+
+function init(){
+  $("#url").change(load)
+  $("#demo").click(function(){ demo("#first") })
+  $("#dither-demo").click(function(){ demo("#second") })
+  demo('#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
+}
+
+var timeout = null;
+function draw(t){
+  requestAnimationFrame(draw);
+  shade(frame, t)
+}
+function shade(frame, t){
+  try {
+    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">
+t /= 500
+if (a == 0) { r = g = b = x; t /= -3 }
+r *= (Math.sin(t*x/y) + 1)/2
+g *= (Math.cos(t*y/x) + 0.4)/2
+b *= (Math.sin(t) + 1.5)/2
+a = y
+
+</script>
+<script type="text/javascript-shader" id="second">
+xx = x, yy = y
+
+var d = ((x % 2) + 2 * (y % 2)) - 2
+
+x += w/2
+y -= h/2
+t/=-200
+y/=96
+x/=50
+v = (Math.sin(t+x*y) + 1.0) / 2
+v = (0.6) * v - 0.4 + Math.random()
+
+v = clamp( v*64 + 128 , 0, 255)
+v += d*32
+if (a == 0) r = g = b = xx/w * 255
+a = v > 128 ? v:0
+
+</script>
+</html>
+