diff options
| -rw-r--r-- | .eslintrc.js | 24 | ||||
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | js/app.js | 2 | ||||
| -rw-r--r-- | js/draw.js | 44 | ||||
| -rw-r--r-- | js/ui/controls.js | 11 | ||||
| -rw-r--r-- | js/ui/evolver.js | 12 | ||||
| -rw-r--r-- | js/ui/goodies.js | 132 | ||||
| -rw-r--r-- | simi.html | 11 |
8 files changed, 230 insertions, 12 deletions
diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..6262313 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,24 @@ +module.exports = { + "env": { + "browser": true + }, + "extends": "eslint:recommended", + "rules": { + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "double" + ], + "semi": [ + "error", + "never" + ] + } +}; @@ -9,6 +9,9 @@ <body class="loading"> + <div id="goodies_rapper"> + </div> + <div id="workspace_rapper"> <div id="canvas_rapper" class="rapper"></div> </div> @@ -38,6 +41,8 @@ <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> </div> <div id="tools_rapper" class="block"> <span id="square_el" class="tool">square</span><br> @@ -142,6 +147,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 @@ -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..8ffdc64 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -270,6 +270,17 @@ var controls = (function(){ 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 @@ -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> |