Finding third point in a triangle using JavaScript
Ok, so I need to figure out in JavaScript how to plot the third point in the triangle. See the diagram below.
A and B will be randomized points (can be positive or negative depending on where they fall from the origin of 0,0.)
thus A and B are known points (x and y).
I've already figured out how to build C based on A and B.
Distance between C and D I want to control. for example, I want to say, "The distance between C and D is now 20px ... where is D?"
So, I assume, for example, that we can say that the distance between C&D will be 20px. This means I have CD and CB, but not DB. I also know C (x, y) and B (x, y).
I need to find D now ... I am not a math mind, so please explain it to me as if I am 5. I have searched for it many times, tried a few examples and I am still lost ... For example: I have seen some equations with specified phi .. what is phi? How to use phi in JavaScript conditions, etc.
Summary:
A(x,y) is known (randomized)
B(x,y) is known (randomized)
C(x,y) is known (midpoint of AB)
CB is known (using distance formula)
CD = 20 pixels (or whatever I set it to).
DB = ???
D(x,y) = ???
Here is what I have so far, but this is probably wrong ..
var Aeh = {x:50, y:75};
var Bee = {x:300, y:175};
var Cee = {x:0, y:0};
var Dee = {x:0, y:0};
window.onload = function(){
refreshPoints();
solveForC();
}
function refreshPoints(){
TweenLite.set("#pointA", {x:Aeh.x, y:Aeh.y});
TweenLite.set("#pointB", {x:Bee.x, y:Bee.y});
TweenLite.set("#pointC", {x:Cee.x, y:Cee.y});
TweenLite.set("#pointD", {x:Dee.x, y:Dee.y});
}
function solveForC() {
Cee.x = (Bee.x + Aeh.x)/2;
Cee.y = (Bee.y + Aeh.y)/2;
refreshPoints();
solveForD();
}
function solveForD() {
// Dee.x = AB * Cos(Φ) + x_1
// Dee.y = AB * Sin(Φ) + y_1
Dee.x = (Cee.x+Bee.x/2) * Math.cos((1 + Math.sqrt(5)) / 2) + Cee.x;
Dee.y = (Cee.y+Bee.y/2) * Math.sin((1 + Math.sqrt(5)) / 2) + Cee.y;
refreshPoints();
}
source to share
You have A, B and C (midpoint), you know that the distance from C to D is set (say at 20) and the line from C to D is at right angles to the line from A to B. You can find two solutions for D using this. The easiest way to understand is to find the angle of a line from A to B and use this function to calculate D.
var angleAB = Math.atan2(B.y - A.y, B.x - A.x);
// to get the angle of the line from C to D, add 90 degrees
// in radians, that is Math.PI / 2
var angleCD = angleAB + Math.PI / 2;
// now you can calculate one of D solutions
// the 20 represents your distance from C to D, and can be changed if desired.
DeeOne.x = C.x + 20 * Math.cos(angleCD);
DeeOne.y = C.y + 20 * Math.sin(angleCD);
// a second solution can be found by going in the other direction from C
DeeTwo.x = C.x - 20 * Math.cos(angleCD);
DeeTwo.y = C.x - 20 * Math.sin(angleCD);
There may be ways to cut out some of these calculations if all you need is a certain distance (etc.) from the chart. Hope this helps.
source to share
A slightly faster and more accurate solution.
The function finds the point dist
of the mid-line A
, B
.
D
remains of the line AB
if left = 1
(default) else D
is to the right of the line ifleft = -1
function findD(A, B, dist, left = 1){ // if left = 1 the D is left of the line AB
const nx = B.x - A.x;
const ny = B.y - A.y;
dist /= Math.sqrt(nx * nx + ny * ny) * left;
return {
x : A.x + nx / 2 - ny * dist,
y : A.y + ny / 2 + nx * dist
}
}
You might be tempted to replace Math.sqrt(nx * nx + ny * ny)
with Math.hypot(nx,ny)
and keep 2 multiplications and addition. But hypot
painfully slow. When using a function sqrt
doing 10 million per second, when I use hypot
that goes down to 2 million. Another answer was also timed (optimized to be fair) and it peaked at 3.4 million decisions per second.
For javascript using atan2
both and sin
and cos
, there isn't that much, since the 64-bit double precision float makes the error introduced by these functions insignificant, in the range of ± 1e-14 * the length of the longest but the error can be reduced (slightly) if you avoid these functions.
source to share