diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/app.js | 17 | ||||
| -rw-r--r-- | js/color.js | 15 | ||||
| -rw-r--r-- | js/shader.js | 11 |
3 files changed, 29 insertions, 14 deletions
@@ -9,14 +9,6 @@ var focused var canvas, tools, palette, brush, mode, current_tool -var color_names = ("white black dark-blue green red dark-red purple orange " + - "yellow lime dark-cyan cyan blue magenta dark-gray light-gray").split(" "); -var color_hue_order = ("black dark-blue purple dark-red red orange " + - "yellow lime green dark-cyan cyan blue magenta dark-gray light-gray white").split(" "); -var letters = "abcdefghijklmnop"; -var colors = {}, controls = {} -color_names.forEach(function(name, i){ colors[name] = i }) - function init () { build() bind() @@ -113,6 +105,13 @@ function build () { fn && shader.run(canvas) }) + controls.animate = new Tool (animate_checkbox) + controls.animate.use = function(){ + var state = shader.toggle() + if (state) animate_checkbox.innerHTML = "x animate" + else animate_checkbox.innerHTML = "_ animate" + } + controls.width = new Lex (width_el) controls.height = new Lex (height_el) controls.canvas_width = new Lex (canvas_width_el) @@ -175,7 +174,7 @@ function bind () { }) }); - [controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader].forEach(function(tool){ + [controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader, controls.animate].forEach(function(tool){ tool.span.addEventListener('mousedown', function(e){ tool.focus() }) diff --git a/js/color.js b/js/color.js new file mode 100644 index 0000000..f469a8f --- /dev/null +++ b/js/color.js @@ -0,0 +1,15 @@ + +var color_names = ("white black dark-blue green red dark-red purple orange " + + "yellow lime dark-cyan cyan blue magenta dark-gray light-gray").split(" "); +var color_hue_order = ("black dark-blue purple dark-red red orange " + + "yellow lime green dark-cyan cyan blue magenta dark-gray light-gray white").split(" "); +var gray_names = ("black dark-gray light-gray white").split(" ") +var red_names = ("black dark-red red orange yellow white cyan").split(" ") +var letters = "abcdefghijklmnop"; +var colors = {}, controls = {} +color_names.forEach(function(name, i){ colors[name] = i }) + + +function hue (n) { return colors[color_hue_order[mod(n, 16)|0]] } +function gray (n) { return colors[gray_names[mod(n, 4)|0]] } +function red (n) { return colors[red_names[mod(n, 7)|0]] } diff --git a/js/shader.js b/js/shader.js index cd6b899..d203abe 100644 --- a/js/shader.js +++ b/js/shader.js @@ -8,9 +8,9 @@ var shader = (function(){ exports.build(demo_shader.innerHTML) } exports.build = function (fn_str){ - new_fn = new Function('lex', 'x', 'y', 't', fn_str) + new_fn = new Function('lex', 'x', 'y', 'w', 'h', 't', fn_str) try { - new_fn(lex, 0, 0) + new_fn(lex, 0, 0, 1, 1, 0) } catch (e) { throw 'Shader execution error' @@ -19,14 +19,15 @@ var shader = (function(){ return fn } exports.run = function(canvas){ - var t = +new Date - canvas.forEach(function(lex, y, x){ - fn(lex, x, y, t) + var t = +new Date, w = canvas.w, h = canvas.h + canvas.forEach(function(lex, x, y){ + fn(lex, x, y, w, h, t) lex.build() }) } exports.toggle = function(state){ animating = typeof state == "boolean" ? state : ! animating + return animating } exports.pause = function(){ animating = false |