http://img684.imageshack.us/img684/9305/fffnv.png
Do i need to solve a math, is there a easy way to solve this problem?
First you compute the angle of the line from second to first point
var angle = Math.atan2(first.y - second.y, first.x - second.x);
then you compute the resulting point using sin and cos
var result = {x : second.x + z*Math.cos(angle + Math.PI/2),
y : second.y + z*Math.sin(angle + Math.PI/2)};
Obviously you do need some math to get this going.
Math.atan ((y-y')/(x-x')) will get you the angle (in Radians) of the first line from the horrizon.
Add Pi/2 (90 degrees) to this angle to get the angle of the z line.
You can then use Math.sin and Math.cos `multiplied by z to find the coordinates of the third point.
Related
There are two points lastPoint and prePoint. They determine a line.
I try to calculate slope of this line using this:
let kbase = (lastPoint.Y - prePoint.Y) / (lastPoint.X - prePoint.X);
let bbase = lastPoint.Y - kbase * lastPoint.X; //y = kx + b -> y - kx;
let ybase = `${kbase} * x + ${bbase}`;
So, if Y are equals then kbase is zero, it means straight line equation is y = b.
After that I try to calculate slope of perpendicular line to the first line, but I get error, because 1 / kbase where kbase == 0.
let kh = -1 * (1 / kbase);
let bh = startPoint.Y - kh * startPoint.X;
let yh = `${kh} * x + ${bh}`;
How to find a slope of perpendicular line if line equation is y = b?
The explicit form of a line equation, y = mx + p does not allow to represent verticals, as the slope is infinite.
For your purposes, you can use the implicit form, ax + by + c = 0, which does not have this problem. An orthogonal line can be given the equation bx - ay + d = 0.
As others have said, the slope of a vertical line is undefined. This is just how it works mathematically, and there are no problems with your code, and your math is correct. As you have realized, a horizontal line is a function that follows the form y = ox+b and its slope is 0. The perpendicular line of a horizontal line results in a vertical line which is not a function. This means that there are several values of y that correspond to one value you of x. Here is why that is important.
The general way of calculating slop is the change in y over the change in x.
Because a vertical line is not a function, there are multiple y's for one x. Here is an example. Let's say that we had the equation x=5. Here are some points: (5,1),(5,2),(5,3)(5,7). If you calculated slope with the first two points, it would result in (2-1)/(5-5) which is 1/0, and if you calculated slope with the last two points,
it would result in (7-3)/(5-5) which is 4/0. If you continued to do this, you would have an infinite number of undefined values for the slope of a vertical line. Keep in mind that 1/0 does not necessarily equal 2/0 or 6/0.Even if you tried to find a horizontal line and take the inverse reciprocal, which you did, you would not be able to find a defined value.
For example, if slope is the change in y over the change in x, then the inverse reciprocal would be -1 * the change in x over the change in y. Let's say that we had the horizontal line y = 0x + 5. The coefficient of the x or slope is 0. Four points would be (5,5), (9,5), (3,5) (6,5), and the two slope calculations for the slope of the perpendicular line would be 4/0 and 3/0 which leads to the same situation as last time.
To conclude, the answer to your question "How to find a slope of perpendicular line if line equation is y = b?" is that there is no defined value for the slope of a perpendicular line, and you definitely wont find one through the code you are using.
I am trying to calculate if a point resides above or below a line that is defined by two points. For clarification I only need to know if the point is on "this side" or "that side". I realize if the line is perfectly vertical there will be no "above" or "below". I have a line defined by two points (centerX, centerY) and (xprime, yprime). For simplicity centerX, centerY can be converted to (0,0). I want to determine if (mouseX, mouseY) is above or below that line.
I have tried to use this formula but it is not giving me the results I expected.
var position = Math.sin((xprime -centerX) * (mouseY - centerY) - (yprime - centerY) * (mouseX - prime));
The values for position seem to oscillate randomly from positive to negative as mouseX,mouseY values rotate around the line. I was under the impression the sign would change one time from positive to negative as the mouse position (mouseX,mouseY) crossed over the line. Values above the line would be positive, and values below would be negative.
I am using this code in conjunction with a formula to determine the angle of deflection from the original click. But I am not able to determine if the mouse is now above the initial click, or below. (again please excuse "above" and "below")
Simple solution exploiting cross product properties.
dx = xprime - centerX
dy = yprime - centerY
mx = mouseX - centerX
my = mouseY - centerY
cross = dx * my - dy * mx //zero means point on line
below = (cross > 0) //mouse is "at the right hand" of the directed line
if dx <> 0 then // check for vertical line
if dy/dx < 0 then //negative slope, invert result
below = not below
I'll try to give you general solution.
How to check if exact point is above or below line function:
Just imagine, we have line f(x) = 4x + 2. We need check, if point (x1, y1) below or above the line, we need to calculate f(x1) and compare it with y1.
if f(x1) > y1 it means, that (x1, y1) below the line.
if f(x1) < y1 means point (x1, y1) above the line.
if f(x1) = y1 - point on a line.
You can see on plot:
All line functions looks like f(x) = k * x + b, so, you need know k and b constants to know exact line function.
How to get line function by two points:
Imagine points A (x_a, y_a) and B (x_b, y_b) and we want to get line function, we need to solve system of two equations:
y_a = k * x_a + b
y_b = k * x_b + b
That is very easy. After you will know k and b and after you can check if point below or above AB line
I'm kinda confused with this one.
I have an object and I know it's velocities on axis x and y. My problem is how to determine the angle at which it's moving.
function Object(){
this.velocity = {x: 5, y: 1};
}
Basically I Know that a vector's direction is x_projectioncos(deg) + y_projectionsin(deg), but I don't know how to get those projections since I only have the velocity, as I said I'm really confused.
#EDIT:
in addition to the accepted answer, here's what I did to get a full 360 degree spectrum
var addDeg = 0;
if(obj.velocity.x<0)
addDeg = obj.velocity.y>=0 ? 180 : 270;
else if(obj.velocity.y<=0) addDeg = 360;
deg = Math.abs(Math.abs(Math.atan(obj.velocity.y/obj.velocity.x)*180/Math.PI)-addDeg)
I don't know how to get those projections since I only have the
velocity
Actually, what you seem to be missing is that you already have the projections. That's what x and y are.
x is speed * cos(angle)
y is speed * sin(angle)
So y/x = sin(angle)/cos(angle) which is tan(angle) so angle=arctan(y/x).
That's the angle rotating anti-clockwise starting from the x axis (with x pointing right and y pointing up).
Find the angle between that vector and (1,0) (Right horizontal positive direction).
The math is:
A = (5,1)
B = (1,0)
A.B = |A||B|cos(angle) -> angle = arccos((|A||B|)/(A.B))
Dot product, check geometric definition
Edit:
Another option is to use the cross product formula:
|AxB| = |A||B|sin(angle) -> angle = arcsin((|A||B|)/(|AxB|))
It will give you the angle you need.
There is an easier way to get full 360 degrees. What you're looking for, is Math.atan2:
deg = Math.atan2(obj.velocity.y,obj.velocity.x)*180/Math.PI;
okay so I am trying to draw a triangle, the triangle can be completely random, on a canvas in JavaScript
so I got the angles and the side for triangle ABC(this is not what I'm calling it in the code)
the sides
AB(11)
AC(12)
BC(13)
the angles which are solved in a function
BAC(69)
ABC(52)
BCA(59)
And the starting Point of the triangle at (100, 90)
The question I am having is how do I find the other points to the Triangle
I thought the easiest way to draw it would be to draw a line that goes to each point
So I tired the mathematics with this code (I found on another page but )
function FindTriPoints(){
//Y2 = H(Sin(A)) + Y1
//X2 = Sqrt((H^2)-(Y2^2)) + X1
pointX1 = 100;
pointY1 = 90;
pointY2 = s3 * (Math.sin(angle1*Math.PI/180)) + pointY1;
pointX2 = Math.sqrt((s3 * s3) - (pointY2 * pointY2)) + pointX1;
alert("X2 = " + pointX2 + "\n Y2 = " + pointY2)
}
but X2 ends up becoming NaN because it is a negative value that it is trying to square root.
Edit Thanks to Cbroe and Jing3142 for helping me with Y2
well if you know valid triangle sides lengths (l1,l2,l3) and their angles (a,b,c) ...
then it is quite simple with vector math ...
// compute directions
a1=0;
a2=180-b;
a3=a2+180-c;
a3=-b-c;
a3=-a;
// convert them from [deg] to [rad]
a1*=Math.pi/180.0;
a2*=Math.pi/180.0;
a3*=Math.pi/180.0;
// compute points
A=(x0,y0); // your start point is known
B=A+l1*dir(a0)=(x0+l1*Math.cos(a0),y0+l1*Math.sin(a0));
B=A+l1*dir( 0)=(x0+l1 ,y0 ); // a0 is always zero
C=A-l3*dir(a3)=(x0-l3*Math.cos(a3),y0-l3*Math.sin(a3)); // C from A point
C=B+l2*dir(a2)=(x0+l1+l2*Math.cos(a2),y0+l2*Math.sin(a2)); // C from B point
[notes]
as you can see there are more alternatives for some variables choose one you like
do not forget to check if l1+l2>l3 and l1+l3>l2 and l2+l3>l1
if not then your lengths are not valid triangle sides
also a+b+c = 180
if not then your angle computation is wrong
if you want to over-check the triangle then compute C from A and from B point
if they are not the same (their distance > some accuracy constant like 0.001)
then it is not a valid triangle
I'm working on some coordinates function to my canvas in HTML5, and I want to make a function which can move an object by degrees.
My dream is to make a function which works like this:
box.x=10;
box.y=10;
// now the box has the coordinates (10,10)
moveTheBoxWithThisAmountOfDistance=10;
degreesToMoveTheBox=90;
box.moveByDegrees(moveTheBoxWithThisAmountOfDistance,degreesToMoveTheBox);
// now the box.x would be 20 and box.y wouldn't be changed because
// we only move it to the right (directional 90 degrees)
I hope this makes any sense!
So my question is:
How does the mathematical expression look like when I have to turn a degree into to coordinates?
You use sin and cos to convert an angle and a distance into coordinates:
function moveByDegrees(distance, angle) {
var rad = angle * Math.pi / 180;
this.x += Math.cos(rad) * distance;
this.y += Math.sin(rad) * distance;
}
That's it: http://en.wikipedia.org/wiki/Rotation_matrix , all the math is described :)
Also beware that if you need multiple sequential rotations (i.e. you do continuous animation), it's better to recompute x' and y' from initial ones and not just previous. Not doing so will result in rounding errors accumulation, and after some thousand rotations the result will become too rough.