Building an arc (an array of segments) at three points - javascript

I have the coordinates of three points. I want to build an arc on them
An arc (non-ideal) consists of segments (let 10 segments).
I need having the coordinates of three points to get an array of arc segments at these points
How can I do this?

A way, definitely no the shortest way, could be the following.
You have 3 point, thus you can write the circonference equation(x2+y2+ax+by+c=0) (for three points pass only a circonference). This is a matter of solving a system of 3 equations in three unknowns. Now given the 2 outermost points,(x1,y1) and (x2,y2), you can calculate the cord length with Pitagora theorem:
cord = √(y2-y1)2+(x2-x1)2
Now use the theorem of the cord to find the angle in the center that I call alpha thus:
sin(alpha/2) = cord/2*radius
Having the circonference equation is easy to calculate the radius.
Now that you have alpha you can split the angle in 20 parts. For example if alpha is 160 you get Beta=8
Now you can do:
P0 x1,y1
P1 cos(180-8),sin(180-8)
P2 cos(180-16),sin(180-16)
.
.
.
and so on until to 160 in my example.
But Attention! Those above are relative coordinates, relative to the center of the circonference. Called the center (c1,c2) the coordinates will be:
P0 x1,y1
P1 c1+cos(180-8),c2+sen(180-8)
P2 c1+cos(180-16),c2+sin(180-16)
.
.
.

Related

Question about how to get coordinate point intersect of 2 line in draw i.o

My question is how do get a coordinate point intersect of 2 line in draw i.o
I need a function to resolve this problem in javascript (get coordinate of point only)
Example:
With the start and end points of both of those lines, you can calculate their slopes. Since you have at least one point you can then compute the slope-intercept form of the lines and set the y's equal to each other to calculate the intersection points' Cartesian coordinates.

How to find the last point coordinate of a triangle based on having two point and all the distances in javascript?

I am trying to figure out the (x,y) position of the s2 node from the given example.
1
With trilateration I was able to calculate the first node s1 position based on the fixed anchors. Now I am trying to calculate the s2 node possible coordinates, what I have is:
Coordinates of two points:
A2:{y:0,x:4}
S1:{y:2,x:2}
Distances:
A2-S2: 2
S1-S2: 2
A2-S1: 2
Is there a way to calculate the possible positions of the s2 node based on this data in JavaScript? This should work on any type of triangle.
Update:
I think I found a solution, I can threat the 2 known position as the centre of two circle and the distances to the unknown point as radius, than I have to calculate the intersection of the two circle to get the possible coordinates.
A JavaScript function that returns the x,y points of intersection between two circles?
You have two known points A and B, unknown point C and distances dAC and dBC (dAB is useless). So you can build equation system
(C.X - A.X)^2 + (C.Y - A.Y)^2 = dAC^2
(C.X - B.X)^2 + (C.Y - B.Y)^2 = dAB^2
and solve it for C.X and C.Y (there are possible two, one and zero solutions).
Note that it is worth to shift coordinates by (-A.X, -B.X) to get simpler equations and solution, then add (A.X, B.X) to the solution coordinates

Projecting a point onto a path

