diff options
| author | jules <jules@okfoc.us> | 2013-12-13 17:39:40 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-13 17:39:40 -0500 |
| commit | 072f9186f57bb4dcb9c75457efa0f67b7a0225d3 (patch) | |
| tree | e781730c3be2c5bb2b10c1212373470a70ad76c6 /shader-animate.html | |
| parent | e6a10925902812fe78732af31f289d7176b2c1a3 (diff) | |
animated shader
Diffstat (limited to 'shader-animate.html')
| -rw-r--r-- | shader-animate.html | 133 |
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> + |