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
Related
I have a semi circle that I need to align Radios I created from circles. The number of radios will be dynamic and will need to keep them centered. Here is what I currently have.
UPDATE, just realized that the 2 screenshots can be confusing. The order of the radios are not the same. Ignore that. I just need the alignment to be correct,
This is the desired result.
I have a working demo here
WORKING DEMO
Given your preferred arc angle A and number of points N, find the angular distance between each point:
PA = A / (N - 1).
Next, find the angle described by a vertical line from the circle's center and the point we're calculating.
Initial observations:
The largest possible value of this angle is A / 2
The smallest possible value is PA / 2 if N is even, 0 if N is odd.
The angle changes in increments of PA
Counting points away from the center (X), we can describe the angle using terms we've defined:
A / 2 - PA * (floor(N / 2) - X)
For the examples directly below, X is 1 and 2 respectively.
Assuming:
A = 90° (not depicted accurately)
N = 4
From which follows:
PA = 30°
Plugging in these values, we get:
45 - 30 * (floor(2) - 1) = 15
and
45 - 30 * (floor(2) - 2) = 45
Now that we have the angle a, we can use trigonometry (specifically SOH-CAH-TOA) to find the x and y offsets of the point relative to the center.
Note that because the points to the left of the plumb line are mirror images of their counterparts to the right, you need only to negate the x-offset from the center to get the locations of the left-hand points.
Update: Here's a simpler (but still math-based) implementation.
While backtick's answer is a beautiful math explanation, you can do that with a simple mix of getPointAtLength and getTotalLength:
First you do...
const arcPathLength = arcPath.node().getTotalLength() / 2;
... where arcPath is just that gray arc the radio buttons will follow. Here I'm dividing the length by 2 because the arc goes back to the origin. Then you just do:
svg.selectAll(null)
.data(RADIO_DATA)
//etc...
.attr("cx", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).x)
.attr("cy", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).y)
Since I cannot fork the code without logging in, here is a screenshot of the result:
Adjust the texts accordingly. Also, pay attention to the fact that circle elements have no d or text attributes.
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:
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))
JavaScript coordinates Sin, Cos or Tan?
I am trying to learn some basic trigonometry for game development in the web browser. I know the soh cah toa rule etc. I know we are also working between -1 and 1.
I am confused though, I need to work out x and y coordinates separately depending on an angle.
Here is what I have to work out the direction of my angle in x and y, which does work (Thanks to Loktar).
velY = -Math.cos(angle * Math.PI / 180) * thrust;
velX = Math.sin(angle * Math.PI / 180) * thrust;
What I understand from this is I am finding the cos of x and y based on a small formula to convert my angle variable to radians.
But, why does cos need to be used for x and sin for y? Where does tan come into this? Is this to do with the 4 quadrants of a circle?
How do I know when to use sin cos or tan when I am only given an angle and I need to work out where on a circle that angle places using x,y?
Any simple diagrams or explanations would be extremely helpful!
Thanks
Basic Definitions (from your trigonometry book):
cos ϴ = x/h, sin ϴ = y/h
Gratuitous ASCII art to describe x,y,and H :
_
/\ assume we're going this way
/
/|
/ |
h / |
/ | Y
/ |
/ϴ |
+-------
X
A vector can be split into a sum of two vectors. (you can think of this in the diagram as going northeast for H meters is the same as going east for X meters and north for Y meters)
H in this case corresponds to your current thrust. You want to find the X and Y components of that thrust.
since cos ϴ = X / H (basic definition of cosine), we can say (via simple algebra)
X = H * cos ϴ
however, ϴ is assumed to be a radian measure. if you're using degrees, you have to multiply by Math.PI / 180 to get the correct value. hence, you have
ϴ = angle * Math.PI / 180
We're very close! Now our classic definition-of-cosine formula (when translated to our terms) looks like
cos (angle * Math.PI / 180) = X / H
H being our Thrust vector, X being only the horizontal part of our thrust vector.
"Now, wait a minute," you say. "why am I using cosine to calculate the vertical velocity then? Your axes seem flipped to me." Ah, yes. This is standard geometric orientation -- angles are measured as a counter-clockwise rotation from --------> directly to the right. Your axes are flipped because you are storing your angle as a "clock-angle", i.e. 0 degrees is at 12:00. In order to use the standard geometric equation, we have to mirror our entire universe so that the X and Y axes are flipped. Luckily, the mathematical way to do this is simply to switch all your X's and Y's around in the equations.
standard 'math' coordinate system
_
/\
/
/|
/ | angles increase counterclockwise
h / |
/ | Y
/ |
/ϴ |
+----------- (zero degrees starts here)
(0,0) X
your coordinate system
(zero degrees starts here)
^
| angles increase clockwise
| /
| /
|ϴ/
|/
+
Finally, why is there a negative in the cosine? Because here is the cartesian system where we do our math in
^ y-axis
|
|
+----> x-axis
here is the cartesian system that you are drawing to (probably a canvas)
+------> x-axis
|
|
v y-axis
since the y-axis is facing the other direction, you multiply all y-values by a negative 1 to get the correct orientation
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)