1 files changed, 113 insertions, 0 deletions
diff --git a/shader-demo.html b/shader-demo.html
new file mode 100644
index 0000000..8a75b2b
--- /dev/null
+++ b/shader-demo.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+#width,#height,#frames {width: 30px; }
+#shader { width: 400px; height: 247px; font-family: fixed; }
+div { float: left; padding: 10px;}
+</style>
+</head>
+<body>
+<div id="controls">
+w/h <input type="text" id="width" value="250">x<input type="text" id="height" value="320">
+frames <input type="text" id="frames" value="7">
+delay <input type="text" id="frames" value="20">
+<button id="render">render</button>
+<button id="demo">demo</button>
+<br>
+<br>
+<textarea id="shader">
+</textarea>
+</div>
+<div id="workspace">
+</div>
+</body>
+<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="canvasquery.js"></script>
+<script type="text/javascript" src="canvasquery.dither.js"></script>
+<script type="text/javascript">
+$.fn.int = function(){ return parseInt($(this).val(),10) }
+$.fn.float = function(){ return parseFloat($(this).val()) }
+
+$(demo)
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+function demo(){
+  $el = $("#first")
+  w = $el.data().width
+  h = $el.data().height
+  s = $el.html()
+  $("#width").val(w)
+  $("#height").val(h)
+  $("#shader").html(s)
+  resize()
+}
+$("#width,#height").change(resize)
+//$("#shader").keyup(draw)
+//$("#render").click(drawFrame)
+
+function resize(){
+  w = $("#width").int()
+  h = $("#height").int()
+  cc.canvas.width = w
+  cc.canvas.height = h
+}
+
+var timeout = null;
+function draw(t){
+//  clearTimeout(null);
+//  setTimeout(drawFrame,100)
+  requestAnimationFrame(draw);
+  animate(t)
+}
+draw()
+function clamp(n,a,b){n<a?a:n>b?b:n}
+function animate(t){
+  try {
+    var f = $("#shader").val()
+    if (!f.length) return;
+    var shader = new Function('x','y','t', f)
+    var imageData = cc.getImageData(0,0,w,h)
+    var data = imageData.data
+    for (var x = 0; x < w; x++) {
+      for (var y = 0; y < h; y++) {
+        r = 0, g = 0, b = 0, a = 255
+        q = 4*(y*w+x)
+        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)
+  }
+}
+
+resize()
+
+function dither(img){
+  var w = img.naturalWidth, h = img.naturalHeight;
+  var cc = cq(w, h)
+  cc.drawImage(img, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  cc.appendTo("#images")
+}
+</script>
+<script type="text/javascript-shader" id="first" data-width="600" data-height="400">
+
+x -= w/2
+y -= h/2
+t/=100
+y/=10
+x/=100
+r=g=b= Math.sin(t+x*y)*255
+
+</script>
+</html>
+