Suppose I have an ordered array containing points (lat, lon) describing a path, and I also have a point (lat, lon) describing my current location.
How can I project the point onto the path (and place the point in the appropriate place in the array)?
What I tried is just simply by searching for the nearest two points and assume it's in the middle of them. It's a good guess, but sometimes fails.
What would be a good way of doing this?
I see it like this:
p0,p1 are path line segment endpoints
p is your position
q' closest point on line in 3D cartessian
q is q' corrected by spherical projection
So:
convert points to 3D cartessian coordinates
compute perpendicular distance from point and line
q'=p0+(dot(p-p0,p1-p0)*(p1-p0)/(|p-p0|*|p1-p0|))
perpendicular_distance = |p-q'|
find segment with smallest perpendicular_distance
and use only it for the rest of bullets
compute q
If you use sphere instead of ellipsoid then you already know the radius if not then either compute the radius algebraically or use average:
r=0.5*(|p0-(0,0,0)|+|p1-(0,0,0)|)
assuming (0,0,0) is Earth's center. You can also be more precise if you weight by position:
w=|q'-p0|/|p1-p0|
r=(1-w)*|p0-(0,0,0)|+w*|p1-(0,0,0)|
now just correct the position of q'
q=q'*r/|q'|
set vector q' as q with size r if it is not obvious enough. Also |p0-(0,0,0)|=|p0| obviously but I wanted to be sure you get how I got it ...
convert q from Cartesian to spherical coordinates
[Notes]
|a| is size of vector a done like: |a|=sqrt(ax*ax+ay*ay+az*az)
dot(a,b) is dot product of vectors a,b done like: dot(a,b)=(a.b)=ax*bx+ay*by+az*bz
if your path is not too complex shaped then you can use binary search to find the closest segment.
For distance comparison you do not need the sqrt ...
Find the path segment which is closest to the current position.
Distance from point to a line

Interconnected curved lines

Given a series of JSON co-ordinates typically in the format:
{from: {x:0, y:0}, to: {x:0, y:10}, ...}
I would like to draw a series of straight dotted paths which are connected with simple, fixed radius rounded corners. I have been looking at Slope Intercept Form to calculate the points along the straight line but I am a little perplexed as to the approach for calcualting the points along the (Bezier?) curves.
e.g. I want to draw curves between p1 and p2 and p3 and p4. Despite what the poor mockup might imply I am happy for the corners to be a fixed radius e.g. 10px
I would like to abstract out the drawing logic and therefore am seeking a generalised approach to returning a JavaScript point array which I can then render in a number of ways (hence I am avoiding using any inbuilt functions provided by SVG, Canvas etc).
What you want is a cubic bezier curve.
http://www.blackpawn.com/texts/splines/
Look at the first applet on this page. If A is p1, D is p2, the direction A-B is line 1's angle and the direction C-D is line 2's angle you can see how this gives you the properties you need - it starts at angle 1 and ends at angle 2 and is flush with the points.
So, to get your points C and D, one way to do this would be to take the line segment 1, copy it, place it starting at p1 - and say where the new line ends is B, and similar with line segment 2 and p2 for D. (And you could do things like have a factor that multiplies into the copied line segments' distance to make the curves stick out more or less... etc)
Then just do the math :)
http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves
And once you have your equation for the curve, step through it with a delta t of the desired precision (e.g. every 0.1 of t, every 0.01...) and spit out every pair of points on the curve as a line segment.

How to find the middle point of an arc slice?

I have a slice of a circle (that is made of moveTo,lineTo,arc,etc) and need to find the middle point of the slice.
What is the math behind finding the point shown in the image below?
It looks "centroid" of the sector to me.
The co-ordinates of it (with x axis along the radius passing through the centroid and origin at the centre)
centroidX = (4/3)r(sin(A)/A)
centroidY = 0
where 'A' is the angle made by the arc at the centre(in radians) and 'r' is the radius.
EDIT:
This is sort of a formula which can be easily derived.
Geometric Centroid of any shape is average(weighted mean) of all it's points.
In physics, centroid(AKA centre of mass) of an object is the point at which the mass of the whole object can be assumed to be concentrated(eg, the object can be balanced on a needle at the centroid). There are formulae which can be directly used for regular shapes. For irregular shapes, it is calculated by integration.
It's basic logic is adding x co-ordinates of all the points and dividing by total no. of points, which gives x co-ordinate of the centroid and similar for y co-ordinate.
As the points on a shape are not discrete, integration is used.
Let C is center point, P1 and P2 are points at circumference, and slice angle is smaller then Pi (180 deg).
One possibility:
X = C + Radius/2 * UnitVector(P1 + P2 - 2*C)
Another:
X = 1/3 * (P1 + P2 + C)
(It depends on exact requirements)

Categories