Jump to content
  • Advertisement
Sign in to follow this  
Avencherus

Javascript Canvas Question - Confusing coordinates, velocity vectors and the unit circle.

This topic is 837 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have some confusion with how to handle rotations and angles in javascript when using canvas.  It's all because of how the Y axis is going in a positive direction as it goes down, negative Y to traverse upward on the screen.

 

I created a vector class, and for particles I give them a velocity vector.  That works out fine.  However, when it comes to determining rotations, and getting angles from Math.atan2(y,x), it becomes unclear how to handle this.  The standard unit circle from trig has that downward pointing Y axis as negative.

 

It seems to get hairy when I think about how to implement this.  Do I invert the Y coordinate on velocity before using it in math functions?  That has an issue when you're at the top and bottom of the circle.

 

What is the best approach here in dealing with a vector that plots into something of a half inverted unit circle?  Even the radians don't behave in the standard way.  The radian that would normally be PI/2 is -PI/2.

 

I suppose I could translate the canvas to put the origin in the bottom left corner, but I'm really curious how to do these rotations, and point objects in the direction of a vector's angle using the default coordinate system.  I'm a bit stumped at the moment, maybe it will come to me later, but any help or pointers would be much appreciated.  ^_^

Share this post


Link to post
Share on other sites
Advertisement

You're just looking at the space from the wrong direction.

 

[attachment=31337:unit-circle9_43217_lg.gif]

Share this post


Link to post
Share on other sites

You're just looking at the space from the wrong direction.

 

 

Wow thanks.  I see.  When you use something like context.arc() now I notice if you do PI/2 it draws the arc down to the bottom quadrant first.

 

So my rotation math and angles have to be inverted as well.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!