# GameDev - Intersection of Two Lines (intersection of two lines)

## Video GameDev - Intersection of Two Lines (intersection of two lines)

From two straight lines (or vector) in a 2D plane, we can find their intersections to calculate the angle of reflection and direction of travel.

View Demo.

# Create equations straight line from the segment

I have two points A (x1, y1) and B (x2, y2) form a straight line, to create a linear equation from these two points, we need to calculate the inclination of the line (slope) by the formula:

a = (y2 - y1) / (x2 - x1)

Replace x2, y2 with two variables x, y:

a = (y - y1) / (x - x1)
=> y - y1 = a (x - x1)

Or:
y = ax + (y1 - AX1)
Set b = y1 - AX1, we have:

y = ax + b

# Calculate the intersection of two lines

We have two equations straight line

(1): y = a1x + b1
(2): y = a2x + b2

We can calculate the intersection of them by finding the intersection of x before:

a1x + b1 + b2 = a2x;

=> X (a1 - a2) = b2 - b1
=> x = (b2 - b1) / (a1 - a2)

Once you have x, we would like to (1) or (2) to calculate y.
To check two intersecting straight lines can not we just check point {x, y} of both line segment or not .
Also we need to rule out cases of two parallel lines or overlap, then their value will equal slope.

# Illustrations with HTML5 Canvas

