initial brush test.. some bugs

2 files changed, 101 insertions, 1 deletions

diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html
new file mode 100644
index 0000000..3e29473
--- /dev/null
+++ b/assets/test/brush/index.html
@@ -0,0 +1,100 @@
+<style>
+body,html{margin:0;padding:0;}
+#hud { position: absolute; top: 0; left: 0; pointer-events: none; }
+canvas { position: absolute; top: 0; left: 0; }
+</style>
+<canvas id="canvas"></canvas>
+<canvas id="mask"></canvas>
+<div id="hud"></div>
+
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/canvasutilities.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/math/util.js"></script>
+<script src="/assets/javascripts/math/point.js"></script>
+<script src="/assets/javascripts/math/vec2.js"></script>
+<script src="/assets/javascripts/util/mouse.js"></script>
+<script src="/assets/javascripts/util/uid.js"></script>
+<script>
+
+var ctx = canvas.getContext('2d')
+var w = mask.width = canvas.width = window.innerWidth
+var h = mask.height = canvas.height = window.innerHeight
+
+var drawing = false
+var lastPoint = new point (0, 0), newPoint = new point (0, 0)
+
+var mymouse = new mouse({
+  el: canvas,
+  down: function(e, cursor){
+    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
+  },
+  drag: function(e, cursor){
+    newPoint.a = cursor.x.a
+    newPoint.b = cursor.x.b
+  },
+  up: function(e, cursor, new_cursor){
+    drawing = false
+  },
+})
+
+function drawLine (u, v) {
+  var radius = 10
+
+  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 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 = 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
+      
+      dist = distToSegmentSquared( p, u, v, len )
+
+      if (dist > radius2) {
+        d[t+3] = 0
+      }
+      else {
+        d[t+3] = round((1 - sqrt(dist)/radius) * 255)
+      }
+    }
+  }
+  ctx.putImageData(imagedata, 100, 100)
+}
+
+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) });
+}
+
+
+</script>
diff --git a/assets/test/lasso/index.html b/assets/test/lasso/index.html
index 16cb27f..f136f6d 100644
--- a/assets/test/lasso/index.html
+++ b/assets/test/lasso/index.html
@@ -28,7 +28,7 @@ var mymouse = new mouse({
   down: function(e, cursor){
     // compare to initial point
     if (placing) {
-      if (points.length > 3 && points[0].distanceTo({ a: cursor.x.a, b: cursor.y.a }) < 3) {
+      if (points.length > 2 && points[0].distanceTo({ a: cursor.x.a, b: cursor.y.a }) < 3) {
         points.push(points[0].clone())
         placing = false
       }