summaryrefslogtreecommitdiff
path: root/public/assets/test/intersect.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/test/intersect.html')
-rw-r--r--public/assets/test/intersect.html132
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>