1 files changed, 32 insertions, 24 deletions

diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html
index 68c81e0..4bdaf98 100644
--- a/assets/test/brush/index.html
+++ b/assets/test/brush/index.html
@@ -2,9 +2,12 @@
 body,html{margin:0;padding:0;}
 #hud { position: absolute; top: 0; left: 0; pointer-events: none; }
 canvas { position: absolute; top: 0; left: 0; }
+#mask { pointer-events: none; }
+#scratch { display: none; }
 </style>
 <canvas id="canvas"></canvas>
 <canvas id="mask"></canvas>
+<canvas id="scratch"></canvas>
 <div id="hud"></div>
 
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
@@ -19,6 +22,7 @@ canvas { position: absolute; top: 0; left: 0; }
 <script>
 
 var ctx = canvas.getContext('2d')
+var scratchCtx = scratch.getContext('2d')
 var w = mask.width = canvas.width = window.innerWidth
 var h = mask.height = canvas.height = window.innerHeight
 
@@ -31,16 +35,22 @@ var mymouse = new mouse({
     drawing = true
     lastPoint.a = cursor.x.a
     lastPoint.b = cursor.y.a
-    mask.clearRect(0,0,w,h)
-    imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
-    data = imagedata.data
+//     mask.clearRect(0,0,w,h)
+//     imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
+//     data = imagedata.data
   },
   drag: function(e, cursor){
-    newPoint.a = cursor.x.a
-    newPoint.b = cursor.x.b
+    newPoint.a = cursor.x.b
+    newPoint.b = cursor.y.b
+    drawLine(lastPoint, newPoint)
+
+    lastPoint.a = newPoint.a
+    lastPoint.b = newPoint.b
   },
   up: function(e, cursor, new_cursor){
     drawing = false
+    drawLine({ a: cursor.x.a, b: cursor.y.a }, { a: cursor.x.b, b: cursor.y.b })
+    console.log("hi")
   },
 })
 
@@ -50,38 +60,35 @@ function drawLine (u, v) {
   var xmin = Math.min(u.a, v.a)
   var ymin = Math.min(u.b, v.b)
 
-  var w = abs(u.a - v.a) + radius*2
-  var h = abs(u.b - v.b) + radius*2
+  var w = scratch.width = abs(u.a - v.a) + radius*2
+  var h = scratch.height = abs(u.b - v.b) + radius*2
 
   var p = new point (0,0)
   var radius2 = radius * radius
-  
+
   var imagedata = ctx.createImageData(w, h)
   var d = imagedata.data
   var i, j, t, dist
 
-  var len = sqrt(dist2(u, v))
-
-  if (len == 0) return
-
   for (i = 0; i < w; i++) {
     for (j = 0; j < h; j++) {
       t = (j * w + i) * 4
       
-      p.a = i - radius + xmin
-      p.b = j - radius + ymin
+      p.a = xmin + i - radius
+      p.b = ymin + j - radius
       
-      dist = distToSegmentSquared( p, u, v, len )
+      dist = distToSegmentSquared( p, u, v )
 
       if (dist > radius2) {
         d[t+3] = 0
       }
       else {
-        d[t+3] = round((1 - sqrt(dist)/radius) * 255)
+        d[t+3] = round( pow(1 - sqrt(dist)/radius, 2) * 255)
       }
     }
   }
-  ctx.putImageData(imagedata, u.a, u.b)
+  scratchCtx.putImageData(imagedata, 0, 0)
+  ctx.drawImage(scratch, xmin - radius, ymin - radius)
 }
 
 drawLine( new point( 100, 100 ), new point( 100, 400 ) )
@@ -89,13 +96,14 @@ drawLine( new point( 100, 100 ), new point( 100, 400 ) )
 // drawLine( new point( 100, 100 ), new point( 400, 400 ) )
 
 function sqr(x) { return x * x }
-function dist2(v, w) { return sqr(v.b - w.b) + sqr(v.b - w.b) }
-function distToSegmentSquared (p, v, w, len) {
-  var t = ((p.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / len;
-  if (t < 0) return dist2(p, v);
-  if (t > 1) return dist2(p, w);
-  return dist2(p, { x: v.a + t * (w.a - v.a),
-                    y: v.b + t * (w.b - v.b) });
+function dist2(v, w) { return sqr(v.a - w.a) + sqr(v.b - w.b) }
+function distToSegmentSquared (p, v, w) {
+	var l2 = dist2(v, w)
+  var t = ((p.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / l2
+  if (t < 0) return dist2(p, v)
+  if (t > 1) return dist2(p, w)
+  return dist2(p, { a: v.a + t * (w.a - v.a),
+                    b: v.b + t * (w.b - v.b) })
 }