summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/app.js1
-rw-r--r--js/blit.js17
-rw-r--r--js/lex.js9
-rw-r--r--js/matrix.js53
-rw-r--r--js/ui/brush.js14
-rw-r--r--js/ui/canvas.js20
-rw-r--r--js/ui/controls.js74
-rw-r--r--js/ui/keys.js16
-rw-r--r--js/ui/palette.js61
9 files changed, 149 insertions, 116 deletions
diff --git a/js/app.js b/js/app.js
index 598c02b..2d57a07 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,6 @@ var erasing = false
var selecting = false
var filling = false
var changed = false
-var fillColor = 1 // black
var focused
var canvas, tools, palette, controls, brush, mode, current_tool, current_canvas
diff --git a/js/blit.js b/js/blit.js
index ac8cb42..367d67b 100644
--- a/js/blit.js
+++ b/js/blit.js
@@ -47,5 +47,22 @@ var blit = (function(){
}
})
}
+ blit.circle = function(A, lex){
+ var hw = brush.w/2|0, hh = brush.h/2|0
+ A.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()
+ }
+ })
+ }
+ blit.cross = function(A, lex){
+ A.forEach(function(lex,x,y) {
+ if ((x+y)%2) {
+ lex.clear()
+ }
+ })
+ }
+
return blit
})()
diff --git a/js/lex.js b/js/lex.js
index 6a3127a..c68d0e0 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -78,10 +78,11 @@ Lex.prototype.erase = function (){
this.opacity = 1
this.build()
}
-Lex.prototype.fill = function(fg, bg){
- this.fg = fg
- this.bg = bg
- this.opacity = 1
+Lex.prototype.fill = function(lex){
+ this.fg = lex.fg
+ this.bg = lex.bg
+ this.char = lex.char
+ this.opacity = lex.opacity
this.build()
}
Lex.prototype.eq = function(lex){
diff --git a/js/matrix.js b/js/matrix.js
index bc09099..7327727 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -23,31 +23,31 @@ Matrix.prototype.rebuild = function (){
this.append()
this.bind()
this.generate && this.generate()
- check_if_lost_focus()
+ check_if_lost_focus()
}
Matrix.prototype.clone = function () {
- var base = this
- var clone = new Matrix(this.w, this.h, function(x,y){
- return base.getCell(x,y).clone()
- })
- clone.f = this.f
- return clone
+ var base = this
+ var clone = new Matrix(this.w, this.h, function(x,y){
+ return base.getCell(x,y).clone()
+ })
+ clone.f = this.f
+ return clone
}
Matrix.prototype.assign = function (mat) {
- var base = this
- this.demolish()
- this.w = mat.w
- this.h = mat.h
-// this.f = function(){}
- this.initialize(function(x,y){
- var el = mat.getCell(x,y).clone()
- el.build()
- return el
- })
+ var base = this
+ this.demolish()
+ this.w = mat.w
+ this.h = mat.h
+// this.f = function(){}
+ this.initialize(function(x,y){
+ var el = mat.getCell(x,y).clone()
+ el.build()
+ return el
+ })
this.append()
this.bind()
- check_if_lost_focus()
- return this
+ check_if_lost_focus()
+ return this
}
Matrix.prototype.bind = function () {}
@@ -85,14 +85,17 @@ Matrix.prototype.clear = function(){
Matrix.prototype.erase = function(){
this.forEach(function(lex,x,y){ lex.erase() })
}
-Matrix.prototype.fill = function(fg, bg){
- this.fg = fg
- this.bg = bg
- this.forEach(function(lex,x,y){
- lex.fill(fg,bg)
- lex.build()
+Matrix.prototype.fill = function(lex){
+ this.fg = lex.fg
+ this.bg = lex.bg
+ this.char = lex.char
+ this.opacity = lex.opacity
+ this.forEach(function(el,x,y){
+ el.fill(lex)
+ el.build()
})
}
+
Matrix.prototype.build = function(){
this.forEach(function(lex,x,y){
lex.build()
diff --git a/js/ui/brush.js b/js/ui/brush.js
index 730cfc0..53c0e46 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -32,8 +32,8 @@ var brush = (function(){
lex.erase()
}
else {
- fillColor = brush.bg
- lex.fill(brush.fg, brush.bg)
+ fillColor = brush.bg
+ lex.fill(brush)
}
lex.focus()
})
@@ -47,7 +47,7 @@ var brush = (function(){
lex.erase()
}
else {
- lex.fill(brush.fg, brush.bg)
+ lex.fill(brush)
}
lex.focus()
})
@@ -70,10 +70,10 @@ var brush = (function(){
}
brush.assign = function(lex){
- brush.char = lex.char
- brush.fg = lex.fg
- brush.bg = lex.bg
- brush.opacity = 1
+ brush.char = lex.char
+ brush.fg = lex.fg
+ brush.bg = lex.bg
+ brush.opacity = 1
}
brush.char = " "
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 059b24c..75131c1 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -24,16 +24,16 @@ var canvas = current_canvas = (function(){
dragging = true
current_canvas = canvas
if (e.altKey) {
- if (e.shiftKey) {
- blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2))
- draw.set_last_point(e, point)
- }
- else {
- brush.assign(lex)
- brush.generate()
- dragging = false
- }
- return
+ if (e.shiftKey) {
+ blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2))
+ draw.set_last_point(e, point)
+ }
+ else {
+ brush.assign(lex)
+ brush.generate()
+ dragging = false
+ }
+ return
}
else if (drawing) {
draw.down(e, lex, point)
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 734472d..1a8011c 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -7,18 +7,14 @@ var controls = (function(){
brush.generate = controls.cross.generate
brush.generate()
drawing = true
- filling = false
brush.modified = false
}
controls.cross.generate = function(){
- brush.forEach(function(lex,x,y) {
- if ((x+y)%2) {
- lex.clear()
- }
- else {
- lex.assign(brush)
- }
- })
+ brush.fill(brush)
+ blit.cross(brush)
+ }
+ controls.cross.done = function(){
+ drawing = false
}
controls.circle = new Tool (circle_el)
@@ -29,20 +25,11 @@ var controls = (function(){
brush.modified = false
}
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.assign(brush)
- }
- })
+ brush.fill(brush)
+ blit.circle(brush)
}
controls.circle.done = function(){
- drawing = false
+ drawing = false
}
controls.square = new Tool (square_el)
@@ -53,11 +40,10 @@ var controls = (function(){
drawing = true
}
controls.square.generate = function(){
- var fg = brush.fg, bg = brush.bg
- brush.fill(fg,bg)
+ brush.fill(brush)
}
controls.square.done = function(){
- drawing = false
+ drawing = false
}
controls.text = new Tool (text_el)
@@ -82,7 +68,7 @@ var controls = (function(){
document.body.classList.add("bucket")
}
controls.fill.done = function(){
- filling = false
+ filling = false
document.body.classList.remove("bucket")
}
@@ -93,26 +79,26 @@ var controls = (function(){
controls.webcam = new Tool (webcam_el)
controls.webcam.load = function(){
- this.loaded = true
- webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
- window.addEventListener("message", function(e){
- if (e.origin !== window.location.origin) return
- controls.webcam.blur()
- controls.circle.focus()
- import_textarea.value = e.data
- clipboard.import_colorcode()
- })
+ this.loaded = true
+ webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
+ window.addEventListener("message", function(e){
+ if (e.origin !== window.location.origin) return
+ controls.webcam.blur()
+ controls.circle.focus()
+ import_textarea.value = e.data
+ clipboard.import_colorcode()
+ })
}
controls.webcam.use = function(){
- if (! this.loaded) {
- this.load()
- }
- webcam_iframe.src = "webcam.html"
- webcam_rapper.style.display = "block"
+ if (! this.loaded) {
+ this.load()
+ }
+ webcam_iframe.src = "webcam.html"
+ webcam_rapper.style.display = "block"
}
controls.webcam.done = function(){
- webcam_iframe.src = ""
- webcam_rapper.style.display = "none"
+ webcam_iframe.src = ""
+ webcam_rapper.style.display = "none"
}
controls.grid = new Checkbox (grid_el)
@@ -281,9 +267,9 @@ var controls = (function(){
canvas.resize(canvas.w, h)
}
- add_custom_el.addEventListener("click", function(){
- custom.clone()
- })
+ add_custom_el.addEventListener("click", function(){
+ custom.clone()
+ })
}
diff --git a/js/ui/keys.js b/js/ui/keys.js
index fc958b0..f76d562 100644
--- a/js/ui/keys.js
+++ b/js/ui/keys.js
@@ -7,7 +7,7 @@ var keys = (function(){
// console.log("keycode:", e.keyCode)
if (e.altKey) {
- document.body.classList.add("dropper")
+ document.body.classList.add("dropper")
}
switch (e.keyCode) {
@@ -19,7 +19,7 @@ var keys = (function(){
e.preventDefault()
brush.contract(1)
brush.modified = false
- check_if_lost_focus()
+ check_if_lost_focus()
break
}
case 221: // ]
@@ -83,12 +83,12 @@ var keys = (function(){
current_canvas.focusLex(y + direction[0], x + direction[1])
}
})
-
- cursor_input.addEventListener("keyup", function(e){
+
+ cursor_input.addEventListener("keyup", function(e){
if (! e.altKey) {
- document.body.classList.remove("dropper")
+ document.body.classList.remove("dropper")
}
- })
+ })
}
@@ -96,6 +96,6 @@ var keys = (function(){
})()
function check_if_lost_focus() {
- if (! focused || ! focused.span)
- focused = canvas.aa[0][0]
+ if (! focused || ! focused.span)
+ focused = canvas.aa[0][0]
} \ No newline at end of file
diff --git a/js/ui/palette.js b/js/ui/palette.js
index 871dd74..f42ad6b 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -1,15 +1,32 @@
+var fillColor = 1 // black
+
var palette = (function(){
- var palette_index = localStorage.getItem("ascii.palette") || 1
- var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse]
- var palette_fn = palette_list[palette_index]
- var palette = new Matrix (32, 2, function(x,y){
+ var palette_index = localStorage.getItem("ascii.palette") || 1
+ var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse]
+ var palette_fn = palette_list[palette_index]
+ var palette_chars = " ▓▒░"
+ var palette = new Matrix (32, 5, function(x,y){
var lex = new Lex (x,y)
- lex.bg = palette_fn(x>>1)
- lex.opacity = 1
- lex.build()
return lex
})
+ palette.repaint = function(){
+ palette.forEach(function(lex,x,y){
+ if (y < 2) {
+ lex.bg = palette_fn(x>>1)
+ lex.fg = fillColor
+ }
+ else {
+ lex.bg = fillColor
+ lex.fg = palette_fn(x>>1)
+ }
+ lex.char = palette_chars[y]
+ lex.opacity = 1
+ lex.build()
+ if (lex.char == "_") lex.char = " "
+ })
+ }
+ palette.repaint()
palette.bind = function(){
palette.forEach(function(lex, x, y){
@@ -19,25 +36,35 @@ var palette = (function(){
lex.span.addEventListener('mousedown', function(e){
e.preventDefault()
if (e.shiftKey) {
- palette_index = (palette_index+1) % palette_list.length
- localStorage.setItem("ascii.palette", palette_index)
- palette_fn = palette_list[palette_index]
- palette.forEach(function(lex,x,y){
- lex.bg = palette_fn(x>>1)
- lex.build()
- })
- return
+ palette_index = (palette_index+1) % palette_list.length
+ localStorage.setItem("ascii.palette", palette_index)
+ palette_fn = palette_list[palette_index]
+ palette.repaint()
+ return
}
- brush.fg = lex.bg
+ brush.fg = lex.fg
brush.bg = lex.bg
+ brush.char = lex.char
+ brush.opacity = lex.opacity
if (! brush.modified) {
brush.generate()
}
if (filling || e.ctrlKey) {
- fillColor = lex.bg
+ fillColor = lex.bg
}
})
+ lex.span.addEventListener('contextmenu', function(e){
+ e.preventDefault()
+ fillColor = y ? lex.fg : lex.bg
+ palette.repaint()
+ brush.fg = lex.fg
+ brush.char = lex.char
+ brush.opacity = lex.opacity
+ brush.generate()
+ return
+ })
+
})
}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 08:45:30 +0000