How to find the middle point of an arc slice? - javascript

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)

Related

Trigonometry calculate tilt angle from accelerometer data

I have the following Figure and the equations:
Three Axis for measuring tilt
Equations for measuring tilt
The body on the Figures is a tri-axial accelerometer sensor, which measures accelaration in meters/seconds².
The goal is to calculate the tilt of the following angles using acceleration values:
ρ: angle of the X-axis relative to the ground (orange line);
Φ: angle of the Y-axis relative to the ground (orange line);
θ: angle of the Z-axis relative to the gravity (green line).
Could someone explain how to find equations 1,2 and 3 from the figure above?
Source of the equations and figure: https://www.thierry-lequeu.fr/data/AN3461.pdf
There is another similar and more detailed source that uses the same equations, but I also could not understand how to find them: https://www.analog.com/en/app-notes/an-1057.html
I have already implemented them and it is working, I just want help to understand how to obtain the equations. Here is the code:
let pitch = Math.atan(ax / Math.sqrt((Math.pow(ay,2) + Math.pow(az,2))) );
let roll = Math.atan(ay / Math.sqrt((Math.pow(ax,2) + Math.pow(az,2))) );
let theta = Math.atan(Math.sqrt((Math.pow(ax,2) + Math.pow(ay,2))) /az);
Thanks in advance.
This is the Pythagorean theorem, finding the 2D distance between 0,0 and a point represented by the two numbers given. If we assign that to a new function it may be clearer:
distance(a, b) { return sqrt((pow(a,2) + pow(b,2))) }
Then angles are calculated by using the inverse tangent function with a distance from that function representing one side of the triangle. For example, the pitch in your question divides the x acceleration by the distance between 0,0 and the acceleration in the YZ plane.
pitch = atan(x / distance(y, z))

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

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)
.
.
.

Drawing an indifference curve that tangents a line in JSXGraph

I've started to use JSXGraph to draw a function. It should be a simple straight line (budget curve) that has a half-circle as his tangent (an indifference curve).
Furthermore the tangent should move with the line, if the line is moved.
Is this possible in JSXGraph?
Edit: The Curve and the function should look similar to this graph:
https://www.economicsonline.co.uk/Pictures2017/Grid-indifference-Basic-Equilibrium-new.png
Thanks,
Mike
Yes, it is possible with JSXGraph. One approach is to start with a point A and fix the slope s of the budget curve through A as well as the radius r of the circle line.
Doing the relatively straightforward math gives as coordinates of the center M of the circle:
M = A + r / sqrt(r*r + 1) * [-s, 1]
The equation of the circle line is
(y - M_y)^2 + (x - M_x)^2 = r^2
It follows that the indifference curve is
y = -sqrt(r^2 - (x - M_x)^2) + M_y
We take the negative square root, since we want to take the lower semicircle as indifference curve. A working example is at http://jsfiddle.net/4sg1dpq8/

Finding an eqauivalent point in a quadrilateral

I am trying to find the rough equivalent point from one quadrilateral to another.
quadrilateral equivalent point
What is a good method to find this point?
Any info in the right direction would be great.
Thanks
Let the points be [P1, P2, P3, P4] and assume they are transformed into [Q1, Q2, Q3, Q4] by means of an affine transformation of the form x -> Mx + b where M is a 2x2 matrix and b is a constant vector. The idea is to find M and apply the transformation to P to get Q.
Let v1 = P2 - P1, v2 = P3 - P1, w1 = Q2 - Q1, w2 = Q3 - Q1. Then M is the linear transformation that applies [v1, v2] onto [w1, w2]. One way to find M is by calculating the matrix product
M = S * T
where S is the 2x2 matrix whose columns are the vectors w1 and w2 and T is the inverse of the matrix whose columns are v1 and v2.
Regarding the displacement vector b, it can be calculated as
b = Q1 - M * P1
The clarification here is that all of this is correct only if the fourth points are consistent with the transformation, i.e., if
M * P4 + b = Q4
otherwise the Q-quadrilateral is not an affine transformation of the P-quadrilateral.
You can find the general barycentric coordinates of the point against the first quadrilateral, then applies the barycentric coordinates against the 2nd quadrilateral to find the "equivalent" point.
There are many different ways to compute the general barycentric coordinates for a point against a quadrilateral (or against a n-sided polygon). One of them is the Wachpress coordinates, which only works when the polygon is convex. For a convex polygon with vertices V0, V1,...Vn:
we can compute the Wachpress coordinates for point P within the polygon as
where A(a,b,c) is the signed area of triangle abc.
Then, we can compute the barycentric coordinates of P as
The equivalent point P* against the new polygon with vertices V*i (or quadrilateral in your case) can be computed as
P* = \summation(Wi * V*i) for i=0~n.

Detecting mouse courser when is close to polyline

I have a programming question with some math weight. I have a map with shapes(polylines) drown on it. I can take the screen coordinates of that shapes and translate them to map coordinates and reverse. I am capturing mouse position and moving around the map. How can I recognize if I come in proximity to another shape drown on the map while I am moving the mouse. I was thinking to create a radius of points around the mouse cursor, then constantly looping trough available shapes (I imagine I can load their coordinates in arrays) for a match. However that will be very slow I think. The point is that when I am in proximity (for example 15px) I will snap the muse position to that close shape. Any suggestions?
Now - if you really want to make it perfect - you can calculate the distance of a cursor to each line segment.
For each line segment (defined by points D and E)
Calculate line formula for segment DE in format:
Ax + By + C = 0
A = D.y - E.y
B = E.x - D.x
C = (plug in point D) = -1 * (A * D.x + B * D.y)
Now plug in your cursor position to the formula:
A * cursor.x + B * cursor.y + C = YOUR DISTANCE TO THE LINE SEGMENT
*One thing - this is distance to the unbounded line. You now want to make sure that you are between the two segment points. So make sure the angles in your cursor, D, E triangle are all < 90 degrees. A number of ways to do that, look into the dot product formula to learn a fast one.
Now if anlges are less than 90, use the distance to the line, else, use the min distance to either point of segment (D & E). Now you have a complete snap to lines functionality.
If you have every point / line segment of the shapes (which you should with the polylines), here is a possible quick and simple routine:
For each shape
Figure center of shape by averaging each constituent point (i.e. - for a pentagon, add all five point.x up, divide by 5 - do same for all point.y). Call this average shape.x and shape.y. Use distance formula to figure proximity to your mouse. (Mouse.x - Shape.x)^2 + (Mouse.y - Shape.y)^2... you don't have to take the square root of that since you are only interested in the closest shape.
Keep track of the minimum distance "squared" for each shape. The minimum is your closest shape center.
If you want snap to behavior with a maximum range, just also make sure the distance squared is < pixel distance squared.
If you want to make it very effiecient, the shape centers do not need to be constantly refigured, just calculated once. The center will scale and translate the same as any other point if you are converting between screen space and other coordinates as you mentioned.

Categories