I'm trying to create swipe sencing in JavaScript like this "http://padilicious.com/code/touchevents/swipesensejs.html". Can someone explain the distance formula on this?
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
I do know sqrt and pow but couldn't figur out how swipe length is calculated.
This is how you calculate the distance between 2 points in a 2d space when the coordinates are known.
In your code:
curX is x2 which is the x coordinate of the end point
startX is x1 which is the x coordinate of the beginning point
curY is y2 which is the y coordinate of the end point
startY is y2 which is the y coordinate of the beginning point
Refs:
The Distance Formula is a variant of the Pythagorean Theorem
Wikipedia entry on distance
this is a simple distance formula between two points.
more details on Distance Formula Explained
This is a basic formula for calculating distance between two points:
Related
Background
I have a Google Maps application in which a person is to draw a rectangle in as few clicks as possible, the solution is to draw a line at the centre and expand outwards by clicking and dragging the edges.
Problem
I know the angle between the two lat/longs on the map that form the line I mentioned above so I can draw a rectangle around that line, easy. Knowing the angle of the original line I need to limit the dragging of the lines parallel to the original to the same angle but I don't know where to start with that, how do I limit the dragging of those two lines so that they remain parallel at all times?
I forgot simple geometry/algebra.. the way to do this would be to use the standard distance formula D = SQRT((x1 - x2)² + (y1 - y2)²) on the two vertices that make the line and then transform those coordinates by the below orthogonal matrix
| 0 -1 | -> x axis
| 1 0 | -> y axis
You also need to use the standard distance formula to get the distance between the mouse and the old line to calculate what OFFSET might equal.
It's worth noting that you need to use the Google Maps geometry library for this and to convert each LatLng pair into a Point before calculating and then converting back to LatLng when you're ready to draw the lines.
from.x = x1 + OFFSET * (y2 - y1) / D
from.y = y1 + OFFSET * (x1 - x2) / D
to.x = x2 + OFFSET * (y2 - y1) / D
to.y = y2 + OFFSET * (x1 - x2) / D
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
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...
I have 3D rectangle, as shown in the image.
Here I know depth distance and x and y coordinates of the one end. Based on these two values I would like calculate coordinates at the other end.
For clear view, I have attached a screen.
If you don't know the relation between 2D and 3D (i.e. the projection formulas used) then you can't apply the depth.
That said, if you make the following assumptions:
the projection type is orthographic
a depth line is projected as a 45 degrees line
the length of a 45 degrees line is the same as if it was a normal line
... then you could calculate it with Pythagoras' theorem as follows:
The red lines are equal (in case of a 45 degree line), so:
x1 = 100 + 50 * (1 / sqrt(2))
y1 = 50 - 50 * (1 / sqrt(2))
In javascript, I am trying to draw a line that is at an angle that is user defined.
Basically, I have a point (x,y) and an angle to create the next point at. The length of the line need to be 10px.
Let's say that the point to start with is (180, 200)... if I give it angle "A" and the (I guess)hypotenuse is 10, what would my equation(s) be to get the X and Y for a slope?
Thanks for your help!
well, from basic trigonometry...
sin A° = Y/10
cos A° = X/10
10^2 = Y^2 + X^2
As Mr Doyle snarkily implied, the math isn't that hard, but :
1) Make sure you are clear about what the angle is referenced to, and what directions your coordinates go; most simple trig stuff assumes you are dealing with traditional cartesian coordinates with x increasing to the right, and y increasing up the page, whereas most drawing api have y increasing down the page and x increasing to the right.
2) make sure you understand whether the math functions need degrees or radians and supply them with the appropriate arguments.
Assuming H = Hypotenuse (10 in your example), this is the formula for your slope:
Y2 = H(Sin(A)) + Y1
= 10(Sin(A)) + 200
X2 = Sqrt((H^2)-(Y2^2)) + X1
= Sqrt(100 - (Y2^2)) + 180
So now you've got
(180, 200) -> (X2, Y2)
Where X2, Y2 will vary depending on the values of A and H
To check our calculation - A (as entered by the user) can be calculated using the slope equation replacing the X1, X2, Y1 and Y2 values with the original input and resulting output.
A = InvTan((Y2 - Y1) / (X2 - X1))
= InvTan((Y2 - 200) / (X2 - 180))
Maybe a better way to look at the problem is using vectors:
(source: equationsheet.com)
You can also write the vector this way:
(source: equationsheet.com)
where
(source: equationsheet.com)
Setting the first equal to the second lets us solve for the end point given the starting point, the angle, and the distance:
(source: equationsheet.com)
(source: equationsheet.com)