Question

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?

Answer 1

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;
}