``` `<Html>``<Head>``  ``<Script>`` ``/ ***************** *************** Circle /` `function ` `Circle (x, y) {``    ``this ``.x = x;``    ``this ``.y = y;``    ``this ``.radius = 5;``}` `Circle.prototype.draw = ``function ``(context) {``    ``context.beginPath ();``    ``context.fillStyle = ``"black" ``;``    ``context.arc ( ``this ``.x, ``this ``.y, ``this ``.radius, 0, Math.PI * 2, ``true ``);``    ``context.closePath ();``    ``context.fill ();``}``Circle.prototype.setPosition = ``function ``(x, y) {``    ``this ``.x = x + ``this ``.radius;``    ``this ``.y = y + ``this ``.radius;``}``Circle.prototype.contains = ``function ``(x, y) {``    ``var ` `dx = ``this ``.x - x;``    ``var ` `dy = ``this ``.y - y;` `    ``return ` `Math.sqrt (dx * dx + dy * dy) <= ``this ``.radius;``}` `/ ***************** *************** Line /` `function ` `Line (x1, y1, x2, y2, color, hasHandles) {``    ``this ``.color = color;``    ``this ``.p1 = ``new ` `Circle (x1, y1,5);``    ``this ``.p2 = ``new ` `Circle (x2, y2,5);``    ``this ``.hasHandles = hasHandles;``}``Line.prototype.captureMouse = ``function ``(x, y) {``    ``if ``( ``this ``.p1.contains (x, y))``        ``return ` `this ``.p1;``    ``if ``( ``this ``.p2.contains (x, y))``        ``return ` `this ``.p2;``}``Line.prototype.getVector = ``function ``() {``    ``var ` `x = ``this ``.p2.x- ``this ``.p1.x;``    ``var ` `y = ``this ``.p2.y- ``this ``.p1.y;` `    ``return ` `{``        ``x: x,``        ``y: y,``        ``root: ``this ``.p1,``        ``length: Math.sqrt (x * x + y * y)``    ``};``}``Line.prototype.draw = ``function ``(context) {` `    ``context.beginPath ();``    ``context.strokeStyle = ``this ``.color;``    ``context.lineWidth = ``this ``.width;` `    ``context.moveTo ( ``this ``.p1.x, ``this ``.p1.y);``    ``context.lineTo ( ``this ``.p2.x, ``this ``.p2.y);``    ``context.closePath ();``    ``context.stroke ();` `    ``if ``( ``this ``.hasHandles) {``        ``this ``.p1.draw (context);``        ``this ``.p2.draw (context);``    ``}``}`` ``/ Main ************** ************* /` `var ` `_canvas;``var ` `_context;``var ` `_movingShape = ``false ``;``var ` `_line1;``var ` `_line2;` `function ` `canvas_mousedown (e) {` `    ``var ` `x = e.pageX - _canvas.offsetLeft;``    ``var ` `y = e.pageY - _canvas.offsetTop;` `    ``_movingShape = _line1.captureMouse (x, y);``    ``if ``(! _movingShape)``        ``_movingShape = _line2.captureMouse (x, y);``}` `function ` `canvas_mousemove (e) {``    ``var ` `x = e.pageX - _canvas.offsetLeft;``    ``var ` `y = e.pageY - _canvas.offsetTop;` `    ``if ` `(_movingShape) {``        ``_movingShape.setPosition (x, y);``        ``update ();``    ``}``}` `function ` `canvas_mouseup (e) {``    ``_movingShape = ``null ``;``}` `function ` `clear () {``    ``_context.clearRect (0, 0, _canvas.width, _canvas.height);``}``function ` `update () {` `    ``var ` `a1 = (_line1.p2.y-_line1.p1.y) / (_ line1.p2.x-_line1.p1.x);``    ``var ` `b1 = _line1.p2.y - a1 * _line1.p2.x;` `    ``var ` `a2 = (_line2.p2.y-_line2.p1.y) / (_ line2.p2.x-_line2.p1.x);``    ``var ` `b2 = _line2.p2.y - a2 * _line2.p2.x;` `    ``// Find intersection point``    ``// Y = a1x + b1``    ``// Y = a2x + b2``    ``// A1x + b1 + b2 = a2x``    ``// (A1 - a2) x = b2 - b1``    ``var ` `x = (b2 - b1) / (a1 - a2);``    ``var ` `y = a1 * x + b1;` `    ``// Draw` `    ``clear ();` `    ``_line1.draw (_context);``    ``_line2.draw (_context);` `    ``_context.fillText (genFormula (a1, b1), 10,20);``    ``_context.fillText (genFormula (a2, b2), 10.40);` `    ``_context.beginPath ();``    ``_context.fillStyle = ``"black" ``;``    ``_context.arc (x, y, 10, 0, Math.PI * 2, ``true ``);``    ``_context.closePath ();``    ``_context.fill ();``}``function ` `genFormula (a, b)``{``    ``a = floor (a);``    ``b = floor (b);``    ``var ` `s = ``"y =" ``;``    ``if ``(a! = 0)``        ``s + = (a == 1? ``'' ``: a) + ``"x" ``;``    ``if ``(b! = 0)``        ``s + = (b> 0? (a == 0? ``"" ``: ``"+" ``): ``"" ``) + b;``    ``return ` `s;``}``function ` `floor (number)``{``    ``return ` `Math.floor (number * 10) / 10;``}` `function ` `distance (x, y, xx, yy) {``    ``var ` `dx = xx-x;``    ``var ` `dy = yy-y;``    ``return ` `Math.sqrt (dx * dx + dy * dy);``}` `window.onload = ``function ``() {``    ``_canvas = document.getElementById ( ``"canvas" ``);``    ``_context = _canvas.getContext ( ``"2d" ``);``    ``_context.font = ``"16px Arial" ``;``    ``_context.lineWidth = 3;` `    ``_line1 = ``new ` `Line (100, 100, 150, 150, ``"red" ``, ``true ``);``    ``_line2 = ``new ` `Line (100, 200, 300, 200, ``"green" ``, ``true ``);``    ``_canvas.onmousedown = canvas_mousedown;``    ``_canvas.onmousemove = canvas_mousemove;``    ``_canvas.onmouseup = canvas_mouseup;` `    ``update ();` `}``  ``</ Script>``</ Head>``<Body>``<Canvas id = ``"canvas" ` `width = ``"400px" ` `height = ``"400px" ` `style = ``"border: 1px solid" ``> </ canvas>``</ Body>``</ Html>`
YinYangIt's Blog
```