How do I calculate the horizontal and vertical components of a vector in Javascript?

Question

I have the right technique, but it only works in the radiant angles between -1 and 1. If outside of that range it returns NaN. I looked up some trigonometry and they say to use acos and asin. I do that, but it only works in them ranges.

How can I calculate it?

You know when you shoot a bullet in asteroids and it moves at a certain angle. That's what I'm trying to do.

CODE:

this.xSpeed = Math.acos(this.angle) + 5
this.ySpeed = Math.asin(this.angle) + 5

// +5 to increase the base speed of both

...

move() {

this.pos.x += this.xSpeed
this.pos.y += this.ySpeed
}

Answer 1

acos/asin (arc cosinus/sinus) return the angle (in radian) corresponding to the given cos/sin as argument: that's why out of range [-1,1] they return NaN (Not a Niumber)... as there's no angle wich have cos/sin out of this range ^^

I guess you rather should use cos and sin... given an angle (still in radian), it return the normalized x/y coordinates on the trigonometric circle (radius of 1) of the vector wich has that angle related to horizontal vector pointing to right ;P

so, instead of adding 5 (length of final vector), you must multiply 5:

x = cos(angle)*5
y = sin(angle)*5

Answer 2

Clueless Coder the player rotation give you an angle, isn't?

so, you just have to use formula given in my first post ^^

if you get only coordinates, compute the normalized vector directly (cos and sin), without getting the angle, by dividing each coordinates by length of vector: sqrt(x*x+y*y)...

Answer 3

First, why do you need to convert between polar (angle and amplitude) and cartesian (x and y)? Suppose you’re shooting a bullet in asteroids by clicking a spot where you want to shoot. All you need to do is subtract the coordinates of the character from the coordinates of the point you clicked on and then normalize those coordinates (divide both by the length of the vector as found with pythagorean’s theorem). This new vector gives you the speed you want the bullet to move and is already in cartesian format. No need for touching polar coordinates.

If you do need to convert between cartesian and polar, here are two (untested) functions to do the conversion:

function CartesianToPolar(x, y) {
return {
angle: Math.atan2(x, y),
amplitude: Math.hypot(x, y)
};
}

function polarToCartesian(angle, amplitude) {
return {
x: Math.cos(angle) * amplitude,
y: Math.sin(angle) * amplitude
};
}

Answer 4

Clueless Coder I see. In that case, use the polarToCartesian function. Also, if you want to multiply the amplitude of a cartesian vector by a number n, you need to multiply both x and y by n, not add, like you do in the question.

Answer 5

Jason Stone visph Thanks for the help, I get it now

Answer 6

Jason Stone I'm a bit confused. I don't think this will work as I using space bar to shoot instead of mouse pointer.

There's a player in the center, you use the arrow keys to rotate the player (already implemented that)

and then you use the space bar to shoot. the bullet will travel at the angle the player is pointing