summaryrefslogtreecommitdiff
path: root/public/assets/test/intersect3.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/test/intersect3.html')
-rw-r--r--public/assets/test/intersect3.html320
1 files changed, 320 insertions, 0 deletions
diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html
new file mode 100644
index 0000000..b8f9a0d
--- /dev/null
+++ b/public/assets/test/intersect3.html
@@ -0,0 +1,320 @@
+<style>
+body,html{margin:0;padding:0;}
+#hud { position: absolute; top: 0; left: 0; pointer-events: none; }
+</style>
+<canvas id="canvas"></canvas>
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.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/util/sort.js"></script>
+<script src="/assets/javascripts/rectangles/util/uid.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/room.js"></script>
+<script src="/assets/javascripts/rectangles/models/surface.js"></script>
+<script src="/assets/javascripts/rectangles/models/wall.js"></script>
+<script src="/assets/javascripts/rectangles/models/floor.js"></script>
+<script src="/assets/javascripts/rectangles/engine/rooms/_rooms.js"></script>
+<script src="/assets/javascripts/rectangles/engine/rooms/_walls.js"></script>
+<script src="/assets/javascripts/rectangles/engine/rooms/clipper.js"></script>
+<script src="/assets/javascripts/rectangles/engine/rooms/builder.js"></script>
+<script src="/assets/javascripts/rectangles/engine/rooms/grouper.js"></script>
+<script src="/assets/javascripts/vendor/canvasutilities.js"></script>
+<script>
+
+var w = canvas.width = window.innerWidth
+var h = canvas.height = window.innerHeight
+
+var ctx = canvas.getContext('2d')
+var scene = new MX.Scene()
+
+var cursor = new Rect( new vec2(400, 200), new vec2(800, 500) )
+var wall_vec = new Rect ( 0, 0, 0, 0 )
+var points = [ cursor.x, cursor.y ]
+
+var origins = new Rect()
+origins.x = cursor.x
+origins.y = wall_vec.x
+
+scene.camera.radius = 20
+
+var rect = new Rect( new vec2(100,400), new vec2(100,400) )
+var east = new Rect( new vec2(200,600), new vec2(100,400) )
+var corner = new Rect( new vec2(300,700), new vec2(300,700) )
+var peninsula = new Rect( new vec2(400,600), new vec2(600,800) )
+var peninsula2 = new Rect( new vec2(650,750), new vec2(350,450) )
+
+var rect_room = new Room({ id: "rect", rect: rect, height: 2 })
+var east_room = new Room({ id: "east", rect: east, height: 2 })
+var corner_room = new Room({ id: "corner", rect: corner, height: 2 })
+var peninsula_room = new Room({ id: "peninsula", rect: peninsula, height: 3 })
+var peninsula2_room = new Room({ id: "peninsula2", rect: peninsula2, height: 1 })
+
+Rooms.add( rect_room )
+Rooms.add( east_room )
+Rooms.add( corner_room )
+Rooms.add( peninsula_room )
+Rooms.add( peninsula2_room )
+
+Rooms.clipper.update()
+Rooms.builder.build()
+Rooms.grouper.build()
+
+var r = 6
+
+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 (time) {
+ ctx.fillStyle = "#fff"
+ ctx.fillRect(0,0,w,h)
+
+ Rooms.forEach(function(room, i){
+ ctx.fillStyle = "#eee"
+ ctx.fillRect(room.rect.x.a, room.rect.y.a, room.rect.width(), room.rect.height())
+ })
+
+ ctx.fillStyle = "#333"
+ points.forEach(drawPoint)
+
+ drawLine(cursor.x, cursor.y, "#f00")
+// hud.innerHTML = ""
+ var closest_intersect, t, min_t = 1
+ var cursor_copy = cursor.extend_ends(scene.camera.radius)
+
+ hud.innerHTML = cursor_copy.x
+ drawPoint(cursor_copy.x, "#ff0")
+
+ Walls.list.forEach(function(wall, i){
+ wall.get_points(wall_vec)
+ drawLine(wall_vec.x, wall_vec.y, "#088")
+
+ origins.x = cursor_copy.x
+ origins.y = wall_vec.x
+
+ t = perp(origins, wall_vec) / ( perp(cursor_copy, wall_vec) || 0.0000001 )
+ intersect.a = cursor_copy.x.a + ( cursor_copy.y.a - cursor_copy.x.a ) * t
+ intersect.b = cursor_copy.x.b + ( cursor_copy.y.b - cursor_copy.x.b ) * t
+
+ var collinear = is_collinear( intersect, wall_vec )
+ var long_enough_to_intersect = 0 <= t && t <= 1
+ var actually_intersects = false
+ var intersecting_face
+ var msg
+
+ if (long_enough_to_intersect && collinear) {
+ if (wall.side & LEFT_RIGHT) {
+ intersecting_face = wall.surface.face_for_x(intersect.b)
+ }
+ else {
+ intersecting_face = wall.surface.face_for_x(intersect.a)
+ }
+ actually_intersects = !! (intersecting_face && intersecting_face.y.a == 0)
+ }
+
+ if (actually_intersects) {
+ ctx.fillStyle = "#f00"
+ msg = "through"
+ }
+ else if (collinear) {
+ ctx.fillStyle = "#0f0"
+ msg = "to"
+ }
+ else {
+ ctx.fillStyle = "rgba(0,0,0,0.1)"
+ msg = "off"
+ }
+
+ drawPoint(intersect)
+ if (actually_intersects && t < min_t) {
+ min_t = t
+ closest_intersect = intersect.clone()
+ closest_wall = wall_vec.clone()
+ }
+ })
+
+ if (closest_intersect) {
+ var a = angle(closest_wall)
+ wall_vec.assign(closest_wall)
+ wall_vec.x.a -= scene.camera.radius * sin(a)
+ wall_vec.x.b += scene.camera.radius * cos(a)
+ wall_vec.y.a -= scene.camera.radius * sin(a)
+ wall_vec.y.b += scene.camera.radius * cos(a)
+
+ drawLine(wall_vec.x, wall_vec.y, "rgba(0,255,255,1.0)")
+
+ origins.x = cursor.x
+ origins.y = wall_vec.x
+
+ var new_t = perp(origins, wall_vec) / ( perp(cursor, wall_vec) || 0.0000001 )
+ var wall_t = perp(origins, cursor) / ( perp(wall_vec, cursor) || 0.0000001 )
+
+ var closest_intersect2 = new vec2 ()
+ closest_intersect2.a = cursor.x.a + ( cursor.y.a - cursor.x.a ) * new_t
+ closest_intersect2.b = cursor.x.b + ( cursor.y.b - cursor.x.b ) * new_t
+
+ ctx.fillStyle = "#0ff"
+ drawPoint(closest_intersect2)
+ drawLine(cursor.x, closest_intersect2, "#00f")
+
+ var len = sqrt(dot(wall_vec, wall_vec))
+
+ // here compare len to the length of the wall in the direction we are travelling
+ var aw = angle(closest_wall)
+ var dd = dot2(diff(closest_wall), diff(cursor))
+
+// hud.innerHTML += " " + dd + " " + round(deg(aw))
+ if (dd > 0) {
+ len *= 1-abs(wall_t)
+ }
+ else {
+ len *= abs(wall_t)
+ aw += PI
+ }
+
+ len = clamp(len, 0, (1-min_t) * sqrt(dot(cursor, cursor)))
+
+// hud.innerHTML = [ aw ].map(function(n){ return round(deg(n)) })
+// hud.innerHTML += "__&nbsp;" + (dd > 0 ? "gt": "lt") + " " + round(len) + " " + (1-min_t) + " " + round((1-min_t)*sqrt(dot2(diff(cursor), diff(cursor))))
+
+ var end_of_ray = closest_intersect2.clone()
+ end_of_ray.a += len * cos(aw)
+ end_of_ray.b += len * sin(aw)
+
+ wall_vec.normalize()
+ end_of_ray.a = clamp(end_of_ray.a, wall_vec.x.a, wall_vec.y.a)
+ end_of_ray.b = clamp(end_of_ray.b, wall_vec.x.b, wall_vec.y.b)
+
+ drawPoint(end_of_ray)
+ drawLine(closest_intersect2, end_of_ray, "#00f")
+ }
+ else {
+// hud.innerHTML = [ (angle(cursor) + TWO_PI) % TWO_PI ].map(function(n){ return round(deg(n)) })
+ }
+
+}
+function drawLine (pa, pb, color, headless) {
+ 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, 3, headless ? 0 : 1)
+}
+function drawPoint (p, color) {
+ if (color) {
+ ctx.fillStyle = color
+ }
+ var x = p.a - r
+ var y = p.b - r
+ ctx.fillRect(x, y, r*2, r*2)
+}
+function angle (va) {
+ return atan2(va.y.b - va.x.b, va.y.a - va.x.a)
+}
+function angle2 (pa, pb) {
+ return atan2(pb.b - pa.b, pb.a - pa.a)
+}
+function normal (va) {
+ return atan2(va.x.a - va.y.a, va.y.b - va.x.b)
+}
+function dot (va, vb) {
+ return (va.y.a - va.x.a) * (vb.y.a - vb.x.a) + (va.y.b - va.x.b) * (vb.y.b - vb.x.b)
+}
+function diff (v) {
+ return new vec2(v.y.a - v.x.a, v.y.b - v.x.b)
+}
+function dot2 (pa, pb) {
+ return pa.a * pb.a + pa.b * pb.b
+}
+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 (p, vec) {
+ var on_x, on_y
+ var pa = round(p.a), pb = round(p.b)
+
+ if (vec.x.a < vec.y.a) {
+ on_x = vec.x.a <= pa && pa <= vec.y.a
+ }
+ else {
+ on_x = vec.x.a >= pa && pa >= vec.y.a
+ }
+
+ if (vec.x.b < vec.y.b) {
+ on_y = vec.x.b <= pb && pb <= vec.y.b
+ }
+ else {
+ on_y = vec.x.b >= pb && pb >= vec.y.b
+ }
+
+ return !! (on_x && on_y)
+}
+cursor.extend_ends = function(n){
+ var a = angle(this)
+ var clone = this.clone()
+ clone.x.a -= n*cos(a)
+ clone.x.b -= n*sin(a)
+ clone.y.a += n*cos(a)
+ clone.y.b += n*sin(a)
+ return clone
+}
+wall_vec.normalize = function(){
+ var carry
+ if (this.x.a > this.y.a) {
+ carry = this.x.a
+ this.x.a = this.y.a
+ this.y.a = carry
+ }
+ if (this.x.b > this.y.b) {
+ carry = this.x.b
+ this.x.b = this.y.b
+ this.y.b = carry
+ }
+}
+function animate(time){
+ requestAnimationFrame(animate)
+ draw(time)
+}
+animate()
+
+</script>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-16 03:57:10 +0000