pen test

1 files changed, 158 insertions, 0 deletions

diff --git a/assets/test/pen.html b/assets/test/pen.html
new file mode 100644
index 0000000..730183a
--- /dev/null
+++ b/assets/test/pen.html
@@ -0,0 +1,158 @@
+<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)
+    extra = 1
+    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)
+  },
+})
+var extra = 1
+function drawLine (u, v) {
+  var radius = scratch.width/2
+  var length = sqrt(dist2(u, v))
+  var steps = length / (scratch.width/4) + extra
+  extra = steps % 1
+  if (steps < 1) return
+  var x, y, t
+  for (var i = 0; i < steps; i++) {
+    t = i/steps
+    x = lerp(t, u.x, v.x)
+    y = lerp(t, u.y, v.y)
+    maskCtx.drawImage(scratch, x - radius, y - radius)
+  }
+}
+
+function drawSquareBrush (w, h) {
+  w = w || 1
+  h = h || w
+
+  scratch.width = w
+  scratch.height = h
+
+  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
+      
+      d[t] = d[t+1] = d[t+2] = 0
+      d[t+3] = 255
+    }
+  }
+  scratchCtx.putImageData(imagedata, 0, 0)
+}
+
+function drawRoundBrush (radius) {
+  var w = scratch.width = radius * 2
+  var h = scratch.height = 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 = i - radius + 0.5
+      p.y = j - radius + 0.5
+      
+      dist = distToSegmentSquared( p, { x: 0, y: 0 }, { x: 0, y: 0 } )
+
+      if (dist > radius2) {
+        d[t] = d[t+1] = d[t+2] = d[t+3] = 0
+      }
+      else {
+        d[t] = d[t+1] = d[t+2] = 0
+        d[t+3] = 255
+      }
+    }
+  }
+  scratchCtx.putImageData(imagedata, 0, 0)
+}
+
+
+for (var i = 0; i < 11; i++) {
+  drawSquareBrush(i+1)
+  drawLine( new point( 100, 100 + 40 * i), new point (400, 100 + 40 * i ))
+}
+
+// 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>