javascript - Plot 4 points based on the distance between them?

Question

I have the distance between 4 points. I want to plot this data on a 2D grid.

I have tried taking one point and placing it on (0,0) to start. Then I can create circles that represent possible locations for the the three other points. Once I get to that point I can lock in an arbitrary position for point two. Do the same possible locations and get to two possible location for point 3. I can just pick one and then figure out four. I know it's possible, I can get to the answer on paper but I wonder if there is an easier way than how I am going about it that others have already figured out.

If someone could point me in the right direction or point me towards some reading that discusses the formulas involved in determining these points that would be great.

Thanks!

What I've tried:

points = [A, B, C, D] //unknown

angles = [AoA, AoB, AoC, AoD]

distances = [AB, AC, AD, BC, BD, CD] //known

A.x = 0 //seeded value
A.y = 0 //seeded value
B.x = AB
B.y = A.y
C.x = (AB² - BC² + AC²) / (2 * AB) //assume positive answer
C.y = Math.sqrt(BC² - (B.x - C.x)²) - B.y
D.x = ???
D.y = ???

Answer 1

You will essentially have a system of six equations:

AB^2 = (A.x - B.x)^2 + (A.y - B.y)^2  EQ[1]
AC^2 = (A.x - C.x)^2 + (A.y - C.y)^2  EQ[2]
AD^2 = (A.x - D.x)^2 + (A.y - D.y)^2  EQ[3]
BC^2 = (B.x - C.x)^2 + (B.y - C.y)^2  EQ[4]
BD^2 = (B.x - D.x)^2 + (B.y - D.y)^2  EQ[5]
CD^2 = (C.x - D.x)^2 + (C.y - D.y)^2  EQ[6]

Your problem is essentially solving these for the 8 variables Ax,Ay,Bx,By,Cx,Cy,Dx,Dy and fitting them to a 2D graph. This allows for a whole range of solutions which collapses depending on what values are chosen. What you have here is a system of non-linear equations. There are many different methods to solve these types of equations: computers e.g. Mathematica, Matlab, Python, etc., by hand you can use a Jacobian, or by algebraically manipulating the variables.

Your visualization of circles is a good place to start. From your first point A, you will have four concentric circles, and then from each point on each circle four more concentric circles. The problem is the expanded version of this.

Your advantage in this situation is that you get to choose the two initial values. Hopefully this points you in the right direction. I'm not sure what method you'd like to use but this is the type of problem you are dealing with.

And here is a ~pretty picture:

Your solutions will propagate along the lines of these circles, and their intersection points.

As you can see you will not have any definite answers for each point until you make decisions along the way but you can see how as you choose A, then choose B related to A, you'll have two choices for C, where circles of radius BC and circles of radius AC intersect. Then you will again have two choices for D, where the three circles: from A with radius AD, from B with radius BD, and from C with radius CD intersect.

You could set up your equations in a program to make some arbitrary decision for the first point as you have for A = (0,0) and B = (AB,0), something like input a starting point, the second point is always +AB in the x direction. Then solve to find the two roots of the equation which defines the circles of radius BC from B and of radius AC from A. Once C is defined do the same for the roots of the equations of those three circles.