diff options
| author | jules <jules@okfoc.us> | 2013-12-14 02:44:08 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-14 02:44:08 -0500 |
| commit | 2f1df01652f4af8aa57ac9907c7df2d6b585955e (patch) | |
| tree | d890ce492c3db2ec9b471d5d37ba77bb9bd21fe4 | |
| parent | 1461489bea1fca789e18d462b52e654e7437c30c (diff) | |
shader gif, clock reset
| -rw-r--r-- | shader-gif.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/shader-gif.html b/shader-gif.html new file mode 100644 index 0000000..ee903b4 --- /dev/null +++ b/shader-gif.html @@ -0,0 +1,154 @@ +<!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="reset">reset</button> +<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/gif-encode/util.js"></script> +<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script> +<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script> +<script type="text/javascript" src="js/vendor/gif.js"></script> +<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script> +<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script> +<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/color.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) + $("#reset").click(reset) + $("#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) +} + +function reset(){ + start_t = old_t +} + +var timeout = null, raf_id, start_t = 0, old_t = 0; +function draw(t){ + raf_id = requestAnimationFrame(draw); + old_t = t + t -= start_t + shade(frame, t) +} + +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 +} + +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"> +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> + |