Drawing rounded/movable area over image - reactjs

I would like to draw rounded area and points over a photo.
I decided to do it with a svg which is simplier to make it resizable and movable.
But, from a list of points I do not have an area which go through all points.
I used the Quadratic Bezier CurveTo, but I am not able to find the mathematic formula to give the the "Q parameter" the values to calculate the control point to go from A to C passing by B.
For the moment, when the angle is too high, the line "turn" before the point, but i would like to go touch the point.

There is infinite number of curves through point B.
Let define that B lies on the curve at parameter t=1/2
Quadratic curve with unknown control point Q has equation
P(t) = A*(1-t)^2 + 2*Q*t*(1-t) + C*t^2
Substiting point B and t=1/2, we have
B = A/4 + Q/2 + C/4
Q = 2*B - A/2 - C/2
or in coordinates
Q.x = 2*B.x - A.x/2 - C.x/2
Q.y = 2*B.y - A.y/2 - C.y/2
This very simple method should work well when B is near symmetrical relative to A and C
Q.x = 2*7 - 0 - 20/2 = 4
Q.y = 2*10 - 0 - 0 = 20

Related

How to calculate coordinates of N equidistant points along a straight line between 2 coordinates on a map?

I have two points on a map -
val point1 : LatLng(13.3016139,77.4219107)
val point2 : LatLng(14.1788932,77.7613413)
I want to calculate and find 100 equidistant points along a straight line between these two coordinates. How do I do that?
ps. I'm sure this has been asked before, I just can't find it.
Equidistant, and more importantly, straight by which projection?
usually, to find a distance in cartesian space one would use something like the
Haversine formula to find a value, as previously answered in stack answer: How to convert latitude or longitude to meters?
As for the equidistant part, once you have the distance decided as per your taste of the shape and radius of Earth at given points, a simple division will do. .
python 3.7
>>> dist = 5427 #just some number
>>> nbr_o_points = 101
>>> points = [(dist/nbr_o_points)*(i+1) for i in range(nbr_o_points)]
>>> [f'{p:.2f}' for p in points]
['53.73', '107.47', '161.20',..., '5319.53', '5373.27', '5427.00']
Now to transfer these distances from point a to b back onto the desired projection... This is not part of your question... Stack - how-to-determine-vector-between-two-lat-lon-points might help.
take the vector and multiply by the dists in points in order to get your coordinates.
This is how I solved it -
fun findEquidistantPoints(latLng1: LatLng, latLng2: LatLng, pointCount: Int): ArrayList<LatLng> {
if (pointCount < 0)
throw IllegalArgumentException("PointCount cannot be less than 0")
val points = ArrayList<LatLng>()
val displacement = latLng1.displacementFromInMeters(latLng2)
val distanceBetweenPoints = displacement / (pointCount + 1)
for (i in 1..pointCount) {
val t = (distanceBetweenPoints * i) / displacement
points.add(LatLng(
(1 - t) * latLng1.latitude + t * latLng2.latitude,
(1 - t) * latLng1.longitude + t * latLng2.longitude
))
}
return points
}

How can I draw a circular arc with three points in a StreamGeometry

I'm using a StreamGeometry object to create an complete figure. The figure is a series of lines and arcs. The arcs are all circular defined by a start point, end point, and a middle point that the arc also passes through. How can I convert that into what ArcTo requires. I've been searching for a solution all morning. I will try to work the math out myself.
1) Find radius of circle with plain geometry
Let's A, B, C - three points given (B is middle point of arc), M is middle point of AC chord, then
AM * CM = BM * B'M, where B' is point at another end of circle diameter, due to "intersecting chords theorem".
AM=CM=AC/2, BM+B'M = 2R, so we can find circle radius R
(2R-BM) * BM = AM^2
2R-BM = AM^2/BM
R = (BM^2+AM^2)/(2*BM)
2) Now it is possible to find circle center with vector geometry
O = B + uBM * R, where uBM = BM/|BM| is unit vector
3) size parameter of ArcTo set to (R, R)
4) rotationAngle set to atan2(OA x OC, OA * OC) (crossproduct and scalar product of OA and OC vectors)
5) set the rest of ArcTo parameters as needed

Ansi C re-evaluating of Y coordinates

