diff options
Diffstat (limited to 'public/assets/test/intersect.html')
| -rw-r--r-- | public/assets/test/intersect.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/public/assets/test/intersect.html b/public/assets/test/intersect.html new file mode 100644 index 0000000..3f6d110 --- /dev/null +++ b/public/assets/test/intersect.html @@ -0,0 +1,132 @@ +<canvas id="canvas"></canvas> + +<script src="/assets/javascripts/util.js"></script> +<script src="/assets/javascripts/vendor/tube.js"></script> +<script src="/assets/javascripts/rectangles/util/constants.js"></script> +<script src="/assets/javascripts/rectangles/util/mouse.js"></script> +<script src="/assets/javascripts/rectangles/models/vec2.js"></script> +<script src="/assets/javascripts/rectangles/models/rect.js"></script> +<script src="/assets/javascripts/vendor/canvasutilities.js"></script> +<script> + +var ctx = canvas.getContext('2d') + +var w = canvas.width = 600 +var h = canvas.height = 400 + +var vec_a = new Rect( 100, 120, 50, 100 ) +var vec_b = new Rect( 20, 200, 120, 120 ) +var vecs = [ vec_a, vec_b ] +var points = [ vec_a.x, vec_a.y, vec_b.x, vec_b.y ] +var r = 4 + +var vec_c = new Rect() +vec_c.x = vec_a.x +vec_c.y = vec_b.x + +var intersect = new vec2 () + +var dragging = false, dragging_a, dragging_b +var delta = new vec2( 0, 0 ) + +var mymouse = new mouse({ + el: canvas, + down: function(e, cursor){ + points.some(function(p){ + if (-cursor.x.a > p.a - r && -cursor.x.a < p.a + r && + cursor.y.a > p.b - r && cursor.y.a < p.b + r) { + dragging_a = p.a + dragging_b = p.b + dragging = p + return true + } + }) + }, + drag: function(e, cursor){ + if (! dragging) return + delta = cursor.delta() + delta.a = - delta.a + dragging.a = dragging_a + delta.a + dragging.b = dragging_b + delta.b + }, + up: function(e, cursor, new_cursor){ + delta.zero() + dragging.dragging = false + dragging = false + }, +}) + +function draw () { + ctx.fillStyle = "#fff" + ctx.fillRect(0,0,w,h) + + ctx.fillStyle = "#bbb" + points.forEach(drawPoint) + + drawLine(vec_a.x, vec_a.y, "#f00") + drawLine(vec_b.x, vec_b.y, "#00f") + drawLine(vec_a.x, vec_b.x, "#080") + + var t = perp(vec_c, vec_b) / ( perp(vec_a, vec_b) || 0.0000001 ) + intersect.a = vec_a.x.a + ( vec_a.y.a - vec_a.x.a ) * t + intersect.b = vec_a.x.b + ( vec_a.y.b - vec_a.x.b ) * t + + var collinear = is_collinear( intersect.b, vec_b ) + var long_enough_to_intersect = 0 <= t && t <= 1 + + if (long_enough_to_intersect && collinear) { + ctx.fillStyle = "#f00" + } + else if (is_on_line) { + ctx.fillStyle = "#0f0" + } + else { + ctx.fillStyle = "#000" + } + + drawPoint(intersect) +} +function drawLine (pa, pb, color) { + ctx.fillStyle = color + ctx.strokeStyle = color + var x1 = pa.a + var y1 = pa.b + var x2 = pb.a + var y2 = pb.b + drawArrow(ctx, x1, y1, x2, y2) +} +function drawPoint (p) { + var x = p.a - r + var y = p.b - r + ctx.fillRect(x, y, r*2, r*2) +} +function perp (va, vb) { + return (va.y.a - va.x.a) * (vb.y.b - vb.x.b) - (va.y.b - va.x.b) * (vb.y.a - vb.x.a) +} +function is_collinear (n, vec) { + var on_x, on_y + + if (vec.x.a < vec.y.a) { + on_x = vec.x.a <= n && n <= vec.y.a + } + else { + on_x = vec.x.a >= n && n >= vec.y.a + } + + if (vec.x.b < vec.y.b) { + on_y = vec.x.b <= n && n <= vec.y.b + } + else { + on_y = vec.x.b >= n && n >= vec.y.b + } + + return !! (on_x && on_y) +} + +function animate(){ + requestAnimationFrame(animate) + draw() +} +animate() + +</script> |
