diff options
| -rw-r--r-- | colors.html | 5 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | js/blit.js | 41 | ||||
| -rw-r--r-- | js/clipboard.js | 1 | ||||
| -rw-r--r-- | js/color.js | 16 | ||||
| -rw-r--r-- | js/draw.js | 2 | ||||
| -rw-r--r-- | js/lex.js | 9 | ||||
| -rw-r--r-- | js/matrix.js | 8 | ||||
| -rw-r--r-- | js/ui/canvas.js | 2 | ||||
| -rw-r--r-- | js/ui/palette.js | 2 |
10 files changed, 75 insertions, 15 deletions
diff --git a/colors.html b/colors.html index 7ae4a60..f063e09 100644 --- a/colors.html +++ b/colors.html @@ -16,9 +16,9 @@ <script> // 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(" "); +// "yellow lime green teal cyan blue magenta dark-gray light-gray white").split(" "); -var color_mat_order = ("dark-red red orange yellow lime cyan dark-cyan blue dark-blue purple magenta dark-red black").split(" ") +var color_mat_order = ("dark-red red orange yellow lime cyan teal blue dark-blue purple magenta dark-red black").split(" ") function color_mat (i) { return colors[color_mat_order[ mod(i,color_mat_order.length) ]] } @@ -83,6 +83,7 @@ var canvas = new Matrix (72, 35, function(x,y){ lerp_color(lex, start_color, end_color, t, xx, yy) } + lex.opacity = 1 lex.build() return lex }) @@ -58,7 +58,8 @@ <script type="text/javascript-shader" id="demo_shader"> lex.bg = hue((x+y*y+t/10)/20) lex.fg = (x+y)%16 - lex.char = (y%2) ? ":" : "%" + lex.char = (y%2) ? ":" : "%" + lex.opacity = 1 </script> <script src="js/util.js"></script> <script src="js/color.js"></script> @@ -66,6 +67,7 @@ <script src="js/lex.js"></script> <script src="js/matrix.js"></script> +<script src="js/blit.js"></script> <script src="js/tool.js"></script> <script src="js/shader.js"></script> <script src="js/draw.js"></script> diff --git a/js/blit.js b/js/blit.js new file mode 100644 index 0000000..09f39b2 --- /dev/null +++ b/js/blit.js @@ -0,0 +1,41 @@ +var blit = (function(){ + var blit = {} + blit.and = blit.atop = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && lex.opacity > 0) { + cell.clone(lex) + } + }) + } + blit.or = blit.under = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && cell.opacity == 0) { + cell.clone(lex) + } + }) + } + blit.set = blit.replace = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell) { + cell.clone(lex) + } + }) + } + blit.invert = function(A, B, x, y){ + x = x || 0 ; y = y || 0 + B.forEach(function(lex, u, v){ + var cell = A.getCell(u+x, v+y) + if (cell && lex.opacity > 0) { + cell.fg = get_inverse(cell.fg) + cell.bg = get_inverse(cell.bg) + } + }) + } + return blit +})() diff --git a/js/clipboard.js b/js/clipboard.js index 0788284..da326ff 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -66,6 +66,7 @@ var clipboard = (function () { if (! lex) return lex.char = line[x] lex.fg = brush.bg + lex.opacity = 1 lex.build() } }) diff --git a/js/color.js b/js/color.js index 8f51518..5328095 100644 --- a/js/color.js +++ b/js/color.js @@ -1,25 +1,29 @@ 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 all_color_hue_order = ("dark-red red orange " + - "yellow lime green dark-cyan cyan blue dark-blue purple magenta black dark-gray light-gray white").split(" "); -var color_hue_order = "dark-red red orange yellow lime cyan dark-cyan blue dark-blue purple magenta".split(" "); + "yellow lime teal cyan blue magenta dark-gray light-gray").split(" "); +var all_color_hue_order = "dark-red red orange yellow lime green teal cyan blue dark-blue purple magenta black dark-gray light-gray white".split(" "); +var all_color_inv_order = "cyan teal blue dark-blue purple magenta dark-red red orange yellow lime green white light-gray dark-gray black".split(" "); +var color_hue_order = "dark-red red orange yellow lime cyan teal blue dark-blue purple magenta".split(" "); +var color_inv_order = "cyan teal blue dark-blue purple magenta dark-red red orange yellow lime green".split(" "); var gray_names = ("black dark-gray light-gray white").split(" ") var fire_names = ("black dark-red red orange yellow white cyan").split(" ") var red_names = ("black dark-red red").split(" ") var yellow_names = ("black orange yellow white").split(" ") -var green_names = ("dark-cyan green lime").split(" ") +var green_names = ("teal green lime").split(" ") var blue_names = ("black dark-blue blue").split(" ") var purple_names = ("dark-blue purple magenta red").split(" ") -var dark_gray_names = ("black dark-blue dark-cyan dark-gray light-gray white").split(" ") +var dark_gray_names = ("black dark-blue teal dark-gray light-gray white").split(" ") var letters = "abcdefghijklmnop"; var colors = {} color_names.forEach(function(name, i){ colors[name] = i }) +function get_inverse (n) { return colors[all_color_inv_order.indexOf(color_names[n])] } function all_hue (n) { return colors[all_color_hue_order[mod(n, 16)|0]] } +function all_inv_hue (n) { return colors[all_color_inv_order[mod(n, 16)|0]] } function hue (n) { return colors[color_hue_order[mod(n, 11)|0]] } +function inv_hue (n) { return colors[color_inv_order[mod(n, 11)|0]] } function gray (n) { return colors[gray_names[mod(n, 4)|0]] } function fire (n) { return colors[fire_names[mod(n, 7)|0]] } function red (n) { return colors[red_names[mod(n, 3)|0]] } @@ -20,7 +20,7 @@ function stamp (canvas, brush, x, y, erasing) { brush.forEach(function(lex, s, t){ s = round( s + x-hh ) t = round( t + y-hh ) - if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) { + if (lex.opacity > 0 && s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) { if (erasing) { canvas.aa[t][s].erase(lex) } @@ -10,12 +10,14 @@ function Lex (x,y) { this.fg = colors.white this.bg = colors.black this.char = " " + this.opacity = 1 } Lex.prototype.build = function(){ this.span.className = this.css() this.span.innerHTML = this.html() } Lex.prototype.css = function(){ + if (this.opacity == 0) return "fabb" return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ @@ -52,16 +54,17 @@ Lex.prototype.clone = function (lex){ this.fg = lex.fg this.bg = lex.bg this.char = lex.char + this.opacity = lex.opacity this.build() } -Lex.prototype.erase = function (lex){ - if (lex.opacity == 0) return +Lex.prototype.erase = function (){ this.fg = colors.white this.bg = colors.black this.char = " " + this.opacity = 0 this.build() } -Lex.prototype.fill = function(fg,bg){ +Lex.prototype.fill = function(fg, bg){ this.fg = fg this.bg = bg this.opacity = 1 diff --git a/js/matrix.js b/js/matrix.js index 0bb2492..fd4ee4f 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -89,6 +89,14 @@ Matrix.prototype.region = function(w,h,x,y) { return parent.aa[y][x] }) mat.f = this.f + return mat +} +Matrix.prototype.setCell = function(lex,x,y){ + this.aa[y] && this.aa[y][x] && this.aa[y][x].clone(lex) +} +Matrix.prototype.getCell = function(x,y){ + if (this.aa[y] && this.aa[y][x]) return this.aa[y][x] + else return null } Matrix.prototype.ascii = function () { var lines = this.aa.map(function(row, y){ diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 4b595a5..d354c62 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -1,4 +1,4 @@ -var canvas = (function(){ +var canvas = current_canvas = (function(){ var cols = 80 var rows = 24 diff --git a/js/ui/palette.js b/js/ui/palette.js index ce8078e..54211fb 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -2,7 +2,7 @@ var palette = (function(){ var palette = new Matrix (32, 2, function(x,y){ var lex = new Lex (x,y) - lex.bg = all_hue(x>>1) + lex.bg = all_inv_hue(x>>1) lex.build() return lex }) |