diff options
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | js/app.js | 218 | ||||
| -rw-r--r-- | js/color.js | 2 | ||||
| -rw-r--r-- | js/draw.js | 3 | ||||
| -rw-r--r-- | js/lex.js | 4 | ||||
| -rw-r--r-- | js/matrix.js | 24 | ||||
| -rw-r--r-- | js/ui/brush.js | 27 | ||||
| -rw-r--r-- | js/ui/canvas.js | 42 | ||||
| -rw-r--r-- | js/ui/controls.js | 136 | ||||
| -rw-r--r-- | js/ui/palette.js | 31 |
10 files changed, 287 insertions, 209 deletions
@@ -57,10 +57,17 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset */ </script> <script src="js/util.js"></script> +<script src="js/color.js"></script> + <script src="js/lex.js"></script> <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/ui/brush.js"></script> +<script src="js/ui/canvas.js"></script> +<script src="js/ui/controls.js"></script> +<script src="js/ui/palette.js"></script> + <script src="js/app.js"></script> @@ -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() diff --git a/js/color.js b/js/color.js index f469a8f..14df600 100644 --- a/js/color.js +++ b/js/color.js @@ -6,7 +6,7 @@ var color_hue_order = ("black dark-blue purple dark-red red orange " + 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 = {} +var colors = {} color_names.forEach(function(name, i){ colors[name] = i }) @@ -1,6 +1,9 @@ + + function draw (lex, x, y, erasing) { stamp (canvas, brush, x, y, erasing) } + function stamp (canvas, brush, x, y, erasing) { hh = brush.w/2|0 brush.forEach(function(lex, s, t){ @@ -2,8 +2,8 @@ direction = [1,0] function Lex (x,y) { if (typeof x == "number") { - this.x = x this.y = y + this.x = x this.span = document.createElement("span") } else { @@ -53,6 +53,7 @@ Lex.prototype.erase = function (lex){ Lex.prototype.fill = function(fg,bg){ this.fg = fg this.bg = bg + this.opacity = 1 this.build() } Lex.prototype.eq = function(lex){ @@ -62,6 +63,7 @@ Lex.prototype.clear = function(){ this.bg = 1 this.fg = 0 this.char = " " + this.opacity = 0 this.build() } Lex.prototype.isClear = function(){ diff --git a/js/matrix.js b/js/matrix.js index 8975f15..87cb0fe 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -7,10 +7,10 @@ function Matrix (w,h,f){ Matrix.prototype.initialize = function(){ var w = this.w || 1, h = this.h || 1, f = this.f var aa = new Array (h) - for (var i = 0; i < h; i++) { - aa[i] = new Array (w) - for (var j = 0; j < w; j++) { - aa[i][j] = f(i,j) + for (var y = 0; y < h; y++) { + aa[y] = new Array (w) + for (var x = 0; x < w; x++) { + aa[y][x] = f(x,y) } } this.aa = aa @@ -19,8 +19,10 @@ Matrix.prototype.rebuild = function (){ this.demolish() this.initialize() this.append() + this.bind() this.generate && this.generate() } +Matrix.prototype.bind = function () {} Matrix.prototype.demolish = function (){ this.forEach(function(lex){ lex.demolish() @@ -40,7 +42,7 @@ Matrix.prototype.forEach = function(f){ }) }) } -Matrix.prototype.focusLex = function(x,y){ +Matrix.prototype.focusLex = function(y,x){ this.aa[mod(y,this.h)][mod(x,this.w)].focus() } Matrix.prototype.clear = function(){ @@ -70,6 +72,17 @@ Matrix.prototype.append = function(rapper){ rapper.appendChild( div ) }) } +Matrix.prototype.region = function(w,h,x,y) { + w = w || 1 + h = h || 1 + x = x || 0 + y = y || 0 + var parent = this + var mat = new Matrix(w, h, function(x,y){ + return parent.aa[y][x] + }) + mat.f = this.f +} Matrix.prototype.ascii = function () { var lines = this.aa.map(function(row, y){ var last, line = "" @@ -83,6 +96,7 @@ Matrix.prototype.ascii = function () { last = lex } }) + if (last && ! last.isClear()) { line += "\\x03" } return line.replace(/\s+$/,"") }).filter(function(line){ return line.length > 0 }) var txt = '/exec -out printf "' + lines.join("\\n") + '"\n' diff --git a/js/ui/brush.js b/js/ui/brush.js new file mode 100644 index 0000000..1b01081 --- /dev/null +++ b/js/ui/brush.js @@ -0,0 +1,27 @@ +var brush = (function(){ + var brush = new Matrix (5, 5, function(x,y){ + var lex = new Lex (x,y) + lex.build() + return lex + }) + + brush.bind = function(){ + brush.forEach(function(lex, x, y){ + if (lex.bound) return + lex.bound = true + + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + // lex.fill(lex.fg, lex.bg) + }) + + }) + } + + brush.fg = 0 + brush.bg = 1 + + return brush + +})()
\ No newline at end of file diff --git a/js/ui/canvas.js b/js/ui/canvas.js new file mode 100644 index 0000000..7e85fcf --- /dev/null +++ b/js/ui/canvas.js @@ -0,0 +1,42 @@ +var canvas = (function(){ + + var cols = 80 + var rows = 24 + + var exports = new Matrix (cols, rows, function(x,y){ + var lex = new Lex (x,y) +// lex.build() + return lex + }) + + exports.bind = function(){ + exports.forEach(function(lex, x, y){ + if (lex.bound) return + lex.bound = true + + 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() + }) + + }) + } + + return exports + +})() diff --git a/js/ui/controls.js b/js/ui/controls.js new file mode 100644 index 0000000..6f56727 --- /dev/null +++ b/js/ui/controls.js @@ -0,0 +1,136 @@ +var controls = (function(){ + + var controls = {} + 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.bind = function(){ + [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() + }) + } + + return controls +})()
\ No newline at end of file diff --git a/js/ui/palette.js b/js/ui/palette.js new file mode 100644 index 0000000..605c08b --- /dev/null +++ b/js/ui/palette.js @@ -0,0 +1,31 @@ +var palette = (function(){ +console.log("hi") + var palette = new Matrix (32, 2, function(x,y){ + var lex = new Lex (x,y) + lex.bg = hue(x>>1) + lex.build() + console.log(lex.bg, lex.css()) + return lex + }) + + palette.bind = function(){ + palette.forEach(function(lex, x, y){ + if (lex.bound) return + lex.bound = true + + lex.span.addEventListener('mousedown', function(e){ + e.preventDefault() + dragging = true + erasing = e.which == "3" + brush.fg = lex.fg + brush.bg = lex.bg + brush.generate() + }) + + }) + } + + return palette + +})() + |