EN
JavaScript - calculate intersection point of two lines for given 4 points
6 points
Intersection point formula for given two points on each line should be calculated in the following way:
Where:
L1
andL2
represent points on line 1 and line 2 calculated with linear parametric equation. Points(x1, y1)
and(x2, y2)
are located on line 1,(x3, y3)
and(x4, y4)
are located on line 2.
Using JavaScript it is possible to calculate intersection points using the above formula in the following way:
xxxxxxxxxx
1
function calculateIntersection(p1, p2, p3, p4) {
2
3
var c2x = p3.x - p4.x; // (x3 - x4)
4
var c3x = p1.x - p2.x; // (x1 - x2)
5
var c2y = p3.y - p4.y; // (y3 - y4)
6
var c3y = p1.y - p2.y; // (y1 - y2)
7
8
// down part of intersection point formula
9
var d = c3x * c2y - c3y * c2x;
10
11
if (d == 0) {
12
throw new Error('Number of intersection points is zero or infinity.');
13
}
14
15
// upper part of intersection point formula
16
var u1 = p1.x * p2.y - p1.y * p2.x; // (x1 * y2 - y1 * x2)
17
var u4 = p3.x * p4.y - p3.y * p4.x; // (x3 * y4 - y3 * x4)
18
19
// intersection point formula
20
21
var px = (u1 * c2x - c3x * u4) / d;
22
var py = (u1 * c2y - c3y * u4) / d;
23
24
var p = { x: px, y: py };
25
26
return p;
27
}
28
29
30
// Usage example:
31
32
// line 1
33
var p1 = { x: 85, y: 45 }; // P1: (x1, y1)
34
var p2 = { x: 260, y: 180 }; // P2: (x2, y2)
35
36
// line 2
37
var p3 = { x: 225, y: 75 }; // P3: (x4, y4)
38
var p4 = { x: 65, y: 260 }; // P4: (x4, y4)
39
40
var p = calculateIntersection(p1, p2, p3, p4); // intersection point
41
42
console.log('P=(' + p.x + '; ' + p.y + ')');
In this section, we can see example calculations and visualization of a cross point on the canvas.
An Animated version of this article has been presented here.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
#my-canvas { border: 1px solid gray; }
7
8
</style>
9
</head>
10
<body>
11
<canvas id="my-canvas" width="350" height="300"></canvas>
12
<script>
13
14
// -----------------------------------------------------------------------
15
// Intersection formula:
16
17
function calculateIntersection(p1, p2, p3, p4) {
18
19
var c2x = p3.x - p4.x; // (x3 - x4)
20
var c3x = p1.x - p2.x; // (x1 - x2)
21
var c2y = p3.y - p4.y; // (y3 - y4)
22
var c3y = p1.y - p2.y; // (y1 - y2)
23
24
// down part of intersection point formula
25
var d = c3x * c2y - c3y * c2x;
26
27
if (d == 0) {
28
throw new Error('Number of intersection points is zero or infinity.');
29
}
30
31
// upper part of intersection point formula
32
var u1 = p1.x * p2.y - p1.y * p2.x; // (x1 * y2 - y1 * x2)
33
var u4 = p3.x * p4.y - p3.y * p4.x; // (x3 * y4 - y3 * x4)
34
35
// intersection point formula
36
37
var px = (u1 * c2x - c3x * u4) / d;
38
var py = (u1 * c2y - c3y * u4) / d;
39
40
var p = { x: px, y: py };
41
42
return p;
43
}
44
45
46
// Usage example:
47
48
// line 1
49
var p1 = { x: 85, y: 45 }; // P1: (x1, y1)
50
var p2 = { x: 260, y: 180 }; // P2: (x2, y2)
51
52
// line 2
53
var p3 = { x: 225, y: 75 }; // P3: (x4, y4)
54
var p4 = { x: 65, y: 260 }; // P4: (x4, y4)
55
56
var p = calculateIntersection(p1, p2, p3, p4); // intersection point
57
58
console.log('P1=(' + p1.x + '; ' + p1.y + ')');
59
console.log('P2=(' + p2.x + '; ' + p2.y + ')');
60
console.log('P3=(' + p3.x + '; ' + p3.y + ')');
61
console.log('P4=(' + p4.x + '; ' + p4.y + ')');
62
63
console.log('P=(' + p.x + '; ' + p.y + ')');
64
65
66
// -----------------------------------------------------------------------
67
// Drawing results:
68
69
function drawLine(context, p1, p2, color) {
70
context.strokeStyle = color;
71
72
context.beginPath();
73
context.moveTo(p1.x, p1.y);
74
context.lineTo(p2.x, p2.y);
75
context.stroke();
76
}
77
78
// https://dirask.com/posts/JavaScript-how-to-draw-point-on-canvas-element-PpOBLD
79
//
80
function drawPoint(context, x, y, label, color, size) {
81
if (color == null) {
82
color = '#000';
83
}
84
85
if (size == null) {
86
size = 5;
87
}
88
89
// to increase smoothing for numbers with decimal part
90
var pointX = Math.round(x);
91
var pointY = Math.round(y);
92
93
context.beginPath();
94
context.fillStyle = color;
95
context.arc(pointX, pointY, size, 0 * Math.PI, 2 * Math.PI);
96
context.fill();
97
98
if (label) {
99
var textX = pointX;
100
var textY = Math.round(pointY - size - 3);
101
102
var text = label + '=(' + x + '; ' + y + ')';
103
104
context.font = 'Italic 14px Arial';
105
context.fillStyle = color;
106
context.textAlign = 'center';
107
context.fillText(text, textX, textY);
108
}
109
}
110
111
var canvas = document.querySelector('#my-canvas');
112
var context = canvas.getContext('2d');
113
114
drawLine(context, p1, p2, 'red');
115
drawPoint(context, p1.x, p1.y, 'P1', 'red', 5);
116
drawPoint(context, p2.x, p2.y, 'P2', 'red', 5);
117
118
drawLine(context, p3, p4, 'blue');
119
drawPoint(context, p3.x, p3.y, 'P3', 'blue', 5);
120
drawPoint(context, p4.x, p4.y, 'P4', 'blue', 5);
121
122
drawPoint(context, p.x, p.y, 'P', 'green', 5);
123
124
</script>
125
</body>
126
</html>