EN
JavaScript - dynamic calculation of two lines intersection point
11 points
In this article cross point animation for this article has been presented.
xxxxxxxxxx1
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
function drawLine(context, p1, p2, color) {15
context.strokeStyle = color;16
17
context.beginPath();18
context.moveTo(p1.x, p1.y);19
context.lineTo(p2.x, p2.y);20
context.stroke();21
}22
23
function drawPoint(context, x, y, label, color, size) {24
if (color == null) {25
color = '#000';26
}27
28
if (size == null) {29
size = 5;30
}31
32
context.beginPath();33
context.fillStyle = color;34
context.arc(x, y, size, 0 * Math.PI, 2 * Math.PI);35
context.fill();36
37
if (label) {38
var textX = x;39
var textY = y - size - 3;40
41
var text = label + '=(' + x + '; ' + y + ')';42
43
context.font = 'Italic 14px Arial';44
context.fillStyle = color;45
context.textAlign = 'center';46
context.fillText(text, textX, textY);47
}48
}49
50
function calculateIntersection(p1, p2, p3, p4) {51
52
// down part of intersection point formula53
var d1 = (p1.x - p2.x) * (p3.y - p4.y); // (x1 - x2) * (y3 - y4)54
var d2 = (p1.y - p2.y) * (p3.x - p4.x); // (y1 - y2) * (x3 - x4)55
var d = (d1) - (d2);56
57
if(d == 0) {58
throw new Error('Number of intersection points is zero or infinity.');59
}60
61
// down part of intersection point formula62
var u1 = (p1.x * p2.y - p1.y * p2.x); // (x1 * y2 - y1 * x2)63
var u4 = (p3.x * p4.y - p3.y * p4.x); // (x3 * y4 - y3 * x4)64
65
var u2x = p3.x - p4.x; // (x3 - x4)66
var u3x = p1.x - p2.x; // (x1 - x2)67
var u2y = p3.y - p4.y; // (y3 - y4)68
var u3y = p1.y - p2.y; // (y1 - y2)69
70
// intersection point formula71
72
var px = (u1 * u2x - u3x * u4) / d;73
var py = (u1 * u2y - u3y * u4) / d;74
75
var p = { x: px, y: py };76
77
return p;78
}79
80
// -----------------------------------------------------------81
// Usage example82
83
var canvas = document.querySelector('#my-canvas');84
var context = canvas.getContext('2d');85
86
// line 187
var p1 = { x: 85, y: 124 }; // P1: (x1, y1)88
var p2 = { x: 260, y: 180 }; // P2: (x2, y2)89
90
// line 291
var p3 = { x: 150, y: 30 }; // P3: (x4, y4)92
var p4 = { x: 170, y: 260 }; // P4: (x4, y4)93
94
var dy = 1;95
96
setInterval(function() {97
98
if(p2.y < 0 || p2.y > canvas.height) {99
dy = -dy;100
}101
102
p2.y += dy;103
104
// -----------------------------------------------------------105
// Intersection point calculations106
107
console.log('P1=(' + p1.x + '; ' + p1.y + ')');108
console.log('P2=(' + p2.x + '; ' + p2.y + ')');109
110
console.log('P3=(' + p3.x + '; ' + p3.y + ')');111
console.log('P4=(' + p4.x + '; ' + p4.y + ')');112
113
var p = calculateIntersection(p1, p2, p3, p4); // intersection point114
115
console.log('P=(' + p.x + '; ' + p.y + ')');116
117
// -----------------------------------------------------------118
// Lines + points drawing119
120
context.clearRect(0, 0, canvas.width, canvas.height);121
console.clear();122
123
drawLine(context, p1, p2, 'red');124
drawPoint(context, p1.x, p1.y, 'P1', 'red', 5);125
drawPoint(context, p2.x, p2.y, 'P2', 'red', 5);126
127
drawLine(context, p3, p4, 'blue');128
drawPoint(context, p3.x, p3.y, 'P3', 'blue', 5);129
drawPoint(context, p4.x, p4.y, 'P4', 'blue', 5);130
131
drawPoint(context, p.x, p.y, 'P', 'green', 5);132
133
}, 10);134
135
</script>136
</body>137
</html>