From 5907322e23673884ceb48d2a07f930337bdf18db Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 22 Nov 2014 18:32:08 -0500 Subject: stroking brush --- js/app.js | 2 +- js/draw.js | 15 +++++++++++++-- js/lex.js | 4 ++-- js/ui/canvas.js | 11 ++++++++--- js/ui/palette.js | 3 +-- 5 files changed, 25 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/app.js b/js/app.js index 223edcc..715def9 100644 --- a/js/app.js +++ b/js/app.js @@ -12,7 +12,7 @@ function init () { } function build () { shader.init() - shader.run(canvas) +// shader.run(canvas) shader.animate() canvas.append(canvas_rapper) diff --git a/js/draw.js b/js/draw.js index c72ca08..173a84e 100644 --- a/js/draw.js +++ b/js/draw.js @@ -4,11 +4,22 @@ function draw (lex, x, y, erasing) { stamp (canvas, brush, x, y, erasing) } +function line (lex, a, b, erasing) { + var len = dist(a[0], a[1], b[0], b[1]) + var bw = 1 + var x, y, i; + for (var i = 0; i < len; i += bw) { + x = lerp(i / len, a[0], b[0]) + y = lerp(i / len, a[1], b[1]) + stamp (canvas, brush, x, y, erasing) + } +} + function stamp (canvas, brush, x, y, erasing) { hh = brush.w/2|0 brush.forEach(function(lex, s, t){ - s += x-hh - t += y-hh + s = round( s + x-hh ) + t = round( t + y-hh ) if (s >= 0 && s < canvas.w && t >= 0 && t < canvas.h) { if (erasing) { canvas.aa[t][s].erase(lex) diff --git a/js/lex.js b/js/lex.js index 56d8280..17884d1 100644 --- a/js/lex.js +++ b/js/lex.js @@ -35,14 +35,14 @@ Lex.prototype.irc = function(){ } } Lex.prototype.clone = function (lex){ - if (lex.isClear()) return + if (lex.opacity == 0) return this.fg = lex.fg this.bg = lex.bg this.char = lex.char this.build() } Lex.prototype.erase = function (lex){ - if (lex.isClear()) return + if (lex.opacity == 0) return this.fg = colors.white this.bg = colors.black this.char = " " diff --git a/js/ui/canvas.js b/js/ui/canvas.js index 7e85fcf..1ee6e1c 100644 --- a/js/ui/canvas.js +++ b/js/ui/canvas.js @@ -5,15 +5,16 @@ var canvas = (function(){ var exports = new Matrix (cols, rows, function(x,y){ var lex = new Lex (x,y) -// lex.build() + lex.build() return lex }) exports.bind = function(){ + var last_point = [0,0] exports.forEach(function(lex, x, y){ if (lex.bound) return lex.bound = true - + var point = [x,y] lex.span.addEventListener('contextmenu', function(e){ e.preventDefault() }) @@ -23,13 +24,17 @@ var canvas = (function(){ if (drawing) { erasing = (e.which == "3" || e.ctrlKey) draw(lex, x, y, erasing) + last_point[0] = x + last_point[1] = y } lex.focus() }) lex.span.addEventListener("mousemove", function(){ if (! dragging) return if (drawing) { - draw(lex, x, y, erasing) + line(lex, last_point, point, erasing) + last_point[0] = x + last_point[1] = y } lex.focus() }) diff --git a/js/ui/palette.js b/js/ui/palette.js index 605c08b..2a648a8 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -1,10 +1,9 @@ var palette = (function(){ -console.log("hi") + var palette = new Matrix (32, 2, function(x,y){ var lex = new Lex (x,y) lex.bg = hue(x>>1) lex.build() - console.log(lex.bg, lex.css()) return lex }) -- cgit v1.2.3-70-g09d2