From dd8a053f9845d4adeb8540f24d1e8d46def35ad3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Nov 2014 11:44:05 -0500 Subject: shader --- index.html | 4 +-- js/app.js | 20 ++++++++--- js/draw.js | 1 - js/lex.js | 2 +- js/shader.js | 34 ++++++++++++++---- js/util.js | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 163 insertions(+), 14 deletions(-) create mode 100644 js/util.js diff --git a/index.html b/index.html index c1c250a..3a6d1a7 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } body.loading { opacity: 0; } body { transition: 0.1s linear; } body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset 0 0 2px white; } -#shader_textarea { display: none; } +#shader_textarea { display: none; width: 400px; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; } @@ -35,7 +35,6 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset - + diff --git a/js/app.js b/js/app.js index 84333e9..9cd9cf8 100644 --- a/js/app.js +++ b/js/app.js @@ -24,12 +24,12 @@ function init () { function build () { canvas = new Matrix (cols, rows, function(x,y){ var lex = new Lex (x,y) - // - shader(lex, x, y) - // - lex.build() +// lex.build() return lex }) + shader.init() + shader.run(canvas) + brush = new Matrix (5, 5, function(x,y){ var lex = new Lex (x,y) lex.build() @@ -98,11 +98,17 @@ function build () { controls.shader = new Tool (shader_el) controls.shader.use = function(){ shader_textarea.style.display = "block" + setTimeout(function(){ shader_textarea.focus() }) } controls.shader.blur = function(){ Tool.prototype.blur.call(this) shader_textarea.style.display = "none" } + shader_textarea.value = demo_shader.innerHTML + shader_textarea.addEventListener("input", function(){ + var fn = shader.build(shader_textarea.value) + fn && shader.run(canvas) + }) controls.width = new Lex (width_el) controls.height = new Lex (height_el) @@ -194,6 +200,7 @@ function bind () { controls.canvas_width.build() canvas.w = n canvas.rebuild() + canvas.build() }) controls.canvas_height.key = int_key(function(n, keyCode){ controls.canvas_height.read() @@ -204,12 +211,17 @@ function bind () { controls.canvas_height.build() canvas.h = n canvas.rebuild() + canvas.build() }) window.addEventListener('keydown', function(e){ + if (current_tool.name == "shader") { + return + } if (! e.metaKey && ! e.ctrlKey && ! e.altKey) { e.preventDefault() } + // console.log(e.keyCode) switch (e.keyCode) { case 27: // esc diff --git a/js/draw.js b/js/draw.js index cb7f816..6ccdda7 100644 --- a/js/draw.js +++ b/js/draw.js @@ -16,4 +16,3 @@ function stamp (canvas, brush, x, y, erasing) { } }) } - diff --git a/js/lex.js b/js/lex.js index e98538c..7066ddb 100644 --- a/js/lex.js +++ b/js/lex.js @@ -16,7 +16,7 @@ Lex.prototype.build = function(){ this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - return "f" + letters[this.fg&15] + "b" + letters[this.bg&15] + return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,15)] } Lex.prototype.html = function(){ return this.char == " " ? " " : this.char || " " diff --git a/js/shader.js b/js/shader.js index a6937b7..b829a0d 100644 --- a/js/shader.js +++ b/js/shader.js @@ -1,7 +1,29 @@ -(function(){ +var shader = (function(){ + var fn_str, fn, lex + var exports = {} + + exports.init = function(){ + lex = new Lex (0, 0) + exports.build(demo_shader.innerHTML) + } + exports.build = function (fn_str){ + new_fn = new Function('lex', 'x', 'y', fn_str) + try { + new_fn(lex, 0, 0) + } + catch (e) { + throw 'Shader execution error' + } + exports.fn = fn = new_fn + return fn + } + exports.run = function(canvas){ + canvas.forEach(function(lex, y, x){ + fn(lex, x, y) + lex.build() + }) + } + + return exports - var fn_str = demo_shader.innerHTML - var shader = new Function('lex', 'x', 'y', fn_str) - - window.shader = shader -})() \ No newline at end of file +})() diff --git a/js/util.js b/js/util.js new file mode 100644 index 0000000..fac0faf --- /dev/null +++ b/js/util.js @@ -0,0 +1,116 @@ +if (window.$) { + $.fn.int = function(){ return parseInt($(this).val(),10) } + $.fn.float = function(){ return parseFloat($(this).val()) } + $.fn.string = function(){ return trim($(this).val()) } + $.fn.enable = function() { return $(this).attr("disabled",null) } + $.fn.disable = function() { return $(this).attr("disabled","disabled") } +} + +function noop(){} +function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } + +var E = Math.E +var PI = Math.PI +var PHI = (1+Math.sqrt(5))/2 +var TWO_PI = PI*2 +var LN10 = Math.LN10 +function clamp(n,a,b){ return n= 0.5 ? -1 : 1 } +function choice(a){ return a[randint(a.length)] } +function deg(n){ return n*180/PI } +function rad(n){ return n*PI/180 } +function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) } +function mod(n,m){ return n-(m * floor(n/m)) } +function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) } +function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) } +function avg(m,n,a){ return (m*(a-1)+n)/a } +function quantize(a,b){ return ~~(a/b)*b } + +function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) } +function rgbpixel(d,x,y){ + var p = pixel(~~x,~~y) + r = d[p] + g = d[p+1] + b = d[p+2] + a = d[p+3] +} +function fit(d,x,y){ rgbpixel(d,x*actual_w/w,y*actual_h/h) } + +function step(a, b){ + return (b >= a) + 0 + // ^^ bool -> int +} + + +function julestep (a,b,n) { + return clamp(norm(n,a,b), 0.0, 1.0); +} + +// hermite curve apparently +function smoothstep(min,max,n){ + var t = clamp((n - min) / (max - min), 0.0, 1.0); + 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 +} \ No newline at end of file -- cgit v1.2.3-70-g09d2