From 13d700004227922fb99bbef3587ff1b546741ec0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 10 May 2016 21:47:27 -0400 Subject: moving nopaint stuff into main codebase --- js/nopaint/index.js | 353 -------------------------------------------------- js/tool.js | 15 ++- js/ui/controls.js | 11 +- js/ui/nopaint.js | 363 ++++++++++++++++++++++++++++++++++++++++++++++++++++ js/ui/palette.js | 4 +- 5 files changed, 383 insertions(+), 363 deletions(-) delete mode 100644 js/nopaint/index.js create mode 100644 js/ui/nopaint.js (limited to 'js') diff --git a/js/nopaint/index.js b/js/nopaint/index.js deleted file mode 100644 index 859c4cf..0000000 --- a/js/nopaint/index.js +++ /dev/null @@ -1,353 +0,0 @@ -var nopaint = (function(){ - - var is_paint = false - - controls.nopaint = {} - - controls.no = new Tool (nopaint_no_el) - controls.no.use = function(state){ - undo.undo() - controls.paint.focus() - } - - controls.paint = new Tool (nopaint_paint_el) - controls.paint.use = function(state){ - nopaint.play() - } - - controls.nopaint_pause = new Tool (nopaint_pause_el) - controls.nopaint_pause.use = function(state){ - nopaint.pause() - } - - // use own stepwise clock to drive tweens - oktween.raf = function(){} - - var nopaint = {} - nopaint.delay = 100 - nopaint.tool = null - nopaint.tools = {} - nopaint.keys = [] - nopaint.weights = [] - nopaint.step = 0 - nopaint.time = 0 - nopaint.timeout = false - nopaint.undo = function(){ - undo.undo() - } - nopaint.pause = function(){ - clearTimeout(nopaint.timeout) - nopaint.timeout = 0 - nopaint.step = 0 - } - nopaint.play = function(){ - nopaint.pause() - nopaint.switch_tool() - nopaint.go() - } - nopaint.go = function(){ - nopaint.timeout = setTimeout(nopaint.go, nopaint.delay) - oktween.update(nopaint.time) - nopaint.tool.paint( nopaint.step ) - nopaint.time += 1 - nopaint.step += 1 - } - nopaint.switch_tool = function(){ - undo.new() - last_tool = nopaint.tool - last_tool && last_tool.finish() - nopaint.tool = nopaint.get_random_tool() - nopaint.tool.start( last_tool ) - console.log(nopaint.tool.type) - } - nopaint.add_tool = function(fn){ - nopaint.tools[fn.type] = fn - } - nopaint.get_random_tool = function(){ - var n = rand( nopaint.sum ) - for (var i = 0, _len = nopaint.weights.length; i < _len; i++) { - if (n < nopaint.weights[i]) { - return nopaint.tools[ nopaint.keys[i] ] - } - } - return nopaint.tools[ choice(nopaint.keys) ] - } - nopaint.regenerate_weights = function(){ - nopaint.sum = 0 - nopaint.weights = [] - nopaint.keys = Object.keys( nopaint.tools ).sort(function(a,b){ return b-a }) - nopaint.keys.forEach(function(key){ - nopaint.sum += nopaint.tools[key].opt.weight - nopaint.weights.push( nopaint.sum ) - }) - } - - var NopaintTool = Model({ - type: "none", - init: function(opt){ - this.opt = opt || {} - }, - start: function(){}, - paint: function(t){}, - update: function(t){}, - finish: function(){}, - }) - - var NopaintBrush = NopaintTool.extend({ - type: "brush", - is_brush: true, - init: function(opt){ - this.opt = opt || {} - this.opt.max_radius = this.opt.max_radius || 10 - this.p = {x: randint(canvas.w), y: randint(canvas.h)} - this.fg = 0 - this.bg = 1 - this.char = " " - this.tweens = [] - }, - - start: function(last_brush){ - this.reset( last_brush ) - this.regenerate() - draw.down({}, null, [this.p.x, this.p.y]) - }, - - paint: function(t){ - this.update(t) - draw.move_toroidal({}, null, [this.p.x, this.p.y]) - }, - - finish: function(){ - this.tweens.forEach(function(t){ t.cancel() }) - this.tweens = [] - }, - - reorient: function(last_brush){ - var a = {}, b - - if (last_brush) { - this.p.x = a.x = randint(canvas.w) - this.p.y = a.y = randint(canvas.h) - } - else { - a.x = this.p.x - a.y = this.p.y - } - - b = this.get_next_point() - - var tween = oktween.add({ - obj: this.p, - from: a, - to: b, - duration: b.duration, - easing: b.easing, - update: b.update, - finished: function(){ - this.iterate() - this.regenerate() - }.bind(this) - }) - this.tweens.push(tween) - }, - - get_next_point: function(){ - var radius = randrange(2, this.opt.max_radius) - var b = {} - b.duration = randrange(1, 7) - b.easing = choice(easings) - b.x = this.p.x + randrange(-radius, radius) - b.y = this.p.y + randrange(-radius, radius) - return b - }, - - iterate: function( last_brush ){ - this.reorient( last_brush ) - }, - - regenerate: function(){ - brush.load( this ) - brush.generate() - }, - }) - - 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 - }, - }) - - var SolidBrush = NopaintBrush.extend({ - type: "solid", - - recolor: function(){ - this.fg = this.bg = randint(16) - this.char = " " - }, - - resize: function(m,n){ - m = m || 3 - n = n || 0 - var bw = xrandrange(5, 0, m) + n - brush.resize( round(bw * randrange(0.9, 1.8)) || 1, round(bw) || 1 ) - }, - - reset: function( last_brush ){ - this.opt.max_radius = randrange(5,20) - this.resize() - this.reorient( last_brush ) - this.recolor( last_brush ) - this.regenerate() - }, - - iterate: function( last_brush ){ - this.resize() - this.reorient( last_brush ) - }, - }) - - var EraseBrush = SolidBrush.extend({ - type: "random", - iterate: function( last_brush ){ - this.bg = 0 - this.char = " " - this.random() - }, - }) - - var RandomBrush = SolidBrush.extend({ - type: "random", - iterate: function( last_brush ){ - this.reorient( last_brush ) - this.recolor( last_brush ) - }, - }) - - var HueBrush = SolidBrush.extend({ - type: "hue", - recolor: function(){ - this.fg = this.bg = rand_hue() - this.char = " " - }, - }) - - var LetterBrush = SolidBrush.extend({ - type: "letter", - chars: unicode.block('Basic Latin', 32), - recolor: function(){ - this.fg = rand_hue() - this.bg = rand_hue() - this.char = choice(this.chars) - }, - }) - - var RandomLetterBrush = LetterBrush.extend({ - type: "random-letter", - iterate: function(){ - if (Math.random() < 0.01) { - this.fg += 1 - } - if (Math.random() < 0.05) { - var n = this.fg - this.fg = this.bg - this.bg = n - } - if (Math.random() < 0.7) { - this.char = choice(this.chars) - } - this.regenerate() - this.__iterate() - }, - update: function(){ - if (Math.random() < 0.3) { - this.char = choice(this.chars) - } - this.regenerate() - }, - }) - - var CloneBrush = SolidBrush.extend({ - type: "clone", - reset: function( last_brush ){ - this.opt.max_radius = randrange(5,20) - this.reorient( last_brush ) - this.__resize(3,2) - this.clone_region() - }, - - clone_region: function(){ - var x = randrange(0, canvas.w - brush.w) - var y = randrange(0, canvas.h - brush.h) - blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) - brush.mask(brush) - }, - - regenerate: function(){}, - resize: function(){}, - }) - - var StarsTool = NopaintBrush.extend({ - type: "stars", - chars: "...,,''''*", - - start: function(last_brush){ - this.reorient( last_brush ) - }, - - paint: function(t){ - if (Math.random() < 0.5) { - var lex = canvas.get(this.p.x, this.p.y) - lex.fg = rand_hue() - lex.bg = colors.black - lex.char = choice(this.chars) - lex.build() - } - }, - }) - - 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 CloneBrush({ weight: 8 }) ) - nopaint.add_tool( new FillTool({ weight: 6 }) ) - nopaint.add_tool( new FillLetterTool({ weight: 6 }) ) - nopaint.add_tool( new StarsTool({ weight: 6 }) ) - nopaint.regenerate_weights() - - return nopaint -})() diff --git a/js/tool.js b/js/tool.js index e75bf8d..0ad23b9 100644 --- a/js/tool.js +++ b/js/tool.js @@ -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/ui/nopaint.js b/js/ui/nopaint.js new file mode 100644 index 0000000..d6b0004 --- /dev/null +++ b/js/ui/nopaint.js @@ -0,0 +1,363 @@ +var nopaint = (function(){ + + var is_paint = false + + controls.no = new Tool (nopaint_no_el) + controls.no.use = function(state){ + undo.undo() + controls.paint.focus() + } + + controls.paint = new Tool (nopaint_paint_el) + controls.paint.use = function(state){ + nopaint.play() + } + + controls.nopaint_pause = new Tool (nopaint_pause_el) + controls.nopaint_pause.use = function(state){ + nopaint.pause() + } + + // use own stepwise clock to drive tweens + oktween.raf = function(){} + + var nopaint = {} + nopaint.delay = 100 + nopaint.tool = null + nopaint.tools = {} + nopaint.keys = [] + nopaint.weights = [] + 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() + } + nopaint.pause = function(){ + clearTimeout(nopaint.timeout) + nopaint.timeout = 0 + nopaint.step = 0 + } + nopaint.play = function(){ + nopaint.pause() + nopaint.switch_tool() + nopaint.go() + } + nopaint.go = function(){ + nopaint.timeout = setTimeout(nopaint.go, nopaint.delay) + oktween.update(nopaint.time) + nopaint.tool.paint( nopaint.step ) + nopaint.time += 1 + nopaint.step += 1 + } + nopaint.switch_tool = function(){ + undo.new() + last_tool = nopaint.tool + last_tool && last_tool.finish() + nopaint.tool = nopaint.get_random_tool() + nopaint.tool.start( last_tool ) + console.log(nopaint.tool.type) + } + nopaint.add_tool = function(fn){ + nopaint.tools[fn.type] = fn + } + nopaint.get_random_tool = function(){ + var n = rand( nopaint.sum ) + for (var i = 0, _len = nopaint.weights.length; i < _len; i++) { + if (n < nopaint.weights[i]) { + return nopaint.tools[ nopaint.keys[i] ] + } + } + return nopaint.tools[ choice(nopaint.keys) ] + } + nopaint.regenerate_weights = function(){ + nopaint.sum = 0 + nopaint.weights = [] + nopaint.keys = Object.keys( nopaint.tools ).sort(function(a,b){ return b-a }) + nopaint.keys.forEach(function(key){ + nopaint.sum += nopaint.tools[key].opt.weight + nopaint.weights.push( nopaint.sum ) + }) + } + + /* Base models for brushes */ + + var NopaintTool = Model({ + type: "none", + init: function(opt){ + this.opt = opt || {} + }, + start: function(){}, + paint: function(t){}, + update: function(t){}, + finish: function(){}, + }) + + var NopaintBrush = NopaintTool.extend({ + type: "brush", + is_brush: true, + init: function(opt){ + this.opt = opt || {} + this.opt.max_radius = this.opt.max_radius || 10 + this.p = {x: randint(canvas.w), y: randint(canvas.h)} + this.fg = 0 + this.bg = 1 + this.char = " " + this.tweens = [] + }, + + start: function(last_brush){ + this.reset( last_brush ) + this.regenerate() + draw.down({}, null, [this.p.x, this.p.y]) + }, + + paint: function(t){ + this.update(t) + draw.move_toroidal({}, null, [this.p.x, this.p.y]) + }, + + finish: function(){ + this.tweens.forEach(function(t){ t.cancel() }) + this.tweens = [] + }, + + reorient: function(last_brush){ + var a = {}, b + + if (last_brush) { + this.p.x = a.x = randint(canvas.w) + this.p.y = a.y = randint(canvas.h) + } + else { + a.x = this.p.x + a.y = this.p.y + } + + b = this.get_next_point() + + var tween = oktween.add({ + obj: this.p, + from: a, + to: b, + duration: b.duration, + easing: b.easing, + update: b.update, + finished: function(){ + this.iterate() + this.regenerate() + }.bind(this) + }) + this.tweens.push(tween) + }, + + get_next_point: function(){ + var radius = randrange(2, this.opt.max_radius) + var b = {} + b.duration = randrange(1, 7) + b.easing = choice(easings) + b.x = this.p.x + randrange(-radius, radius) + b.y = this.p.y + randrange(-radius, radius) + return b + }, + + iterate: function( last_brush ){ + this.reorient( last_brush ) + }, + + regenerate: function(){ + brush.load( this ) + brush.generate() + }, + }) + + var easings = "linear circ_out circ_in circ_in_out quad_in quad_out quad_in_out".split(" ") + + /* Standard brushes */ + + var SolidBrush = NopaintBrush.extend({ + type: "solid", + + recolor: function(){ + this.fg = this.bg = randint(16) + this.char = " " + }, + + resize: function(m,n){ + m = m || 3 + n = n || 0 + var bw = xrandrange(5, 0, m) + n + brush.resize( round(bw * randrange(0.9, 1.8)) || 1, round(bw) || 1 ) + }, + + reset: function( last_brush ){ + this.opt.max_radius = randrange(5,20) + this.resize() + this.reorient( last_brush ) + this.recolor( last_brush ) + this.regenerate() + }, + + iterate: function( last_brush ){ + this.resize() + this.reorient( last_brush ) + }, + }) + + var EraseBrush = SolidBrush.extend({ + type: "random", + iterate: function( last_brush ){ + this.bg = 0 + this.char = " " + this.random() + }, + }) + + var RandomBrush = SolidBrush.extend({ + type: "random", + iterate: function( last_brush ){ + this.reorient( last_brush ) + this.recolor( last_brush ) + }, + }) + + var HueBrush = SolidBrush.extend({ + type: "hue", + recolor: function(){ + this.fg = this.bg = rand_hue() + this.char = " " + }, + }) + + var LetterBrush = SolidBrush.extend({ + type: "letter", + chars: unicode.block('Basic Latin', 32), + recolor: function(){ + this.fg = rand_hue() + this.bg = rand_hue() + this.char = choice(this.chars) + }, + }) + + var RandomLetterBrush = LetterBrush.extend({ + type: "random-letter", + iterate: function(){ + if (Math.random() < 0.01) { + this.fg += 1 + } + if (Math.random() < 0.05) { + var n = this.fg + this.fg = this.bg + this.bg = n + } + if (Math.random() < 0.7) { + this.char = choice(this.chars) + } + this.regenerate() + this.__iterate() + }, + update: function(){ + if (Math.random() < 0.3) { + this.char = choice(this.chars) + } + this.regenerate() + }, + }) + + var CloneBrush = SolidBrush.extend({ + type: "clone", + reset: function( last_brush ){ + this.opt.max_radius = randrange(5,20) + this.reorient( last_brush ) + this.__resize(4,2) + this.clone_region() + }, + + clone_region: function(){ + var x = randrange(0, canvas.w - brush.w) + var y = randrange(0, canvas.h - brush.h) + blit.copy_from(canvas, brush, floor(x-brush.w/2), floor(y-brush.h/2)) + brush.mask(brush) + }, + + regenerate: function(){}, + resize: function(){}, + }) + + var StarsTool = NopaintBrush.extend({ + type: "stars", + chars: "....,,'''*", + + start: function(last_brush){ + this.reorient( last_brush ) + }, + + paint: function(t){ + if (Math.random() < 0.5) { + var lex = canvas.get(this.p.x, this.p.y) + lex.fg = rand_hue() + lex.bg = colors.black + lex.char = choice(this.chars) + lex.build() + } + }, + }) + + /* 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: 14 }) ) + nopaint.add_tool( new CloneBrush({ weight: 8 }) ) + nopaint.add_tool( new FillTool({ weight: 4 }) ) + nopaint.add_tool( new FillLetterTool({ weight: 6 }) ) + nopaint.add_tool( new StarsTool({ weight: 6 }) ) + nopaint.regenerate_weights() + + return nopaint +})() 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 -- cgit v1.2.3-70-g09d2