1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/index.css">
<title>Physics for Games</title>
<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<h1>Physics for Games</h1>
</header>
<main>
<nav>
<ul class="outer-tree">
<li><a href="/">Introduction</a></li>
<li>
<span>🏀<span>2D</span></span>
<ul class="inner-tree">
<li><label>Rigidbody</label></li>
<li><a href="/2d/_rigidbody/part_1.html">Linear Forces</a></li>
<li><a href="/2d/_rigidbody/part_2.html">Rotational Forces</a></li>
<li><a href="/2d/_rigidbody/part_3.html">Collision Forces</a></li>
<li><label>Collisions</label></li>
<li><a href="/2d/_collisions/circle_line.html">Circle-Line</a></li>
<li><a href="/2d/_collisions/rectangle_line.html">Rectangle-Line</a></li>
<li><a href="/2d/_collisions/rectangle_rectangle.html">Rectangle-Rectangle</a></li>
<li><a href="/2d/_collisions/pill_line.html">Pill-Line</a></li>
<li><a href="/2d/_collisions/pill_pill.html">Pill-Pill</a></li>
<li><a href="/2d/_collisions/polygon_polygon.html">Polygon-Polygon</a></li>
</ul>
</li>
<li>
<span>🌠<span>3D</span></span>
<ul class="inner-tree">
</ul>
</li>
<li>
<span>🔧<span>WebAssembly</span></span>
<ul class="inner-tree">
<li><a href="/intro/intro.html">Introduction</a></li>
</ul>
</li>
<li>
<span>🛈<span>About</span></span>
<ul class="inner-tree">
<li><a href="/roadmap.html">Roadmap</a></li>
</ul>
</li>
</ul>
</nav>
<script src="./rectangle_line/dist/output.js"></script>
<script>
window.onload = function() {
var lPlayElement = document.getElementById('gl_canvas_play'),
lStopElement = document.getElementById('gl_canvas_stop');
lPlayElement.addEventListener('click', function() {
lPlayElement.style.display = 'none';
lStopElement.style.display = 'block';
});
lStopElement.addEventListener('click', function() {
lStopElement.style.display = 'none';
lPlayElement.style.display = 'block';
});
}
</script>
<article>
<h1>Rectangle intersection with a Line Segment</h1>
<section>
<h2>Algorithm</h2>
<p>
For each line segment that your rectangle could be intersecting with,
do the following:
<ol>
<li>
For each corner of your rectangle, check if the distance from that point to the line is less than some <i>epsilon</i>, where <i>epsilon</i> is a reasonable small number (usually a 1 or 2 units, depending on the size of your lines).
</li>
<li>
To check each point, use the "distance from point to line segment" formula, which can be found <a href="https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line">here</a> (I will not derive it just yet)
</li>
<li>
If a collision is found, we have all of the information required to solve the collision:
<ul>
<li>
<b>Collision Normal</b>: This is the perpendicular to the line segment, which can be found by:
<code>
<pre>
Vector2 getNormalToLineSegment(LineSegment* segment) {
Vector2 direction = segment->end - segment->start;
return *Vector2 { -direction.y, direction.x }).normalize();
}
</pre>
</code>
</li>
<li>
<b>First Point of Application</b>: Get the vector from the center of the rectangle (most like your position) to the corner which intersected.
</li>
<li>
<b>Second Point of Application</b>: Get vector from center of line to the corner which intersected.
</li>
</ul>
</li>
</ol>
</p>
</section>
<section>
<h2>
Live Example
</h2>
<div class="opengl_canvas_container">
<canvas id="gl_canvas" width="640" height="480"></canvas>
<button id="gl_canvas_play" class="play_button">
Play
</button>
<button id="gl_canvas_stop" class="stop_button">
Stop
</button>
</div>
<footer id="references">
<h2>References</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line">Distance from Point to Line</a></li>
</ul>
</footer>
</section>
</article>
</main>
</body>
</html>
|
