diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/test/brush/index.html | 100 | ||||
| -rw-r--r-- | assets/test/lasso/index.html | 2 |
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 } |
