diff options
| author | Julie Lala <jules@okfoc.us> | 2013-12-10 02:00:55 -0500 |
|---|---|---|
| committer | Julie Lala <jules@okfoc.us> | 2013-12-10 02:00:55 -0500 |
| commit | 56964f726194d83c3ce1c7e138349a4cf10b1fae (patch) | |
| tree | 7316782238fa2f3fec93717a3c6c9a889b24944f /shader-demo.html | |
| parent | 31cf5cdc31dbe98939748c398c4ce4a1ddf35949 (diff) | |
shader demo..
Diffstat (limited to 'shader-demo.html')
| -rw-r--r-- | shader-demo.html | 113 |
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> + |