diff options
| -rw-r--r-- | js/asdf.js | 2 | ||||
| -rw-r--r-- | shader-picker.html | 67 |
2 files changed, 46 insertions, 23 deletions
@@ -51,7 +51,7 @@ dumpfm.search = function (e){ }) } }; - + dumpfm.fetch = function(opt){ if (dumpfm.fetching) return; dumpfm.fetching = true; diff --git a/shader-picker.html b/shader-picker.html index 65a7f5f..42d2ca8 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -165,6 +165,9 @@ function init(){ gallery.init() console.log("gallery init") + document.getElementById('shader').addEventListener('input', shader_build); + shader_build() + requestAnimationFrame(animate) } function choose (){ @@ -246,57 +249,77 @@ function giveFrame(t){ return cq(w, h) } } + function ready(){ loading = false if (window.gif) { frame = gif.frames[0] + w = cc.canvas.width = frame.ctx.canvas.width + h = cc.canvas.height = frame.ctx.canvas.height + for (var i=0, f; f=gif.frames[i]; i++){ + f.cloneData = f.ctx.getImageData(0,0,w,h) + } } else { fc = cq(img.width, img.height) fc.drawImage(img, 0, 0) frame = img_frame = { ctx: fc.context } + w = cc.canvas.width = frame.ctx.canvas.width + h = cc.canvas.height = frame.ctx.canvas.height + frame.cloneData = frame.ctx.getImageData(0,0,w,h) } - w = cc.canvas.width = frame.ctx.canvas.width - h = cc.canvas.height = frame.ctx.canvas.height } -function shade(frame, t){ - if (! t || isNaN(t)) throw Error ("No time specified") - if (! frame) throw Error ("No frame specified") +var shader = function(){} + +var shader_build = function(){ + var fn_str = document.getElementById('shader').value + if (!fn_str.length) return try { - var f = $("#shader").val() - if (!f.length) return; - var shader = new Function('x','y','t','d', f) - } - catch (e) { + var fn = new Function('x','y','t','d', fn_str) + shader = fn + } catch (e) { throw Error ("Shader compilation error") } +} + +var r,g,b,a; + +function shade(frame, t){ + if (! t || isNaN(t)) throw Error ("No time specified") + if (! frame) throw Error ("No frame specified") - var imageData = frame.ctx.getImageData(0,0,w,h) - var data = imageData.data + var imgData = frame.ctx.getImageData(0,0,w,h) + var data = imgData.data + var clone = frame.cloneData.data - var cloneData = frame.ctx.getImageData(0,0,w,h) - var clone = cloneData.data + var u32 = new Uint32Array(imgData.data.buffer); try { - var realw = w, realh = h + 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] + index = (y*w+x) + a = u32[index] >> 24 & 0xff + b = u32[index] >> 16 & 0xff + g = u32[index] >> 8 & 0xff; + r = u32[index] & 0xff result = shader(x,y,t,clone) - data[q] = r - data[q+1] = g - data[q+2] = b - data[q+3] = a + u32[index] = + (a << 24) | + (b << 16) | + (g << 8) | + r; w = realw, h = realh } } } catch(e){ + // console.log(e.stack) throw Error ("Shader execution error") } - cc.putImageData(imageData,0,0) + cc.putImageData(imgData,0,0) } function add_frame(){ |