diff options
| -rw-r--r-- | js/util.js | 31 | ||||
| -rw-r--r-- | shader-picker.html | 126 |
2 files changed, 75 insertions, 82 deletions
@@ -64,3 +64,34 @@ function smoothstep(n,a,b){ return t * t * (3.0 - 2.0 * t) } +function shuffle(a){ + for (var i = a.length; i > 0; i--){ + var r = randint(i) + var swap = a[i-1] + a[i-1] = a[r] + a[r] = swap + } + return a +} +function reverse(a){ + var reversed = [] + for (var i = 0, _len = a.length-1; i <= _len; i++){ + reversed[i] = a[_len-i] + } + return reversed +} +function deinterlace(a){ + var odd = [], even = [] + for (var i = 0, _len = a.length; i < _len; i++) { + if (i % 2) even.push(a[i]) + else odd.push(a[i]) + } + return [even, odd] +} +function weave(a){ + var aa = deinterlace(a) + var b = [] + aa[0].forEach(function(el){ b.push(el) }) + reverse(aa[1]).forEach(function(el){ b.push(el) }) + return b +} diff --git a/shader-picker.html b/shader-picker.html index d3d4904..65a1a11 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -64,12 +64,17 @@ form { display: inline-block; } <button id="remove-all-frames">clear</button> <button id="render" disabled>render</button> <br> - + reorder: + <button id="weave-frames">weave</button> + <button id="shuffle-frames">shuffle</button> + <button id="reverse-frames">reverse</button> + <button id="sort-frames">sort</button> + <div id="frames"></div> <br> <br> - gif delay <input type="text" id="framedelay" value="0.1s"> + gif delay <input type="text" id="framedelay" value="0.06s"> background <input type="text" id="background" value="#fff"> your name here → <input type="text" id="username" value=""> <br> @@ -115,6 +120,7 @@ form { display: inline-block; } <script type="text/javascript" src="js/color.js"></script> <script type="text/javascript" src="js/image.js"></script> <script type="text/javascript" src="js/user.js"></script> +<script type="text/javascript" src="js/shader.js"></script> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript"> @@ -154,6 +160,11 @@ function init(){ }) $("#frames").disableSelection(); $("#remove-all-frames").click(remove_all_frames) + $("#weave-frames").click(weave_frames) + $("#shuffle-frames").click(shuffle_frames) + $("#reverse-frames").click(reverse_frames) + $("#sort-frames").click(sort_frames) + $("#render").click(render) $("#save").click(save) $("#upload").click(upload) @@ -201,24 +212,25 @@ function choose (){ $("#url").val(imageURL) loadImage(imageURL, ready) } - -function drag_start(){ dragging = true; $(this).addClass("dragging") } -function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") } +function load(){ + loading = true + var imageURL = $("#url").val() + loadImage(imageURL, ready) +} function demo(el){ $el = $(el) s = $el.html() $("#shader").html(s) shader_build() } -function load(){ - loading = true - var imageURL = $("#url").val() - loadImage(imageURL, ready) -} + +function drag_start(){ dragging = true; $(this).addClass("dragging") } +function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") } function reset(){ start_t = old_t pause_t = 0 + pause(false) $("#rendered img").remove() draw(0) } @@ -229,6 +241,7 @@ function step_forward(){ var step = $("#framedelay").float() * 1000 || 100 old_t += step draw(old_t) + pause(true) } var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0 var paused = false, dragging = false, rendering = false, scrolling = false; @@ -296,78 +309,6 @@ function ready(){ } } -var shader_build = function(){ - var fn_str = document.getElementById('shader').value - if (!fn_str.length) return - try { - var fn = new Function('x','y','t','d', fn_str) - shader = fn - shade = shade_error_handling - } catch (e) { - throw Error ("Shader compilation error") - } -} - -var r,g,b,a; - -function shade_no_error_handling(frame, t){ - if (! t || isNaN(t)) throw Error ("No time specified") - if (! frame) throw Error ("No frame specified") - - var imgData = frame.ctx.getImageData(0,0,w,h) - var data = imgData.data - var clone = frame.cloneData.data - var realw = w, realh = h, v, index - - 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,clone) - data[q] = r - data[q+1] = g - data[q+2] = b - data[q+3] = a - w = realw, h = realh - } - } - cc.putImageData(imgData,0,0) -} - -function shade_error_handling(frame, t){ - if (! t || isNaN(t)) throw Error ("No time specified") - if (! frame) throw Error ("No frame specified") - - var imgData = frame.ctx.getImageData(0,0,w,h) - var data = imgData.data - var clone = frame.cloneData.data - - try { - var realw = w, realh = h, v, index - - 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,clone) - data[q] = r - data[q+1] = g - data[q+2] = b - data[q+3] = a - w = realw, h = realh - } - } - } - catch(e){ - // console.log(e.stack) - throw Error ("Shader execution error") - } - cc.putImageData(imgData,0,0) - shade = shade_no_error_handling -} - -shade = shade_error_handling - function add_frame(){ var frame_count = $("#framecount").int() if (frame_count < 2) { @@ -380,6 +321,7 @@ function add_frame(){ function add_single_frame(){ var $el = $("<div>") $el.html( $("#frame-template").html() ) + $el.attr('index', $("#frames div").length) var frame = cc.clone().appendTo($el.find(".frame")[0]) frame.canvas.className = "fullsize" frame.canvas.style.display = "none" @@ -409,6 +351,26 @@ function remove_frame(){ function remove_all_frames(){ $("#frames").empty() } +function shuffle_frames(){ + var shuffled = [] + var $frames = $("#frames div") + $("#frames").empty().append(shuffle($frames)) +} +function reverse_frames(){ + var $frames = $("#frames div") + $("#frames").empty().append(reverse($frames)) +} +function weave_frames(){ + var $frames = $("#frames div") + $("#frames").empty().append(weave($frames)) +} +function sort_frames(){ + var $frames = $("#frames div") + var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] }) + .sort(function(a,b){ return a[0]-b[0] }) + .map(function(i,e){ console.log( e ); return e[1] }) + $("#frames").empty().append(sorted) +} function render (){ if (rendering) return |