Moving sprite in direction of an angle - javascript

I'm making an android game in E3roid I'm attempting to rotate the sprite with the analog stick then have the sprite move in the direction that the ship is facing. Here is the code I used the set the angle.
double angleRadians = Math.atan2(sprite.getRealY() - relativeX,sprite.getRealX() - relativeY);
double angleDegrees = Math.toDegrees(angleRadians);
double angle = -1 * angleDegrees;
sprite.rotate((float)angle);
How would I move the sprite in the same direction as the angle?
do I convert the angle back into Radians?
sprite.move(int,int);
Thanks if you help me!

You can think of your angle as the hypotenuse of a right triangle. To move your sprite a certain number of pixels up and right, you need to use geometry to figure out how many pixels that is. sin and cos should do the trick. If you have forgotten your geometry

Related

Calculate Polygon Rotation so Right Angles are Straight

I have a polygon (RED SQUARE), for simplicity its a square 100x100 with an offset of 100 from the top left. Assume the coordinate system top left is 0,0. So the coordinates for my simple square are: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100].
Now lets say I have another square (BLUE SQUARE), its a 100x100 square also, with the same 100 offset from the top left, but this square is rotated 45 degrees, so its cords are: (rounded) [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150].
How do I calculate the rotation of BLUE SQUARE (45 degrees) if I am given only the coordinates? Assuming I want the right angles to be straight (vertical or horizontal) in this coordinate system (Like RED SQAURE).
Worded another way... Given these coordinates: [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150] how do I calculate the rotation to apply to polygon so its coordinates are this: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100]
Here is a image demonstrating what I am talking about.
Image of both polygons with coordinates
The way you do this is to
calculate the angle between two adjacent points. The formula for this Math.atan2(x2-x1, y2-y1); This will give you the angle the quadrilateral is on.
Rotate the quadrilateral (from its center) by -angle (or by pi/2 - angle) and one side will be horizontal and one will be vertical

How to rotate an image inside bounding rectangle box

I have the following img that I'd like to drag (by dragging a circle on top of rectangle) and rotate an image.
When dragging, I just want to rotate an image inside the rectangle and not the rectangle itself. I'm not sure I'm doing this correctly, I have this formula when I start dragging:
const newAngle = Math.atan(circleDrag.y, circleDrag.x) * (180 / Math.PI);
I'm getting the position of the circle from the top of the rectangle, but it's giving me something between 90 to 110 degrees only. Correct way of rotation angle would start from 0 I think, and should rotate between 0-360 degrees.
Could somebody direct me on how to calculate rotation angle?
If I understand your needs right, you have to measure angle of direction from the center point of rectangle to the circle center.
Math.atan(circleDrag.y - rectangleCenter.y, circleDrag.x - rectangleCenter.x)
(At this moment you are calculating direction from coordinate origin to the circle)

How can I find a set of coordinates relative to a rotation?

How can I find a position relative to a point that has been rotated? The idea is, that I'm rotating an entity at a certain position, and need to be able to find a position relative to that entity's rotation, such that 10 units above the entity relative to its rotation is different from 10 units directly above the entity. Hopefully this diagram should give you an idea of what I mean:
Note: I'm doing this in the <canvas> tag with pure Javascript.
Also note: I'm only just finishing Algebra, and have done just a little trigonometry and some geometry, so please make your explanation relatively clear. Sin, cos, and tangent are only just beginning to make sense, and I had to look up the concept of radians myself the other day in order to work with <canvas>'s rotation function (thanks, Wikipedia!).
Also also note: I have tried looking this up myself (Google, SO, elsewhere), but not knowing the proper terms, I wasn't able to find anything. I'm sure this must be fairly simple, but it may as well be Greek to me.
If all you're looking for is a point that is d units from a point (x,y) at an angle θ, where the angle is taken relative to the point as its origin, in the clockwise direction, from the positive y-axis, the point is given by (x + d*cos(π/2-θ), y + d*sin(π/2-θ))
You can do it with vectors and matrices.Let's say that the direction to the 25,10 is forward vector of your cube.So you can apply the rotation matrix to this vector ,that is multiplying this vector by rotation matrix which is rotated amount of degrees you need.That will return you your relative position.Hope it is clear.I am not JavaScript expert.But I am sure there is some Vector math API out there you can use.
You have to do these steps:
Calculate the vector from cubes position to your desired offset before the rotation.
Calculate rotation matrix with some rotation.
Multiply that vector by the rotation matrix to get the new rotated vector.
I found this JavaScript Vector math lib.Take a look at the Matrix object.It has a method for vector multiplication.
If you kow how to rotate the square, you know howto rotate the vector.
What you did with the square (25,25), do with the vector(25,15)

particle brownian motion with directions

I'm trying to use brownian motion to create a group of random moving particles.
http://jsfiddle.net/J75Em/16/
So far I've got the particles moving randomly but I'm not sure how to set the forward direction to make it look more natural.
I've tried to use the change in x and y axis to calculate rotation using atan, you can see this by uncommenting rotate but this doesn't seem to perform well.
Is this the right approach for this type of movement? thanks;
This is pretty neat!
You are sort of going about it the right way but you should actually use the atan2 function. This removes the need for any 0 checks.
The atan2 function gives you an angle which is anticlockwise from the positive x vector
(1, 0) --->
The bees are 90 degrees off from this starting angle so you must subtract 90 degrees from the direction. (depending on which way round you do the dy and dx calculation, you might need to add)
You could find that the direction changes rapidly, so you could consider limiting the next change to a set of changes that cause an angle change below some threshold. This will make the movement a little smoother.
I would actually go about it by generating an angle between say -pi/8 and pi/8 radians, and a random length. Essentially using polar coordinates. Then add this new random polar offset to the x and y position like
newX = currentX + (randomLength * cos(randomAngle + currentAngle)) and
newY = currentY + (randomLength * sin(randomAngle + currentAngle))
If you work with angles you can also get more natural effects like if you want the bees to stay within a certain area, you can force a bias towards the center of the area as they get closer and closer to the edge.
Update:
So I've taken a closer look. The trouble is that you expect .rotate to set the rotation when it actually adds to the rotation
There are 2 options for fixing this.
Rotate by the difference between the previous and the current angle
Set the rotation using the .transform method
You can see solution 2 in action here http://jsfiddle.net/c5A2A/

How does one rotate a HTML canvas object around a fixed point using mouse action?

For example it may be used in the application of manually adjusting the hands of the clock. I guess it probably involves translating the needle (to make the end point of the needle the centre of rotation) then rotating it, then translating the needle again.
But since the needle listens to the mouse event all the time, the 1st mouse event will be captured. The result is that the needle ends up being translated and not rotated at all. Mouse event is impossible to debug too...
Any idea or code snippets that I can refer to? Using Javascript or CSS to rotate both fine.
In your example, you will want to calculate the angle between the centre of the clock face (black dot), and the current mouse position (red dot), relative to the Y axis (cardinal north if you imagine a compass).
If I remember my trig correctly, you can calculate this by using the following:
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }
In the formula, x and y are the coordinates of the two points, one of which you will know (it is the centre of the clock face), and the other you can get from the mouse move event.
Once you have the angle, you can simply translate to the the centre of the circle, rotate the canvas by the calculated amount, and draw the hand.
Update: I created a jsfiddle to illustrate the angle calculation:
http://jsfiddle.net/DAEpy/1/

Categories

Resources