Im trying to do a graph from evalued math function and this is last think I need to do. I have graph with limit coordinates -250:-250 left down and 250:250 right up. I have Y-limit function, which is defined as -10:10, but it could be user redefined and if it is redefined, I need to calculate new coordinates.
I have now field of y-coordinates with 20000 values and each of is multiply by:
ratioY = 25 / (fabs( up-limit - down-limit ) / 20) which will make coordinates adapt for new Y-limit (if limit is -5:5, graph looks 2x bigger), this works good, but now isnt graph exactly where it should be (see pictures). Simply 25 is multiplied for postscript coordinates and (up-limit - down-limit) / 20 is ratio for "zooming" Y coordinates. This works fine.
Now Im trying to "move coordinates" which will subtracted from revaluated value:
ycoor = (ycoor * ratioY) - move-coorY ;.
Now I have something like this:
move-coorY = 25* ( ( up-limit - down-limit) /2 );
and it doesnt work correctly. I need to do sin(0) start from 0.
This is a correct graph which is -10:10
(source: matematika.cz)
This is a bad graph which is -5:10
(source: matematika.cz)
Maybe its easier not to do this with fixed numbers (like your ratioY) but with two different coordinate systems. Physical coordinates are in your problem domain, i.e. they are the real values of your sine curves. Logical coordinates refer to the device, in your case they are the point values in Postscript, but they might be pixels on a HTML canvas or whatever.
I'll denote the physical coordinates of the first axis with a small x and the corresponding logical coordinate with a capital X. In each coordinate system we have:
Lower bound: x_min, X_max
Upper bound: x_max, X_max
Range: dx = x_max - x_min
dX = X_max - X_min
Then you can calculate your logical coordinates from the physical ones:
X(x) = X_min + (x - x_min) * dX / dx
This also works vice versa, which is not an issue for Postscript files, but max be useful for an intractive canvas where a mouse click should yield the physical coordinates.
x(X) = x_min + (X - X_min) * dx / dX
In your case, the ratio or scale factor is dX / dx, which you can calculate once for each axis. Let's plot the first point with y == 0 in your first graph:
y_min = -10
y_max = 10
dy = 20
Y_min = -250
Y_max = 250
dX = 500
Y(0) = -250 + (0 - (-10)) * 500 / 20
= -250 + 10 * 500 / 20
= 0
In the second graph, the logical coordinates are the same, but:
y_min = -5
y_max = 10
dy = 15
Y(0) = -250 + (0 - (-5)) * 500 / 15
= -250 + 5 * 500 / 15
= -83.3333
If you change the range of your graph, e.g. from (-10, 10) to (-5, 10), just adjust the physical coordinates. If you resize your graph, change the logical coordinates. (Also, calculating the point in the graph is the same as calculating the position of the tick mark for the axis. Strangely, you got the tick marks right, but not your graph. I think your problem was to account for the non-zero lower bound in both graph and curve data.)
Also, it's probably better to re-evaluate the logical coordinates when printing instead of transfroming them from a previous plot. You can do that on the fly, so that you only need to keep the physical data in an array.
(And lastly, I'll admit that I'm not entirely sure these two kinds of cooirdinates are called physical and logical. I know these terms are used, but it may be the other way round or they might even mean sonething different altogether.)
My friend did a well yob for me and programmed this...
double zeroPosition(double startY, double endY){
double range = endY - startY;
double topSize = endY / range;
return 250.0 - 500 * topSize;
}
This will calculate position of zero, which I just add to my Y position with ratio and It works exactly how I need!
But thanks M Oehm ;)

increasing the length of a line in programming

I have a triangle as shown in the picture with A(109,239) ,B(182,234) and C(140,157).
I am using xlib programming to get this.
On a mouse click event at a point inside the triangle , i find the nearest vertex from that point and then i want to extent the line outside the triangle for a finitely large length.
Can any one give an idea how can i do this. What i think is we have to add some value ex a,b to B(x+a,y+b) , but i am not sure how will i calculate the value of a,b ?
If you know 2 points p0 and p1, you can calculate y for any x:
y = (x - x0) * (y1 - y0) / (x1 - x0) + y0
So in your case those 2 points would be mouse click point and the vertex point.
Edit
You could select x that is on opposite side of mouse click.
x = vertexX + (vertexX - mouseX);

2d trilateration

I am writing some code to participate in an AI challenge. The main objective for the AI challenge is to take a simulated robot and navigate it through a maze to a destination zone. The secondary objective which is optional is to find a recharger placed in the maze at an unknown location. This is all done in a 2D grid.
My program can call a method to get a distance measurement from the recharger. So using trilateration I should be able to locate the recharger by calling this method, recording my ai's current position and the distance the recharger is away from that point 3 times over.
I found this example of trilateration on wikipedia http://en.wikipedia.org/wiki/Trilateration but this applies to a 3d space. I'm only dealing with a 2D space. Also I don't understand how to use the formula shown in Wikipedia, searching the web for a working example with numbers plugged in and boiling down to the final coordinates is scarce with Google searches.
I'm not a math major; I am just an enthusiast exploring AI problems.
An explanation and step by step example of how to calculate the problem is what I need as mathematics are not my strong point. Below is some sample data:
Point 1: x=39, y=28, distance=8
Point 2: x=13, y=39, distance=11
Point 3: x=16, y=40, distance=8
Any example using my sample data would be greatly appreciated. The programming to this will be very straight forward once I can wrap my head around the mathematics.
As the Wikipedia trilateriation article describes, you compute (x,y) coordinates by successively calculating: ex, i, ey, d, j, x, y. You have to be familiar with vector notation, so, for example, ex = (P2 - P1) / ‖P2 - P1‖ means:
ex,x = (P2x - P1x) / sqrt((P2x - P1x)2 + (P2y - P1y)2)
ex,y = (P2y - P1y) / sqrt((P2x - P1x)2 + (P2y - P1y)2)
Your data is:
P1 = (39, 28); r1 = 8
P2 = (13, 39); r2 = 11
P3 = (16, 40); r3 = 8
The calculation steps are:
ex = (P2 - P1) / ‖P2 - P1‖
i = ex(P3 - P1)
ey = (P3 - P1 - i · ex) / ‖P3 - P1 - i · ex‖
d = ‖P2 - P1‖
j = ey(P3 - P1)
x = (r12 - r22 + d2) / 2d
y = (r12 - r32 + i2 + j2) / 2j - ix / j

Resources