diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-11-22 15:17:16 -0500 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-11-22 15:17:16 -0500 |
| commit | 61ea379940152da18052a02185eb204fc7a9683d (patch) | |
| tree | 71e7f9c9b7ed52ce6651ba8339b371bce4b6da7c | |
| parent | b4d19e469b3de98778002ac97814c6b647cba113 (diff) | |
color functions and animate switch
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | js/app.js | 17 | ||||
| -rw-r--r-- | js/color.js | 15 | ||||
| -rw-r--r-- | js/shader.js | 11 |
4 files changed, 34 insertions, 16 deletions
@@ -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; } </style> -<body class="grid loading"> +<body class="loading"> <div> <div id="canvas_rapper" class="rapper"></div> @@ -33,13 +33,15 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span> canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span> + + <span id="animate_checkbox" class="tool">_ animate</span> </div> <textarea id="shader_textarea"></textarea> </div> <input type="text" id="cursor_input"> </body> <script type="text/javascript-shader" id="demo_shader"> - lex.bg = colors[color_hue_order[Math.floor((x+y*y)/20)%16]] + lex.bg = colors[color_hue_order[Math.floor((x+y*y+t)/20)%16]] lex.fg = (x+y)%16 lex.char = (y%2) ? ":" : "%" @@ -59,5 +61,6 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset <script src="js/matrix.js"></script> <script src="js/tool.js"></script> <script src="js/shader.js"></script> +<script src="js/color.js"></script> <script src="js/draw.js"></script> <script src="js/app.js"></script> @@ -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 |