diff options
| -rw-r--r-- | css/sally.css | 10 | ||||
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | js/tool.js | 15 | ||||
| -rw-r--r-- | js/ui/controls.js | 11 | ||||
| -rw-r--r-- | js/ui/nopaint.js (renamed from js/nopaint/index.js) | 92 | ||||
| -rw-r--r-- | js/ui/palette.js | 4 | ||||
| -rw-r--r-- | nopaint.html | 137 |
7 files changed, 92 insertions, 190 deletions
diff --git a/css/sally.css b/css/sally.css index f4cc884..00fdb4a 100644 --- a/css/sally.css +++ b/css/sally.css @@ -118,7 +118,15 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: .vertical #palette_rapper { margin-right: 10px; } .vertical #tools_block { min-width: 100%; } -#experimental_palette_toggle { float: left; clear: right; } +#secret_rapper { float: left; clear: right; } +#secret_rapper span { float: left; } +.vertical #secret_rapper { margin-right: 10px; } +.vertical #secret_rapper span { float: left; clear: both; } +.nopaint #brush_rapper { min-height: 50px; min-width: 50px; } + +#nopaint_rapper.hidden { + display: none; +} .rotated #canvas_rapper { transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg); @@ -12,7 +12,10 @@ <div id="ui_rapper"> <div class="block" id="tools_block"> <div id="palette_rapper"></div> - <span id="experimental_palette_toggle">.</span> + <div id="secret_rapper"> + <span id="experimental_palette_toggle">.</span> + <span id="nopaint_toggle">.</span> + </div> <div id="letters_rapper"></div> <div id="custom_rapper"></div> </div> @@ -25,6 +28,12 @@ <span id="char_checkbox" class="tool">x char</span><br> <br> <span id="add_custom_el" class="tool">+ add</span> + <div id="nopaint_rapper" class="hidden"> + <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">pause</span><br> + </div> </div> <div id="tools_rapper" class="block"> <span id="square_el" class="tool">square</span><br> @@ -101,6 +110,7 @@ <script src="js/vendor/text-encoder-lite.js"></script> <script src="js/vendor/dataUriToBlob.js"></script> <script src="js/vendor/FileSaver.js"></script> +<script src="js/vendor/oktween.js"></script> <script src="js/util.js"></script> <script src="js/png.js"></script> @@ -126,6 +136,7 @@ <script src="js/ui/palette.js"></script> <script src="js/ui/letters.js"></script> <script src="js/ui/selection.js"></script> +<script src="js/ui/nopaint.js"></script> <script src="js/app.js"></script> @@ -114,14 +114,11 @@ var RadioGroup = Tool.extend({ } }) - - - var Checkbox = Tool.extend({ init: function (el){ this.__init(el) var name = this.name.replace(/^[x_] /,"") - var state = localStorage.getItem("ascii." + name) || this.name[0] == "x" + var state = localStorage.getItem("ascii.tools." + name) == "true" || this.name[0] == "x" this.name = name this.update(state) }, @@ -153,14 +150,18 @@ var BlurredTool = Tool.extend({ }) var HiddenCheckbox = BlurredCheckbox.extend({ + on: "o", + off: ".", init: function (el){ this.el = el this.lex = new Lex (el) - this.name = el.innerHTML - var state = this.name[0] == "o" + this.name = this.el.id + var state = localStorage.getItem("ascii.tools." + name) == "true" || this.el.innerHTML[0] == this.on this.update(state) }, update: function(state){ - this.el.innerHTML = state ? "o" : "." + this.el.innerHTML = state ? this.on : this.off + if (this.memorable) { localStorage.setItem("ascii.tools." + this.name, !! state) } + console.trace() } }) diff --git a/js/ui/controls.js b/js/ui/controls.js index 9139989..00cb14c 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -176,8 +176,17 @@ var controls = (function(){ cs.selection.use = function(){ shader.canvas = selection.canvas } controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle) + controls.experimental_palette.memorable = true controls.experimental_palette.use = function(state){ - var state = palette.experimental() + var state = palette.experimental(state) + this.update(state) + } + + controls.nopaint = new HiddenCheckbox (nopaint_toggle) + controls.nopaint.memorable = true + controls.nopaint.on = "N" + controls.nopaint.use = function(state){ + var state = nopaint.toggle(state) this.update(state) } diff --git a/js/nopaint/index.js b/js/ui/nopaint.js index 859c4cf..d6b0004 100644 --- a/js/nopaint/index.js +++ b/js/ui/nopaint.js @@ -2,8 +2,6 @@ var nopaint = (function(){ var is_paint = false - controls.nopaint = {} - controls.no = new Tool (nopaint_no_el) controls.no.use = function(state){ undo.undo() @@ -32,6 +30,12 @@ var nopaint = (function(){ nopaint.step = 0 nopaint.time = 0 nopaint.timeout = false + nopaint.toggle = function(state){ + var state = typeof state == "boolean" ? state : nopaint_rapper.classList.contains("hidden") + nopaint_rapper.classList.toggle("hidden", ! state) + document.body.classList.toggle("nopaint", state) + return state + } nopaint.undo = function(){ undo.undo() } @@ -82,6 +86,8 @@ var nopaint = (function(){ }) } + /* Base models for brushes */ + var NopaintTool = Model({ type: "none", init: function(opt){ @@ -173,41 +179,7 @@ var nopaint = (function(){ var easings = "linear circ_out circ_in circ_in_out quad_in quad_out quad_in_out".split(" ") - var FillTool = NopaintTool.extend({ - type: "fill", - rate: 25, - start: function(){ - this.fill() - }, - paint: function(t){ - if ((t % this.rate) == this.rate-1) { - this.fill() - } - }, - recolor: function(){ - this.fg = this.bg = randint(16) - this.char = " " - this.opacity = 1 - }, - fill: function(){ - var x = randint(canvas.w) - var y = randint(canvas.h) - this.recolor() - draw.fill(this, x, y) - } - }) - - var FillLetterTool = FillTool.extend({ - type: "fill-letter", - rate: 25, - chars: unicode.block('Basic Latin', 32), - recolor: function(){ - this.fg = randint(16) - this.bg = randint(16) - this.char = choice(this.chars) - this.opacity = 1 - }, - }) + /* Standard brushes */ var SolidBrush = NopaintBrush.extend({ type: "solid", @@ -303,7 +275,7 @@ var nopaint = (function(){ reset: function( last_brush ){ this.opt.max_radius = randrange(5,20) this.reorient( last_brush ) - this.__resize(3,2) + this.__resize(4,2) this.clone_region() }, @@ -320,7 +292,7 @@ var nopaint = (function(){ var StarsTool = NopaintBrush.extend({ type: "stars", - chars: "...,,''''*", + chars: "....,,'''*", start: function(last_brush){ this.reorient( last_brush ) @@ -337,14 +309,52 @@ var nopaint = (function(){ }, }) + /* Fill tool */ + + var FillTool = NopaintTool.extend({ + type: "fill", + rate: 25, + start: function(){ + this.fill() + }, + paint: function(t){ + if ((t % this.rate) == this.rate-1) { + this.fill() + } + }, + recolor: function(){ + this.fg = this.bg = randint(16) + this.char = " " + this.opacity = 1 + }, + fill: function(){ + var x = randint(canvas.w) + var y = randint(canvas.h) + this.recolor() + draw.fill(this, x, y) + } + }) + + var FillLetterTool = FillTool.extend({ + type: "fill-letter", + rate: 25, + chars: unicode.block('Basic Latin', 32), + recolor: function(){ + this.fg = randint(16) + this.bg = randint(16) + this.char = choice(this.chars) + this.opacity = 1 + }, + }) + nopaint.add_tool( new SolidBrush({ weight: 3 }) ) nopaint.add_tool( new EraseBrush({ weight: 5 }) ) nopaint.add_tool( new RandomBrush({ weight: 4 }) ) nopaint.add_tool( new HueBrush({ weight: 6 }) ) nopaint.add_tool( new LetterBrush({ weight: 4 }) ) - nopaint.add_tool( new RandomLetterBrush({ weight: 11 }) ) + nopaint.add_tool( new RandomLetterBrush({ weight: 14 }) ) nopaint.add_tool( new CloneBrush({ weight: 8 }) ) - nopaint.add_tool( new FillTool({ weight: 6 }) ) + nopaint.add_tool( new FillTool({ weight: 4 }) ) nopaint.add_tool( new FillLetterTool({ weight: 6 }) ) nopaint.add_tool( new StarsTool({ weight: 6 }) ) nopaint.regenerate_weights() diff --git a/js/ui/palette.js b/js/ui/palette.js index 3b5cb24..5931543 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -37,8 +37,8 @@ var palette = (function(){ } palette.repaint() var use_experimental_palette = false - palette.experimental = function(){ - use_experimental_palette = ! use_experimental_palette + palette.experimental = function(state){ + use_experimental_palette = typeof state == "boolean" ? state : ! use_experimental_palette use_experimental_palette ? palette.resize(32, 5) : palette.resize(32, 2) palette.repaint() return use_experimental_palette diff --git a/nopaint.html b/nopaint.html deleted file mode 100644 index 6ce29d2..0000000 --- a/nopaint.html +++ /dev/null @@ -1,137 +0,0 @@ -<!-- http://jollo.org/licensing/public/LNT-1.txt --> -<meta charset="UTF-8"> -<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" /> - -<body class="loading"> - - <div id="workspace_rapper"> - <div id="canvas_rapper" class="rapper"></div> - </div> - - <div id="ui_rapper"> - <div class="block" id="tools_block"> - <div id="palette_rapper"></div> - <span id="experimental_palette_toggle">.</span> - <div id="letters_rapper"></div> - <div id="custom_rapper"></div> - </div> - <div id="brush_container" class="block"> - <div id="brush_rapper"> - </div> - <br> - <span id="fg_checkbox" class="tool">x fg</span><br> - <span id="bg_checkbox" class="tool">x bg</span><br> - <span id="char_checkbox" class="tool">x char</span><br> - <br> - <span id="add_custom_el" class="tool">+ add</span> - </div> - <div id="tools_rapper" class="block"> - <span id="square_el" class="tool">square</span><br> - <span id="circle_el" class="tool">circle</span><br> - <span id="cross_el" class="tool">cross</span><br> - <span id="text_el" class="tool">text</span><br> - <span id="fill_el" class="tool">fill</span><br> - <span id="select_el" class="tool">select</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="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">pause</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> - <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> - <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" target="_blank">gallery</a> - <br> - </div> - - <div id="import_rapper"> - <span id="format_el">ascii *irssi mirc</span> - <span id="import_buttons"> - <button id="import_button">import</button> - </span> - <div id="gallery_rapper"> - <input id="username_input" type="text" placeholder="username"> - <input id="upload_input" type="text" placeholder="uploaded url"> - <button id="export_button">export</button> - <button id="save_button">save</button> - <button id="upload_button">upload</button> - </div><br> - <div id="cutoff_warning_el">colorcode is too wide for irc and is cutoff</div> - <textarea id="import_textarea"></textarea> - </div> - - <div id="shader_rapper"> - <span id="animate_checkbox" class="tool">_ animate</span> - to <span id="shader_target_el">*canvas brush selection</span> - <span id="shader_fps_el" class="hidden faded"></span><br> - <textarea id="shader_textarea"></textarea> - </div> - </div> - - </div> - <div id="webcam_rapper" class="transparent"> - <span class="close" id="webcam_close">x</span> - <iframe id="webcam_iframe"></iframe> - </div> - - <input type="text" id="cursor_input"> - -</body> -<script type="text/javascript-shader" id="demo_shader"> - lex.bg = hue((x+y*y+t/10)/20) - lex.fg = colors.white - lex.char = " " - // lex.opacity = 1 -</script> -<script src="js/vendor/colorcode.js"></script> -<script src="js/vendor/text-encoder-lite.js"></script> -<script src="js/vendor/dataUriToBlob.js"></script> -<script src="js/vendor/FileSaver.js"></script> -<script src="js/vendor/oktween.js"></script> - -<script src="js/util.js"></script> -<script src="js/png.js"></script> -<script src="js/unicode.js"></script> -<script src="js/color.js"></script> -<script src="js/undo.js"></script> -<script src="js/clipboard.js"></script> -<script src="js/upload.js"></script> -<script src="js/user.js"></script> - -<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> - -<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/keys.js"></script> -<script src="js/ui/controls.js"></script> -<script src="js/ui/palette.js"></script> -<script src="js/ui/letters.js"></script> -<script src="js/ui/selection.js"></script> - -<script src="js/nopaint/index.js"></script> - -<script src="js/app.js"></script> - |