diff options
Diffstat (limited to 'js/app.js')
| -rw-r--r-- | js/app.js | 218 |
1 files changed, 17 insertions, 201 deletions
@@ -1,122 +1,24 @@ -var contentType = 'text/plain;charset=utf-8' -var cols = 80 -var rows = 24 var dragging = false var drawing = true var erasing = false var focused -var canvas, tools, palette, brush, mode, current_tool +var canvas, tools, palette, controls, brush, mode, current_tool function init () { build() bind() } function build () { - canvas = new Matrix (cols, rows, function(x,y){ - var lex = new Lex (x,y) -// lex.build() - return lex - }) shader.init() shader.run(canvas) shader.animate() - brush = new Matrix (5, 5, function(x,y){ - var lex = new Lex (x,y) - lex.build() - return lex - }) - palette = new Matrix (32, 2, function(x,y){ - var lex = new Lex (x,y) - lex.bg = colors[color_hue_order[y>>1]] - lex.build() - console.log(lex.bg, lex.css()) - return lex - }) canvas.append(canvas_rapper) brush.append(brush_rapper) palette.append(palette_rapper) - controls.circle = new Tool (circle_el) - controls.circle.use = function(){ - brush.generate = controls.circle.generate - brush.generate() - drawing = true - } - controls.circle.generate = function(){ - var fg = brush.fg, bg = brush.bg - var hw = brush.w/2|0, hh = brush.h/2|0 - brush.forEach(function(lex,x,y) { - var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2)) - if (len > Math.abs(hw)) { - lex.clear() - } - else { - lex.fill(fg,bg) - } - }) - } - - controls.square = new Tool (square_el) - controls.square.use = function(){ - brush.generate = controls.square.generate - brush.generate() - drawing = true - } - controls.square.generate = function(){ - var fg = brush.fg, bg = brush.bg - brush.fill(fg,bg) - } - - controls.text = new Tool (text_el) - controls.text.use = function(){ - brush.generate = controls.text.generate - brush.generate() - drawing = false - } - controls.text.generate = function(){ - } - - controls.clear = new Tool (clear_el) - controls.clear.use = function(){ - canvas.clear() - } - - controls.grid = new Tool (grid_el) - controls.grid.use = function(){ - document.body.classList.toggle('grid') - } - - controls.shader = new Tool (shader_el) - controls.shader.use = function(){ - shader_textarea.style.display = "block" - // setTimeout(function(){ shader_textarea.focus() }) - 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.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) - controls.canvas_height = new Lex (canvas_height_el) - controls.circle.focus() // controls.shader.focus() @@ -125,99 +27,16 @@ function build () { brush.build() } function bind () { - canvas.forEach(function(lex, x, y){ - lex.span.addEventListener('contextmenu', function(e){ - e.preventDefault() - }) - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - dragging = true - if (drawing) { - erasing = (e.which == "3" || e.ctrlKey) - draw(lex, x, y, erasing) - } - lex.focus() - }) - lex.span.addEventListener("mousemove", function(){ - if (! dragging) return - if (drawing) { - draw(lex, x, y, erasing) - } - lex.focus() - }) - }) - palette.forEach(function(lex, x, y){ - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - dragging = true - erasing = e.which == "3" - brush.fg = lex.fg - brush.bg = lex.bg - brush.generate() - }) - }) - brush.forEach(function(lex, x, y){ - lex.span.addEventListener('mousedown', function(e){ - e.preventDefault() - dragging = true -// lex.fill(lex.fg, lex.bg) - }) - }) + canvas.bind() + palette.bind() + brush.bind() + controls.bind() + window.addEventListener('mouseup', function(){ dragging = erasing = false if (current_tool.name != 'shader') { cursor_input.focus() } }); - [controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){ - lex.span.addEventListener('mousedown', function(e){ - lex.focus() - }) - }); - - [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() - }) - }) - - controls.width.key = int_key(function(n, keyCode){ - controls.width.blur() - controls.width.char = ""+n - controls.width.build() - brush.w = n - brush.rebuild() - }) - controls.height.key = int_key(function(n, keyCode){ - controls.height.blur() - controls.height.char = ""+n - controls.height.build() - brush.h = n - brush.rebuild() - }) - - controls.canvas_width.key = int_key(function(n, keyCode){ - controls.canvas_width.read() - if (controls.canvas_width.char.length == 1) { - n = parseInt(controls.canvas_width.char) * 10 + n - } - controls.canvas_width.char = ""+n - controls.canvas_width.build() - canvas.w = n - canvas.rebuild() - canvas.build() - }) - controls.canvas_height.key = int_key(function(n, keyCode){ - controls.canvas_height.read() - if (controls.canvas_height.char.length == 1) { - n = parseInt(controls.canvas_height.char) * 10 + n - } - controls.canvas_height.char = ""+n - controls.canvas_height.build() - canvas.h = n - canvas.rebuild() - canvas.build() - }) - window.addEventListener('mousedown', function(e){ if (current_tool.name == "shader") { return } cursor_input.focus() @@ -258,6 +77,17 @@ function bind () { } }) + var contentType = 'text/plain;charset=utf-8' + document.body.addEventListener('copy', function (e) { + if (e.clipboardData) { + e.preventDefault(); + e.clipboardData.setData(contentType, canvas.ascii()); + } + if (window.clipboardData) { + e.returnValue = false; + window.clipboardData.setData(contentType, canvas.ascii()); + } + }, false); document.addEventListener('DOMContentLoaded', function(){ if (current_tool.name != 'shader') { cursor_input.focus() } @@ -273,18 +103,4 @@ function int_key (f) { } } -function clamp (n,a,b){ return n < a ? a : n < b ? n : b } -function mod (i,n) { return i - n * Math.floor(i / n) } - -document.body.addEventListener('copy', function (e) { - if (e.clipboardData) { - e.preventDefault(); - e.clipboardData.setData(contentType, canvas.ascii()); - } - if (window.clipboardData) { - e.returnValue = false; - window.clipboardData.setData(contentType, canvas.ascii()); - } -}, false); - init() |