From 1f86b57c3036a137120e7e0568eec33c1f6a98f1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 18 Nov 2014 18:41:32 -0500
Subject: more brush stuff

---
 assets/test/brush.html        | 110 ++++++++++++++++++++++++++++++++++++
 assets/test/brush/index.html  | 110 ------------------------------------
 assets/test/brush/index2.html | 119 ---------------------------------------
 assets/test/brush2.html       | 127 ++++++++++++++++++++++++++++++++++++++++++
 assets/test/lasso.html        |  88 +++++++++++++++++++++++++++++
 assets/test/lasso/index.html  |  88 -----------------------------
 6 files changed, 325 insertions(+), 317 deletions(-)
 create mode 100644 assets/test/brush.html
 delete mode 100644 assets/test/brush/index.html
 delete mode 100644 assets/test/brush/index2.html
 create mode 100644 assets/test/brush2.html
 create mode 100644 assets/test/lasso.html
 delete mode 100644 assets/test/lasso/index.html

(limited to 'assets/test')

diff --git a/assets/test/brush.html b/assets/test/brush.html
new file mode 100644
index 0000000..cd31198
--- /dev/null
+++ b/assets/test/brush.html
@@ -0,0 +1,110 @@
+<style>
+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>
+<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 scratchCtx = scratch.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.x = cursor.a.x
+    lastPoint.y = cursor.a.y
+//     mask.clearRect(0,0,w,h)
+//     imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
+//     data = imagedata.data
+  },
+  drag: function(e, cursor){
+    newPoint.x = cursor.b.x
+    newPoint.y = cursor.b.y
+    drawLine(lastPoint, newPoint)
+
+    lastPoint.x = newPoint.x
+    lastPoint.y = newPoint.y
+  },
+  up: function(e, cursor, new_cursor){
+    drawing = false
+    drawLine(cursor.a, cursor.b)
+    console.log("hi")
+  },
+})
+
+function drawLine (u, v) {
+  var radius = 10
+
+  var xmin = Math.min(u.x, v.x)
+  var ymin = Math.min(u.y, v.y)
+
+  var w = scratch.width = abs(u.x - v.x) + radius*2
+  var h = scratch.height = abs(u.y - v.y) + 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
+
+  for (i = 0; i < w; i++) {
+    for (j = 0; j < h; j++) {
+      t = (j * w + i) * 4
+      
+      p.x = xmin + i - radius
+      p.y = ymin + j - radius
+      
+      dist = distToSegmentSquared( p, u, v )
+
+      if (dist > radius2) {
+        d[t+3] = 0
+      }
+      else {
+        d[t+3] = round( pow(1 - sqrt(dist)/radius, 2) * 255)
+      }
+    }
+  }
+  scratchCtx.putImageData(imagedata, 0, 0)
+  ctx.drawImage(scratch, xmin - radius, ymin - radius)
+}
+
+drawLine( new point( 100, 100 ), new point( 100, 400 ) )
+// drawLine( new point( 100, 100 ), new point( 400, 100 ) )
+// drawLine( new point( 100, 100 ), new point( 400, 400 ) )
+
+function sqr(x) { return x * x }
+function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
+function distToSegmentSquared (p, v, w) {
+	var l2 = dist2(v, w)
+  var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
+  if (t < 0) return dist2(p, v)
+  if (t > 1) return dist2(p, w)
+  return dist2(p, { x: v.x + t * (w.x - v.x),
+                    y: v.y + t * (w.y - v.y) })
+}
+
+
+</script>
diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html
deleted file mode 100644
index cd31198..0000000
--- a/assets/test/brush/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<style>
-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>
-<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 scratchCtx = scratch.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.x = cursor.a.x
-    lastPoint.y = cursor.a.y
-//     mask.clearRect(0,0,w,h)
-//     imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
-//     data = imagedata.data
-  },
-  drag: function(e, cursor){
-    newPoint.x = cursor.b.x
-    newPoint.y = cursor.b.y
-    drawLine(lastPoint, newPoint)
-
-    lastPoint.x = newPoint.x
-    lastPoint.y = newPoint.y
-  },
-  up: function(e, cursor, new_cursor){
-    drawing = false
-    drawLine(cursor.a, cursor.b)
-    console.log("hi")
-  },
-})
-
-function drawLine (u, v) {
-  var radius = 10
-
-  var xmin = Math.min(u.x, v.x)
-  var ymin = Math.min(u.y, v.y)
-
-  var w = scratch.width = abs(u.x - v.x) + radius*2
-  var h = scratch.height = abs(u.y - v.y) + 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
-
-  for (i = 0; i < w; i++) {
-    for (j = 0; j < h; j++) {
-      t = (j * w + i) * 4
-      
-      p.x = xmin + i - radius
-      p.y = ymin + j - radius
-      
-      dist = distToSegmentSquared( p, u, v )
-
-      if (dist > radius2) {
-        d[t+3] = 0
-      }
-      else {
-        d[t+3] = round( pow(1 - sqrt(dist)/radius, 2) * 255)
-      }
-    }
-  }
-  scratchCtx.putImageData(imagedata, 0, 0)
-  ctx.drawImage(scratch, xmin - radius, ymin - radius)
-}
-
-drawLine( new point( 100, 100 ), new point( 100, 400 ) )
-// drawLine( new point( 100, 100 ), new point( 400, 100 ) )
-// drawLine( new point( 100, 100 ), new point( 400, 400 ) )
-
-function sqr(x) { return x * x }
-function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
-function distToSegmentSquared (p, v, w) {
-	var l2 = dist2(v, w)
-  var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
-  if (t < 0) return dist2(p, v)
-  if (t > 1) return dist2(p, w)
-  return dist2(p, { x: v.x + t * (w.x - v.x),
-                    y: v.y + t * (w.y - v.y) })
-}
-
-
-</script>
diff --git a/assets/test/brush/index2.html b/assets/test/brush/index2.html
deleted file mode 100644
index 7094ca8..0000000
--- a/assets/test/brush/index2.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<style>
-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>
-<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/jsBezier-0.6.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 maskCtx = mask.getContext('2d')
-var scratchCtx = scratch.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.x = cursor.a.x
-    lastPoint.y = cursor.a.y
-    maskCtx.clearRect(0,0,w,h)
-    drawLine(lastPoint, lastPoint)
-//     imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
-//     data = imagedata.data
-  },
-  drag: function(e, cursor){
-    newPoint.x = cursor.b.x
-    newPoint.y = cursor.b.y
-    drawLine(lastPoint, newPoint)
-
-    lastPoint.x = newPoint.x
-    lastPoint.y = newPoint.y
-  },
-  up: function(e, cursor, new_cursor){
-    drawing = false
-		ctx.globalCompositeOperation = "multiply"
-		ctx.drawImage(mask, 0, 0)
-    maskCtx.clearRect(0,0,w,h)
-  },
-})
-
-function drawLine (u, v) {
-  var radius = 20
-
-  var xmin = Math.min(u.x, v.x)
-  var ymin = Math.min(u.y, v.y)
-
-  var w = scratch.width = abs(u.x - v.x) + radius*2
-  var h = scratch.height = abs(u.y - v.y) + radius*2
-
-  var p = new point (0,0)
-  var radius2 = radius * radius
-
-// 	if (w == h && h == radius*2) return
-
-  var imagedata = ctx.createImageData(w, h)
-  var d = imagedata.data
-  var i, j, t, dist
-
-  for (i = 0; i < w; i++) {
-    for (j = 0; j < h; j++) {
-      t = (j * w + i) * 4
-      
-      p.x = xmin + i - radius
-      p.y = ymin + j - radius
-      
-      dist = distToSegmentSquared( p, u, v )
-
-      if (dist > radius2) {
-        d[t+3] = 0
-      }
-      else {
-        d[t+0] = d[t+1] = d[t+2] = round( (sqrt(dist)/radius) * 255)
-        d[t+3] = 255
-      }
-    }
-  }
-  scratchCtx.putImageData(imagedata, 0, 0)
-	maskCtx.globalCompositeOperation = 'darken';
-  maskCtx.drawImage(scratch, xmin - radius, ymin - radius)
-}
-
-drawLine( new point( 100, 100 ), new point( 100, 400 ) )
-drawLine( new point( 100, 100 ), new point( 400, 100 ) )
-drawLine( new point( 100, 100 ), new point( 400, 400 ) )
-
-function sqr(x) { return x * x }
-function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
-function distToSegmentSquared (p, v, w) {
-	var l2 = dist2(v, w)
-  if (l2 == 0) return dist2(p, v)
-  var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
-  if (t < 0) return dist2(p, v)
-  if (t > 1) return dist2(p, w)
-  return dist2(p, { x: v.x + t * (w.x - v.x),
-                    y: v.y + t * (w.y - v.y) })
-}
-
-</script>
diff --git a/assets/test/brush2.html b/assets/test/brush2.html
new file mode 100644
index 0000000..2263365
--- /dev/null
+++ b/assets/test/brush2.html
@@ -0,0 +1,127 @@
+<style>
+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>
+<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/jsBezier-0.6.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 maskCtx = mask.getContext('2d')
+var scratchCtx = scratch.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.x = cursor.a.x
+    lastPoint.y = cursor.a.y
+    maskCtx.clearRect(0,0,w,h)
+    drawLine(lastPoint, lastPoint)
+//     imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height )
+//     data = imagedata.data
+  },
+  drag: function(e, cursor){
+    newPoint.x = cursor.b.x
+    newPoint.y = cursor.b.y
+    drawLine(lastPoint, newPoint)
+
+    lastPoint.x = newPoint.x
+    lastPoint.y = newPoint.y
+  },
+  up: function(e, cursor, new_cursor){
+    drawing = false
+		ctx.globalCompositeOperation = "multiply"
+		ctx.drawImage(mask, 0, 0)
+    maskCtx.clearRect(0,0,w,h)
+  },
+})
+
+function drawLine (u, v, A, B, C, D) {
+  var radius = 20
+
+  var xmin = Math.min(u.x, v.x)
+  var ymin = Math.min(u.y, v.y)
+
+  var w = scratch.width = abs(u.x - v.x) + radius*2
+  var h = scratch.height = abs(u.y - v.y) + radius*2
+
+  var p = new point (0,0)
+  var radius2 = radius * radius
+
+// 	if (w == h && h == radius*2) return
+
+  var imagedata = ctx.createImageData(w, h)
+  var d = imagedata.data
+  var i, j, t, dist
+
+  for (i = 0; i < w; i++) {
+    for (j = 0; j < h; j++) {
+      t = (j * w + i) * 4
+      
+      p.x = xmin + i - radius
+      p.y = ymin + j - radius
+      
+      dist = distToSegmentSquared( p, u, v )
+
+      if (dist > radius2) {
+        d[t+3] = 0
+      }
+      else {
+        d[t+0] = d[t+1] = d[t+2] = round( bezier( sqrt(dist)/radius, 0, 0, 1, 1) * 255)
+        d[t+3] = 255
+      }
+    }
+  }
+  scratchCtx.putImageData(imagedata, 0, 0)
+	maskCtx.globalCompositeOperation = 'darken';
+  maskCtx.drawImage(scratch, xmin - radius, ymin - radius)
+}
+
+for (var i = 0; i < 11; i++) {
+  drawLine( new point( 100, 100 + 40 * i), new point (400, 100 + 40 * i ), 0, 0, lerp(i/10, -2, 1), 1 )
+}
+
+// drawLine( new point( 100, 100 ), new point( 100, 400 ) )
+// drawLine( new point( 100, 100 ), new point( 400, 100 ) )
+// drawLine( new point( 100, 100 ), new point( 400, 400 ) )
+
+function bezier(t,a,b,c,d) {
+  var s = (1-t)
+  return s*s*s*a + 3*s*s*b + 3*s*t*t*c + t*t*t*d
+}
+function sqr(x) { return x * x }
+function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
+function distToSegmentSquared (p, v, w) {
+	var l2 = dist2(v, w)
+  if (l2 == 0) return dist2(p, v)
+  var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
+  if (t < 0) return dist2(p, v)
+  if (t > 1) return dist2(p, w)
+  return dist2(p, { x: v.x + t * (w.x - v.x),
+                    y: v.y + t * (w.y - v.y) })
+}
+
+</script>
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>
diff --git a/assets/test/lasso/index.html b/assets/test/lasso/index.html
deleted file mode 100644
index 62a9744..0000000
--- a/assets/test/lasso/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<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>
-- 
cgit v1.2.3-70-g09d2