I want to get all the vertices from an ARC. I have all the data (for ex : start point, end point, start angle, end angle, radius) which will used to draw an arc but my need is I have to generate all the vertices from the arc data.
I have already tried with one or two algorithm but I failed to get the exact vertices from an arc data.
I used Bresenham's algorithm but I failed.
Right now I am using below code but its not working ..
double theta = 2 * 3.1415926 / 100;
double c = Math.cos(theta);
double s = Math.sin(theta);
double t;
double x = ((ArcTo) element).getRadius();//we start at angle = 0
double y = 0;
for(int ii = 0; ii < 100; ii++) {
coordinates.add(new Coordinate(x + element.getCenterPoint().getX(), y + element.getCenterPoint().getY()));//output vertex
//apply the rotation matrix
t = x;
x = c * x - s * y;
y = s * t + c * y;
}
Please help me. Thank you.
First some clarifications
I assume that by vertices you mean the pixels and ARC is standard 2D circular arc (not elliptic arc !!!) and your input data are:
int (x0,y0),(x1,y1) // star/end points on curve !!!
float a0,a1 // start end angles [rad]
int (xc,yc) // center of circle
int r // radius
Do not use Bresenham
because you would need to start from zero angle and compute all pixels until start point is hit. Then flip draw flag so you start filling the pixel from that point and stop on end point hit. Also you would need to handle the winding to match ARC direction.
You can use circle parametric equation
// just some arc data to test with
float r=25.0;
float a0= 45.0*M_PI/180.0;
float a1=270.0*M_PI/180.0;
int xc=100,x0=xc+floor(r*cos(a0)),x1=xc+floor(r*cos(a1));
int yc=100,y0=yc+floor(r*sin(a0)),y1=yc+floor(r*sin(a1));
// arc rasterize code
int x,y;
float a,da;
// here draw pixels x0,y0 and x1,y1 to avoid rounding holes ...
if (r) da=0.75/float(r); else da=0.1; // step slightly less then pixel to avoid holes
for (a=a0;;a+=da)
{
x=xc+int(floor(r*cos(a)));
y=yc+int(floor(r*sin(a)));
// here draw pixel x,y
if ((x==x1)&&(y==y1)) // stop if endpoint reach
if (fabs(a-a1)<da) // but ignore stop if not at end angle (full or empty circle arc)
break;
}
may be round instead of floor will have less pixel position error. If your endpoint does not match then this will loop infinitely. If you tweak a bit the end conditions you can avoid even that or recompute x1,y1 from a1 as I have ...
You can use equation (x-xc)^2+(y-yc)^2=r^2
you need to divide ARC to quadrants and handle each as separate arc looping through x or y and computing the other coordinate. Loop through coordinate that is changing more
so in blue areas loop y and in the red loop x. For example red area code can look like this:
int x,y;
for (x=_x0;;x++)
{
y=sqrt((r*r)-((x-xc)*(x-xc)));
// here draw pixel x,y
if (x==_x1) // stop if endpoint reach
break;
}
you need to compute (_x0,_y0),(_x1,_y1) start end points of cut part of ARC inside the quadrant and make _x0<=_x1.
The value for _x looped start/end point coordinate will be xc +/- sqrt(r) or x0 or x1
the value for _y looped start/end point coordinate will be yc +/- sqrt(r) or y0 or y1
The blue parts are done in analogically manner (just swap/replace x and y). This approach is a bit more complicated due to cutting but can be done solely on integers. sqrt can be speed up by LUT (limiting the max radius) and the ^2 can be also further optimized.
[Notes]
so if I recapitulate the parametric equation is the simplest to implement but slowest. Then is the sqrt approach which can be done as fast as Bresenham (and may be even faster with LUT) but need the code for cutting ARC to quadrants which need few ifs prior to rendering.
All codes are in C++ and can be further improved like avoiding some int/float conversions, pre-compute some values before loop, etc ...
The last goes the Bresenham but you need to change a few things inside and when you do not know what you are doing you can easily get lost. It also need to cut to octant's so the complexity of change is far bigger then sqrt approach
Related
I have a path that is a triangle and i am trying to move it forward a certain length at a specific angle,
this.x += length*Math.sin(this.angle);
this.y -= -length*Math.cos(this.angle);
length is the amount of distance forward and angle is the angle at which the path is facing. When i run it, and the angle is 90 degrees it moves on the x correctly but changes the y.
I figured it out! I was not converting the angle value to a radian, witch is what the sin and cos functions take, here is my new code
this.x+=length*Math.sin(parseInt(this.angle)*Math.PI/180);
this.y-=length*Math.cos(parseInt(this.angle)*Math.PI/180);
I'm using this equation to calculate a series of points along a quadratic curve:
// Returns a point on a quadratic bezier curve with Robert Penner's optimization of the standard equation
result.x = sx + t * (2 * (1 - t) * (cx - sx) + t * (ex - sx));
result.y = sy + t * (2 * (1 - t) * (cy - sy) + t * (ey - sy));
Sadly the points are unevenly distributed, as you can see in the dashed-line rendering below. The points are denser in the middle of the curve, and are further spaced apart near the edges. How can I calculate a evenly distributed set of points along a quadratic bezier curve?
Please note that I'm using this for rendering a dashed line, so a slow solution in MATLAB or something will not do. I need a fast solution that will fit inside a renderer. This is not for research or a one-off calculation!
Edit: I'm not asking how to accomplish the above. The above is MY RENDERING! I already know how to estimate the length of a bezier, calculate the number of points, etc, etc. What I need is a better bezier point interpolation algorithm since the one I have calculates points unevenly distributed along the curve!
You want to generate equidistant (by arc length) subdivision of quadratic Bezier curves.
So you need subdivision procedure and function for calculation of curve length.
Find length of the whole curve (L), estimate desired number of segments (N), then generate subdivision points, adjusting t parameters to get Bezier segments with length about L/N
Example: you find L=100 and want N=4 segments. Get t=1/2, subdivide curve by two parts and get length of the first part. If length > 50, diminish t and subdivide curve again. Repeat (use binary search) until length value becomes near 50. Remember t value and do the same procedure to get segments with length=25 for the first and for the second halves of the curve.
This approach uses the THREE.js library, which is not in the OP's question, but may be useful if only to look at how they approach it:
var curve = new THREE.QuadraticBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
var points = curve.getSpacedPoints(numPoints);
I am coding a simple app that can show you what friends are around you, but not in the normal map but on a really circular radar like UI:
(http://i.imgur.com/9Epw0Xh.png)
Like this, where i have every users latitude, longitude, and of course my own being the center.
I also measure the distance of every user to position them so the data I know is their lat, longitude and distance to me.
For mathematical reasons let's say the radar is 100 pixels radius, I can distance them by the distance from me using the left or right positioning, but in terms of top or bottom it gets a litte trickier, since i try to convert their latitude - my latitude into a percentual result and then put them on the radar... but I think there are maybe better ways with polar to cartesian coordinates, but im really kinda clueless.
Is there a best approach with these types of interfaces or anything implemented around there?
convert long,lat of all points to cartesian 3D space coordinates
it is conversion spherical -> cartesian 3D space. Math behind is here. After this all points (long,lat,alt) will became (x,y,z) where (0,0,0) is center of the Earth
X axis is lat=0,long=0 [rad]
Y axis is lat=0,long=+PI/2 [rad]
Z axis is North
XY plane is equator
If you want more precision handle Earth as ellipsoid instead of sphere
long = < 0 , +2*PI > [rad]
lat = < -PI/2 , +PI/2 > [rad]
alt = altitude above sea level [m]
Re =6378141.4; [m]
Rp =6356755.0; [m]
R=alt+sqrt( (Re*cos(lat))^2 + (Rp*sin(lat))^2 )
x=R*cos(lat)*cos(long)
y=R*cos(lat)*sin(long)
z=R*sin(lat)
create RADAR local cartesian coordinate system
Basically you need to obtain 3D vectors for X,Y,Z axises. They must be perpendicular to each other and pointing to the right direction from RADAR origin point (P0).
You can use vector multiplication for that because it creates perpendicular vector to its multiplicants. Direction is dependent on the order of multiplicants so experiment a little.
//altitude this one is easy
Z = P0
//north (chose one that is non zero, resp. bigger to avoid accuracy problems)
X = (1,0,0) x Z // old X axis * Altitude
X = (0,1,0) x Z // old Y axis * Altitude
//east is now also easy
Y = X x Z
// now normalize all of them to unit vectors
X = X / |X|
Y = Y / |Y|
Z = Z / |Z|
// and check if they are not negative (X,Y)
// if they are then swap multiplicants or multiply by -1
// do not forget that X is computed by two methods so swap the correct one
here is math behind constructing an 4x4 transform matrix
here you can see on an image difference between homogenous 4x4 and direct 3x3 3D transform matrices and math
convert all points to RADAR coordinate system
just multiply all points by RADAR transform matrix M
Q(i) = P(i)*M
so the points Q(i) are now local to RADAR
(0,0,0) means radar origin (center)
(1,0,0) points to north
(0,1,0) points to east
(0,0,1) points up
so now just multiply all cordinates by RADAR scale
scale = RADAR_radius/RADAR_range;
RADAR_radius is size of you RADAR on screen in pixels or units of coordinates
RADAR_range is the max distance the RADAR biggest circle represents [m]
after this just draw the dot to RADAR (swap x,y because I use X as North not Y) and also you can discard all points that are more distant then range. Also you can add 3D RADAR like in old Elite by adding Z coordinate to vertical axis (or draw an L line)
Hope it helps a little and was not too much confusing...
This calculates vertex coordinates on ellipse:
function calculateEllipse(a, b, angle)
{
var alpha = angle * (Math.PI / 180) ;
var sinalpha = Math.sin(alpha);
var cosalpha = Math.cos(alpha);
var X = a * cosalpha - b * sinalpha;
var Y = a * cosalpha + b * sinalpha;
}
But how can I calculate the "angle" to get equal or roughly equal circumference segments?
So from what Jozi's said in the OP's comments, what's needed isn't how to subdivide an ellipse into equal segments (which would require a whole bunch of horrible integrals), it's to construct an ellipse from line segments of roughly equal length.
There are a whole pile of ways to do that, but I think the best suited for the OP's purposes would be the concentric circle method, listed on the page as 'the draftman's method'. If you don't mind installing the Mathematica player, there's a neat lil' app here which illustrates it interactively.
The problem with those methods is that the segment lengths are only roughly equal at low eccentricities. If you're dealing in extreme eccentricities, things get a lot more complicated. The simplest solution I can think of is to linearly approximate the length of a line segment within each quadrant, and then solve for the positions of the endpoints in that quadrant exactly.
In detail: this is an ellipse quadrant with parameters a = 5, b = 1:
And this is a plot of the length of the arc subtended by an infinitesimal change in the angle, at each angle:
The x axis is the angle, in radians, and the y axis is the length of the arc that would be subtended by a change in angle of 1 radian. The formula, which can be derived using the equations in the Wikipedia article I just linked, is y = Sqrt(a^2 Sin^2(x) + b^2 Cos^2(x)). The important thing to note though is that the integral of this function - the area under this curve - is the length of the arc in the whole quadrant.
Now, we can approximate it by a straight line:
which has gradient m = (a-b) / (Pi/2) and y intercept c = b. Using simple geometry, we can deduce that the area under the red curve is A = (a+b)*Pi/4.
Using this knowledge, and the knowledge that the area under the curve is the total length of the curve, the problem of constructing an approximation to the ellipse reduces to finding say a midpoint-rule quadrature (other quadratures would work too, but this is the simplest) of the red line such that each rectangle has equal area.
Converting that sentence to an equation, and representing the position of a rectangle in a quadrature by it's left hand boundary x and its width w, we get that:
(v*m)*w^2 + (m*x+c)*w - A/k == 0
where k is the number of pieces we want to use to approximate the quadrant, and v is a weighting function I'll come to shortly. This can be used to construct the quadrature by first setting x0 = 0 and solving for w0, which is then used to set x1 = w0 and solve for w1. Then set x2 = w1, etc etc until you've got all k left-hand boundary points. The k+1th boundary point is obviously Pi/2.
The weighting function v effectively represents where the rectangle crosses the red line. A constant v = 0.5 is equivalent to it crossing in the middle, and gets you this with 10 points:
but you can play around with it to see what better balances the points. Ideally it should stay in the range [0, 1] and the sum of the values you use should be k/2.
If you want an even better approximation without messing around with weighting functions, you could try least-squares fitting a line rather than just fitting it to the endpoints, or you could try fitting a cubic polynomial to the blue curve instead of a linear polynomial. It'll entail solving quartics but if you've a maths package on hand that shouldn't be a problem.
Too long for a comment, so I suppose this has to be an answer ...
Here's a mathematically simple approach to forming a first order approximation. Pick one quadrant. You can generate the data for the other quadrants by reflection in the X and Y axis. Calculate (x,y) for the angle = 0 degrees, 1 degree, ... 90 degrees. Now you want the little lengths joining consecutive points. If (x_n, y_n) are the coordinates at angle = n, then Pythagoras tells us the distance D between points (x_n, y_n) and (x_n+1, y_n+1) is D = sqrt((x_n+1 - x_n)^2 + (y_n+1 - y_n)^2). Use this formula to produce a table of cumulative distances around the ellipse for angles from 0 degrees to 90 degrees. This is the inverse of the function you seek. Of course, you don't have to pick a stepsize of 1 degree; you could use any angle which exactly divides 90 degrees.
If you want to find the angle which corresponds to a perimeter step size of x, find the largest angle n in your table producing a partial perimeter less than or equal to x. The partial perimeter of angle n+1 will be larger than x. Use linear interpolation to find the fractional angle which corresponds to x.
All we are doing is approximating the ellipse with straight line segments and using them instead of the original curve; its a first order approximation. You could do somewhat better by using Simpson's rule or similar instead of linear interpolation.
Yes, you have to calculate the table in advance. But once you have the table, the calculations are easy. If you don't need too much accuracy, this is pretty simple both mathematically and coding-wise.
I need to mimic an angled line being drawn between two html elements using another html element that's essentially flat (1 px height by 200 px wide) like a line. Here's an example.
In this example, I hard-coded the angle of the line using the CSS skewY transform to make the lines angle at roughly 10px intervals. The problem is I need to do this dynamically using javascript. While already knowing the origin and destination points, I'll be using jQuery to style the line using skewY which requires a number in degrees.
How does one figure out the angle of the skew in order to have it start and end at 2 exact pixel points? I'm guessing they'll be some algebra involved.
Thanks!
Mark
Given the known starting point, and the known ending point, and the fact that each line appears to be the longest side of a right angle triangle, I would think a bit of trigonometry could come into play.
Assumptions would be that you know the x distance between the start and the end (in your code 'one' and 'two') i.e. the horizontal - call this the adjacent, and that you should be able to establish the distance from the top (the distance from the first two, to nth two), call this the opposite then one could establish the angle (lets call it x) by SOHCAHTOA being the TOA part (or TAN angle = Opposite over adjacent) or TAN x = O/A or x = tan -1 (O/A). If I remember correctly the angle will be in radians, so will need to be converted to degrees (multiple by 180/pi)
Sample code
var O = //to be set
var A = //to be set
var x = Math.atan(O/A) * (180 / Math.PI)