diff options
| author | Julie Lala <jules@okfoc.us> | 2013-12-10 01:42:11 -0500 |
|---|---|---|
| committer | Julie Lala <jules@okfoc.us> | 2013-12-10 01:42:11 -0500 |
| commit | 31cf5cdc31dbe98939748c398c4ce4a1ddf35949 (patch) | |
| tree | bbaac2b429a887a6ca5fe0e59197c3930dabd9d7 | |
| parent | 037a0ae8072217f7821549bbdfe030e73289330d (diff) | |
shader
| -rw-r--r-- | shader.html | 80 |
1 files changed, 67 insertions, 13 deletions
diff --git a/shader.html b/shader.html index bc6b9a2..c263c18 100644 --- a/shader.html +++ b/shader.html @@ -2,26 +2,80 @@ <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> -<button id="random">random</button> -<button id="pattern2">pattern2</button> -<button id="pattern3">pattern3</button> -<button id="pattern4">pattern4</button> -<button id="pattern2Lite">pattern2lite</button> -<button id="pattern3Lite">pattern3lite</button> -<button id="pattern4Lite">pattern4lite</button> -<button id="floydSteinberg">floyd-steinberg</button> -<button id="right">right</button> -</div> -w/h <input type="text" id="width">x<input type="text" id="height"> -<textarea name="shader"> +<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> +<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()) } + +var cc = cq(0,0).appendTo("#workspace") +var w, h +$("#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 shader = new Function('x','y','t',$("#shader").val()) + 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; |