diff options
| -rw-r--r-- | css/sally.css | 28 | ||||
| -rw-r--r-- | index.html | 58 | ||||
| -rw-r--r-- | js/app.js | 12 | ||||
| -rw-r--r-- | js/clipboard.js | 2 | ||||
| -rw-r--r-- | js/draw.js | 44 | ||||
| -rw-r--r-- | js/ui/controls.js | 44 | ||||
| -rw-r--r-- | js/ui/evolver.js | 12 | ||||
| -rw-r--r-- | js/ui/goodies.js | 132 | ||||
| -rw-r--r-- | js/upload.js | 6 | ||||
| -rw-r--r-- | simi.html | 11 |
10 files changed, 302 insertions, 47 deletions
diff --git a/css/sally.css b/css/sally.css index 5640ceb..4c4a576 100644 --- a/css/sally.css +++ b/css/sally.css @@ -42,12 +42,16 @@ a:hover { text-decoration: underline } #gallery_rapper { display: inline } +#ui_rapper .block { + width: 100px; +} .block { padding:4px; } .block:nth-child(n+2) { padding-left: 30px; } +#textarea_mode { padding: 4px; } .tool { cursor: pointer; } @@ -122,7 +126,7 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: .vertical #canvas_rapper div, .vertical #tools_rapper, .vertical #palette_rapper, -.vertical #brush_container { display: inline-block; float: left} +.vertical #brush_container { display: inline-block; float: left; } .vertical #workspace_rapper { width: auto; position: relative; float: left; } .vertical #palette_rapper { margin-right: 10px; } .vertical #tools_block { min-width: 100%; } @@ -160,6 +164,7 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: border: 1px solid; display: inline-block; margin-bottom: 13px; + float: left; } #letters_rapper { display: inline-block; @@ -226,3 +231,24 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: 66% { color: hsl(320,100%,50%) } 100% { color: hsl(360,100%,50%) } } + +.panke #send_to_irc_el { + color: white; + text-decoration: underline; +} +.panke #shader_el, +.panke #load_el, +.panke #gallery_el, +.panke #import_textarea, +.panke #doc_el, +.panke #gallery_el, +.panke #save_button, +.panke #upload_button, +.panke #export_button, +.panke #username_input, +.panke #upload_input, +.panke #grid_el, +.panke #save_el, +.panke #vertical_checkbox, +.panke #add_custom_el, +.panke #format_el { display: none !important; } @@ -2,12 +2,15 @@ <html> <head> <meta charset="UTF-8"> -<title>asdf.us/ascii</title> +<title>asciiblaster</title> <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" /> </head> -<body class="loading"> +<body class="loading panke"> + + <div id="goodies_rapper"> + </div> <div id="workspace_rapper"> <div id="canvas_rapper" class="rapper"></div> @@ -32,12 +35,11 @@ <span id="char_checkbox" class="tool">x char</span><br> <br> <span id="add_custom_el" class="tool">+ add</span> - <div id="nopaint_rapper"> - <br> - <span id="nopaint_no_el" class="tool">no</span><br> - <span id="nopaint_paint_el" class="tool">paint</span><br> - <span id="nopaint_pause_el" class="tool hidden">pause</span><br> - </div> + <span id="mirror_x_checkbox" class="tool">_ mirror x</span><br> + <span id="mirror_y_checkbox" class="tool">_ mirror y</span><br> + <br> + <span id="undo_el" class="tool hidden">undo</span><br> + <span id="redo_el" class="tool hidden">redo</span><br> </div> <div id="tools_rapper" class="block"> <span id="square_el" class="tool">square</span><br> @@ -51,29 +53,37 @@ <span id="scale_el" class="tool">scale</span><br> <span id="translate_el" class="tool">translate</span><br> <span id="slice_el" class="tool">slice</span><br> - <br> - <span id="undo_el" class="tool hidden">undo</span><br> - <span id="redo_el" class="tool hidden">redo</span><br> - <br> - <span id="grid_el" class="tool">_ grid</span><br> + + <span id="grid_el" class="tool">_ grid</span> <!-- <span id="rotate_checkbox" class="tool">_ rotate</span><br> --> - <span id="vertical_checkbox" class="tool">x vertical</span><br> - <span id="pixels_checkbox" class="tool">_ pixels</span><br> - <br> - brush size: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br> - canvas size: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br> + <span id="vertical_checkbox" class="tool">x vertical</span> + <!-- <span id="pixels_checkbox" class="tool">_ pixels</span><br> --> </div> <div id="textarea_mode" style="float: left"> <div> + <span id="clear_el" class="tool">new</span> + <span id="save_el" class="tool">save</span> + <span id="load_el" class="tool">load</span> + <br> <span id="shader_el" class="tool">shader</span> <span id="webcam_el" class="tool">webcam</span> - <span id="load_el" class="tool">load</span> - <span id="save_el" class="tool">save</span> - <span id="clear_el" class="tool">new</span> - <a href="http://asdf.us/ascii/doc/" target="_blank">doc</a> - <a href="http://asdf.us/im/gallery/?tag=ascii&limit=80" target="_blank">gallery</a> + <a id="doc_el" href="/asciiblaster/doc/" target="_blank">doc</a> + <a id="gallery_el" href="//asdf.us/im/gallery/?tag=ascii&limit=80" target="_blank">gallery</a> + <br> + <span id="advanced_checkbox" class="tool">_ advanced</span> <br> + <span id="send_to_irc_el" class="tool">> send to IRC</span> + <br> + <div id="nopaint_rapper"> + <br> + <span id="nopaint_no_el" class="tool">no</span><br> + <span id="nopaint_paint_el" class="tool">paint</span><br> + <span id="nopaint_pause_el" class="tool hidden">pause</span><br> + </div> + <br> + brush: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br> + canvas: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br> </div> <div id="import_rapper"> @@ -99,7 +109,6 @@ <textarea id="shader_textarea"></textarea> </div> </div> - </div> <div id="webcam_rapper" class="transparent"> <span class="close" id="webcam_close">x</span> @@ -142,6 +151,7 @@ <script src="js/ui/brush.js"></script> <script src="js/ui/canvas.js"></script> <script src="js/ui/custom.js"></script> +<script src="js/ui/goodies.js"></script> <script src="js/ui/keys.js"></script> <script src="js/ui/controls.js"></script> <script src="js/ui/palette.js"></script> @@ -6,6 +6,8 @@ var selecting = false var filling = false var changed = false var transforming = false +var mirror_x = false +var mirror_y = false var focused var canvas, tools, palette, controls, brush, mode @@ -80,7 +82,15 @@ function bind () { }) window.onbeforeunload = function() { - if (changed) return "You have edited this drawing." + // if (changed && !in_iframe()) return "You have edited this drawing." + } + + function in_iframe () { + try { + return window.self !== window.top; + } catch (e) { + return true; + } } } diff --git a/js/clipboard.js b/js/clipboard.js index ecb200b..f636af9 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -236,7 +236,7 @@ var clipboard = (function () { var blob = PNG.canvas_to_blob_with_colorcode(canvas_out, canvas.mirc()) var filename = clipboard.filename() var tag = 'ascii' - upload(blob, filename, tag) + upload(blob, filename, tag, canvas.mirc()) } clipboard.export_canvas(upload_fn) } @@ -4,13 +4,32 @@ var draw = (function(){ var last_point = [0,0] function down (e, lex, point) { + var w = canvas.w, h = canvas.h erasing = (e.which == "3" || e.ctrlKey) changed = true if (e.shiftKey) { line (lex, last_point, point, erasing) + if (mirror_x) { + line(lex, [w-last_point[0], last_point[1]], [w-point[0], point[1]], erasing) + } + if (mirror_y) { + line(lex, [last_point[0], h-last_point[1]], [point[0], h-point[1]], erasing) + } + if (mirror_x && mirror_y) { + line(lex, [w-last_point[0], h-last_point[1]], [w-point[0], h-point[1]], erasing) + } } else { stamp (canvas, brush, point[0], point[1], erasing) + if (mirror_x) { + stamp (canvas, brush, w-point[0], point[1], erasing) + } + if (mirror_y) { + stamp (canvas, brush, point[0], h-point[1], erasing) + } + if (mirror_x && mirror_y) { + stamp (canvas, brush, w-point[0], h-point[1], erasing) + } } last_point[0] = point[0] last_point[1] = point[1] @@ -22,7 +41,18 @@ var draw = (function(){ } function move (e, lex, point) { + var w = canvas.w, h = canvas.h line(lex, last_point, point, erasing) + if (mirror_x) { + line(lex, [w-last_point[0], last_point[1]], [w-point[0], point[1]], erasing) + } + if (mirror_y) { + line(lex, [last_point[0], h-last_point[1]], [point[0], h-point[1]], erasing) + } + if (mirror_x && mirror_y) { + line(lex, [w-last_point[0], h-last_point[1]], [w-point[0], h-point[1]], erasing) + } + last_point[0] = point[0] last_point[1] = point[1] } @@ -82,11 +112,17 @@ var draw = (function(){ } else { var last_point_mod = [], point_mod = [] - last_point_mod[0] = mod( last_point[0], w ) - last_point_mod[1] = mod( last_point[1], h ) - point_mod[0] = mod( point[0], w ) - point_mod[1] = mod( point[1], h ) + var x_a = mod( last_point[0], w ) + var y_a = mod( last_point[1], h ) + var x_b = mod( point[0], w ) + var y_b = mod( point[1], h ) line(lex, last_point_mod, point_mod, erasing) + if (mirror_x) { + line(lex, [w-last_point_mod[0], last_point_mod[1]], [w-point_mod[0], point_mod[1]], erasing) + } + if (mirror_y) { + line(lex, [last_point_mod[0], h-last_point_mod[1]], [point_mod[0], h-point_mod[1]], erasing) + } } last_point[0] = point[0] last_point[1] = point[1] diff --git a/js/ui/controls.js b/js/ui/controls.js index 1dd83c7..315395d 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -164,6 +164,13 @@ var controls = (function(){ clipboard.show() clipboard.export_mode() } + controls.send_to_irc = new ClipboardTool (send_to_irc_el) + controls.send_to_irc.use = function(){ + changed && clipboard.upload_png() + clipboard.show() + clipboard.export_mode() + alert('your ascii art is now on display on the IRC channel inside the panke.gallery!') + } controls.load = new ClipboardTool (load_el) controls.load.use = function(){ // console.log("use") @@ -222,6 +229,18 @@ var controls = (function(){ this.update(state) } + controls.advanced = new BlurredCheckbox (advanced_checkbox) + controls.advanced.memorable = true + controls.advanced.use = function(state){ + console.log(state) + state = document.body.classList.contains('panke') + if (state) + document.body.classList.remove('panke') + else + document.body.classList.add('panke') + this.update(state) + } + /* controls.nopaint = new HiddenCheckbox (nopaint_toggle) controls.nopaint.memorable = true @@ -262,14 +281,25 @@ var controls = (function(){ // this.update(canvas.rotated) // } - controls.pixels = new BlurredCheckbox (pixels_checkbox) - controls.pixels.memorable = true - controls.pixels.use = function(state){ - canvas.pixels = typeof state == "boolean" ? state : ! canvas.pixels - document.body.classList.toggle("pixels", canvas.pixels) - this.update(canvas.pixels) - } + // controls.pixels = new BlurredCheckbox (pixels_checkbox) + // controls.pixels.memorable = true + // controls.pixels.use = function(state){ + // canvas.pixels = typeof state == "boolean" ? state : ! canvas.pixels + // document.body.classList.toggle("pixels", canvas.pixels) + // this.update(canvas.pixels) + // } + controls.mirror_x = new BlurredCheckbox (mirror_x_checkbox) + controls.mirror_x.use = function(state){ + window.mirror_x = typeof state == "boolean" ? state : ! window.mirror_x + this.update(window.mirror_x) + } + controls.mirror_y = new BlurredCheckbox (mirror_y_checkbox) + controls.mirror_y.use = function(state){ + window.mirror_y = typeof state == "boolean" ? state : ! window.mirror_y + this.update(window.mirror_y) + } + // controls.vertical = new BlurredCheckbox (vertical_checkbox) diff --git a/js/ui/evolver.js b/js/ui/evolver.js index 4d90893..0e4df77 100644 --- a/js/ui/evolver.js +++ b/js/ui/evolver.js @@ -4,10 +4,10 @@ var evolver = (function(){ var opt = { src: "img/test/quad.gif", - w: 30, + w: 50, h: 0, - population: 10, - strokes: 1, + population: 4, + strokes: 2, randomize: false, mode: 'all', } @@ -164,11 +164,11 @@ var evolver = (function(){ var max_score = clones[0].score -// console.log(clones.filter(function(c,i){ return i < 10 }).map(function(c){ return c.score.toFixed(2) }).join(" ")) + // console.log(clones.filter(function(c,i){ return i < 10 }).map(function(c){ return c.score.toFixed(2) }).join(" ")) if (max_score < last_score) { // console.log("no improvement [%s] [%s]", max_score.toFixed(3), last_score.toFixed(3)) - clones_to_keep = 3 + clones_to_keep = 1 best_clone = main_canvas next_best_clone = clones[0].canvas third_best_clone = clones[1].canvas @@ -176,7 +176,7 @@ var evolver = (function(){ else { last_score = max_score - clones_to_keep = 3 + clones_to_keep = 2 best_clone = clones[0].canvas next_best_clone = clones[1].canvas third_best_clone = clones[2].canvas diff --git a/js/ui/goodies.js b/js/ui/goodies.js new file mode 100644 index 0000000..67f245c --- /dev/null +++ b/js/ui/goodies.js @@ -0,0 +1,132 @@ +var goodies = (function(){ + var goodies = {} + + goodies.build = () => { + Object.keys(goodies.list).map(() => { + goodies_rapper.appendChild(tool_canvas.el) + }) + } + + goodies.list = {} + + goodies.list.choppy = { + mode: 'brush', + fn: `var char = choice(" abcdef ") + lex.bg = +choice("0124") + lex.fg = +choice("01234") + lex.char = char + lex.opacity = char == " " ? 0 : 1`, + } + + goodies.list.foggy = { + mode: 'brush', + fn: `var char = choice(" abcdef ") + lex.bg = choice([14,15]) + lex.fg = choice("367") + lex.char = char + lex.opacity = char == " " ? 0 : 1`, + } + // goodies.list.name = { + // fn: ``, + // } + // goodies.list.name = { + // fn: ``, + // } + // goodies.list.name = { + // fn: ``, + // } + // goodies.list.name = { + // fn: ``, + // } + +// >> mirror brush (up-down) + +// NOTE: Animate this on the canvas, then draw: + +// if (x > h/2) { +// lex.assign( canvas.aa[h-y][x] ) +// } + + + +// >> rainbow stardust brush + +// Uncheck BG and animate this to brush: + +// lex.fg = hue(t) +// lex.char = choice(" ,'.,.','****** ") + + + +// >> noise brushes, works on a black background: + +// lex.bg = max(5, yellow(randint(t))) +// lex.opacity = lex.bg == colors.black ? 0 : 1 + + + +// >> simple rainbow: + +// if (lex.bg != 1) lex.bg = randint(t) +// lex.opacity = lex.bg == colors.black ? 0 : 1 + + + +// >> self-erasing: + +// if (lex.bg != 1) lex.bg = yellow(randint(t)) +// lex.opacity = lex.bg == colors.black ? 0 : 1 + + + +// >> cycling rainbow brush + +// if (lex.bg != 1) lex.bg = hue( all_color_hue_order.indexOf( color_names[ lex.bg ] ) + 1 ) +// lex.opacity = lex.bg == colors.black ? 0 : 1 + + + +// >> "stars" brush.. set your brush to paint just the character "#" + +// if (lex.char == "#") { +// lex.fg = hue(randint(15)) +// lex.char = random() > 0.1 ? " " : "+@*.,\"+'*-"[randint(10)] +// } + + + +// >> use fg char to mask mask what you're drawing on the bg + +// if (lex.char != "/") { lex.bg = 1 } + + + +// >> sharded glitch brush + +// Example: http://asdf.us/z/kksnvs.png + +// Use on a brush: + +// lex.bg = t/y/x +// lex.opacity = lex.bg % 1 ? 0 : 1 + + + +// >> incremental brush + +// Set your brush to be the ^ character, square, about 10x10 +// Draw "char" only +// Then animate this shader on the canvas: + +// if (lex.char=="^") { +// lex.bg += 1 +// lex.char = " " +// } +// lex.bg += 1 + + + + + + return goodies +})
\ No newline at end of file diff --git a/js/upload.js b/js/upload.js index c1ef7f7..c50f285 100644 --- a/js/upload.js +++ b/js/upload.js @@ -3,7 +3,7 @@ var upload = (function(){ var button = document.getElementById("upload_button") var uploading = false - function upload(blob, filename, tag){ + function upload(blob, filename, tag, ascii){ if (uploading) return filename = filename || get_filename() tag = tag || "shader" @@ -15,6 +15,7 @@ var upload = (function(){ uploadImage({ blob: blob, + ascii: ascii, filename: filename, username: user.username, tag: tag, @@ -55,6 +56,9 @@ var upload = (function(){ form.append("filename", opt.filename); form.append("qqfile", opt.blob); form.append("tag", opt.tag); + if (opt.ascii) { + form.append("ascii", opt.ascii); + } var req = new XMLHttpRequest(); req.open("POST", "/cgi-bin/im/shader/upload"); @@ -48,17 +48,23 @@ <span id="fill_el" class="tool">fill</span><br> <span id="select_el" class="tool">select</span><br> <br> + <span id="rotate_el" class="tool">rotate</span><br> + <span id="scale_el" class="tool">scale</span><br> + <span id="translate_el" class="tool">translate</span><br> + <span id="slice_el" class="tool">slice</span><br> + <br> <span id="undo_el" class="tool hidden">undo</span><br> <span id="redo_el" class="tool hidden">redo</span><br> <br> <span id="grid_el" class="tool">_ grid</span><br> - <span id="rotate_checkbox" class="tool">_ rotate</span><br> - <span id="vertical_checkbox" class="tool">_ vertical</span><br> + <!-- <span id="rotate_checkbox" class="tool">_ rotate</span><br> --> + <span id="vertical_checkbox" class="tool">x vertical</span><br> <span id="pixels_checkbox" class="tool">_ pixels</span><br> <br> brush size: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br> canvas size: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br> </div> + <div id="textarea_mode" style="float: left"> <div> @@ -125,6 +131,7 @@ <script src="js/png.js"></script> <script src="js/unicode.js"></script> <script src="js/color.js"></script> +<script src="js/dither.js"></script> <script src="js/undo.js"></script> <script src="js/clipboard.js"></script> <script src="js/upload.js"></script> |