more brush stuff

1 files changed, 88 insertions, 0 deletions

diff --git a/assets/test/lasso.html b/assets/test/lasso.html
new file mode 100644
index 0000000..62a9744
--- /dev/null
+++ b/assets/test/lasso.html
@@ -0,0 +1,88 @@
+<style>
+body,html{margin:0;padding:0;}
+#hud { position: absolute; top: 0; left: 0; pointer-events: none; }
+</style>
+<canvas id="canvas"></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 = canvas.width = window.innerWidth
+var h = canvas.height = window.innerHeight
+
+var placing = false
+var points = []
+
+var mymouse = new mouse({
+  el: canvas,
+  down: function(e, cursor){
+    // compare to initial point
+    if (placing) {
+      if (points.length > 2 && points[0].distanceTo(cursor.a) < 3) {
+        points.push(points[0].clone())
+        placing = false
+      }
+      else {
+        points.push( cursor.a )
+      }
+    }
+    else {
+      placing = true
+      points.length = 0
+      points.push( cursor.a )
+    }
+  },
+  move: function(e, cursor){
+    if (placing && points.length > 2 && points[0].distanceTo(cursor.a) < 3 ) {
+      document.body.style.cursor = "pointer"
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  },
+  drag: function(e, cursor){
+  },
+  up: function(e, cursor, new_cursor){
+  },
+})
+
+function draw (time) {
+  ctx.fillStyle = "#fff"
+  ctx.fillRect(0,0,w,h)
+
+  if (points.length == 1) {
+    ctx.fillStyle = "#000"
+    ctx.fillRect(points[0].x, points[0].y, 1, 1)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#000"
+    ctx.strokeStyle = "#000"
+    ctx.beginPath()
+    ctx.moveTo(points[0].x, points[0].y)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.x, point.y)
+    })
+    if (placing) {
+      ctx.stroke()
+    }
+    else {
+      ctx.fill()
+    }
+  }
+}
+function animate(time){
+  requestAnimationFrame(animate)
+  draw(time)
+}
+animate()
+</script>