path: root/public/assets/test/intersect3.html

<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>