From 61ea379940152da18052a02185eb204fc7a9683d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Nov 2014 15:17:16 -0500 Subject: color functions and animate switch --- index.html | 7 +++++-- js/app.js | 17 ++++++++--------- js/color.js | 15 +++++++++++++++ js/shader.js | 11 ++++++----- 4 files changed, 34 insertions(+), 16 deletions(-) create mode 100644 js/color.js diff --git a/index.html b/index.html index 79740fe..bdc8747 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset #cursor_input { position: absolute; top: 0; right: 0; width:30px; } - +

@@ -33,13 +33,15 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset brush size: 5 x 5 canvas size: 80 x 24 + + _ animate

+ diff --git a/js/app.js b/js/app.js index a5e3aea..70f46f1 100644 --- a/js/app.js +++ b/js/app.js @@ -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 -- cgit v1.2.3-70-g09d2