diff options
Diffstat (limited to 'assets/test')
| -rw-r--r-- | assets/test/brush/index.html | 34 | ||||
| -rw-r--r-- | assets/test/brush/index2.html | 37 | ||||
| -rw-r--r-- | assets/test/lasso/index.html | 14 |
3 files changed, 42 insertions, 43 deletions
diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html index 4bdaf98..cd31198 100644 --- a/assets/test/brush/index.html +++ b/assets/test/brush/index.html @@ -33,23 +33,23 @@ var mymouse = new mouse({ el: canvas, down: function(e, cursor){ drawing = true - lastPoint.a = cursor.x.a - lastPoint.b = cursor.y.a + 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.a = cursor.x.b - newPoint.b = cursor.y.b + newPoint.x = cursor.b.x + newPoint.y = cursor.b.y drawLine(lastPoint, newPoint) - lastPoint.a = newPoint.a - lastPoint.b = newPoint.b + lastPoint.x = newPoint.x + lastPoint.y = newPoint.y }, up: function(e, cursor, new_cursor){ drawing = false - drawLine({ a: cursor.x.a, b: cursor.y.a }, { a: cursor.x.b, b: cursor.y.b }) + drawLine(cursor.a, cursor.b) console.log("hi") }, }) @@ -57,11 +57,11 @@ var mymouse = new mouse({ function drawLine (u, v) { var radius = 10 - var xmin = Math.min(u.a, v.a) - var ymin = Math.min(u.b, v.b) + var xmin = Math.min(u.x, v.x) + var ymin = Math.min(u.y, v.y) - var w = scratch.width = abs(u.a - v.a) + radius*2 - var h = scratch.height = abs(u.b - v.b) + radius*2 + 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 @@ -74,8 +74,8 @@ function drawLine (u, v) { for (j = 0; j < h; j++) { t = (j * w + i) * 4 - p.a = xmin + i - radius - p.b = ymin + j - radius + p.x = xmin + i - radius + p.y = ymin + j - radius dist = distToSegmentSquared( p, u, v ) @@ -96,14 +96,14 @@ drawLine( new point( 100, 100 ), new point( 100, 400 ) ) // drawLine( new point( 100, 100 ), new point( 400, 400 ) ) function sqr(x) { return x * x } -function dist2(v, w) { return sqr(v.a - w.a) + sqr(v.b - w.b) } +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.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / l2 + 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, { a: v.a + t * (w.a - v.a), - b: v.b + t * (w.b - v.b) }) + return dist2(p, { x: v.x + t * (w.x - v.x), + y: v.y + t * (w.y - v.y) }) } diff --git a/assets/test/brush/index2.html b/assets/test/brush/index2.html index 004b030..7094ca8 100644 --- a/assets/test/brush/index2.html +++ b/assets/test/brush/index2.html @@ -13,6 +13,7 @@ canvas { position: absolute; top: 0; left: 0; } <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> @@ -35,24 +36,23 @@ var mymouse = new mouse({ el: canvas, down: function(e, cursor){ drawing = true - lastPoint.a = cursor.x.a - lastPoint.b = cursor.y.a + 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.a = cursor.x.b - newPoint.b = cursor.y.b + newPoint.x = cursor.b.x + newPoint.y = cursor.b.y drawLine(lastPoint, newPoint) - lastPoint.a = newPoint.a - lastPoint.b = newPoint.b + lastPoint.x = newPoint.x + lastPoint.y = newPoint.y }, up: function(e, cursor, new_cursor){ drawing = false -// drawLine({ a: cursor.x.a, b: cursor.y.a }, { a: cursor.x.b, b: cursor.y.b }) ctx.globalCompositeOperation = "multiply" ctx.drawImage(mask, 0, 0) maskCtx.clearRect(0,0,w,h) @@ -62,11 +62,11 @@ var mymouse = new mouse({ function drawLine (u, v) { var radius = 20 - var xmin = Math.min(u.a, v.a) - var ymin = Math.min(u.b, v.b) + var xmin = Math.min(u.x, v.x) + var ymin = Math.min(u.y, v.y) - var w = scratch.width = abs(u.a - v.a) + radius*2 - var h = scratch.height = abs(u.b - v.b) + radius*2 + 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 @@ -81,8 +81,8 @@ function drawLine (u, v) { for (j = 0; j < h; j++) { t = (j * w + i) * 4 - p.a = xmin + i - radius - p.b = ymin + j - radius + p.x = xmin + i - radius + p.y = ymin + j - radius dist = distToSegmentSquared( p, u, v ) @@ -96,7 +96,7 @@ function drawLine (u, v) { } } scratchCtx.putImageData(imagedata, 0, 0) - maskCtx.globalCompositeOperation = 'destination-out'; + maskCtx.globalCompositeOperation = 'darken'; maskCtx.drawImage(scratch, xmin - radius, ymin - radius) } @@ -105,16 +105,15 @@ 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.a - w.a) + sqr(v.b - w.b) } +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.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / l2 + 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, { a: v.a + t * (w.a - v.a), - b: v.b + t * (w.b - v.b) }) + 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/index.html b/assets/test/lasso/index.html index f136f6d..62a9744 100644 --- a/assets/test/lasso/index.html +++ b/assets/test/lasso/index.html @@ -28,22 +28,22 @@ var mymouse = new mouse({ down: function(e, cursor){ // compare to initial point if (placing) { - if (points.length > 2 && points[0].distanceTo({ a: cursor.x.a, b: cursor.y.a }) < 3) { + if (points.length > 2 && points[0].distanceTo(cursor.a) < 3) { points.push(points[0].clone()) placing = false } else { - points.push( new point( cursor.x.a, cursor.y.a ) ) + points.push( cursor.a ) } } else { placing = true points.length = 0 - points.push( new point( cursor.x.a, cursor.y.a ) ) + points.push( cursor.a ) } }, move: function(e, cursor){ - if (placing && points.length > 2 && points[0].distanceTo({ a: cursor.x.a, b: cursor.y.a }) < 3 ) { + if (placing && points.length > 2 && points[0].distanceTo(cursor.a) < 3 ) { document.body.style.cursor = "pointer" } else { @@ -62,15 +62,15 @@ function draw (time) { if (points.length == 1) { ctx.fillStyle = "#000" - ctx.fillRect(points[0].a, points[0].b, 1, 1) + 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].a, points[0].b) + ctx.moveTo(points[0].x, points[0].y) points.forEach(function(point, i){ - i && ctx.lineTo(point.a, point.b) + i && ctx.lineTo(point.x, point.y) }) if (placing) { ctx.stroke() |
