summaryrefslogtreecommitdiff
path: root/assets/test
diff options
context:
space:
mode:
Diffstat (limited to 'assets/test')
-rw-r--r--assets/test/brush/index.html34
-rw-r--r--assets/test/brush/index2.html37
-rw-r--r--assets/test/lasso/index.html14
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()