Skip to content

Turn an angle into movement

  • The Craft

Instead of choosing X and Y separately, choose a direction and a distance. Sine and cosine supply the two coordinates.

Drag in the picture or use the labelled inputs and sliders. Grid squares span 25 world units. This is a mathematical model running in your browser.

Name the two shares

Measure the angle anticlockwise from the positive X axis. In the first quadrant, cosine is the adjacent side divided by the hypotenuse: x / r. Sine is the opposite side divided by the hypotenuse: y / r. Rearranging gives x = r × cos(angle) and y = r × sin(angle).

At 30°, cosine is about 0.866 and sine is 0.5. With radius 150, X is about 129.904 and Y is 75. Set the angle to 30° and the radius to 150, then check the picture. The results are coordinates, not two different distances from the origin.

Change the radius to 225 while keeping the angle. The point moves along the same line: the shares stay constant. Change the angle to 150°. X becomes negative and Y stays positive. Around the whole circle, sine and cosine are signed components, even though triangle side lengths are never negative.

Use speed instead of radius

To move 3 units per tick along that direction, use vx = 3 × cos(angle) and vy = 3 × sin(angle). Add vx to position X and vy to position Y each tick. The experiment shows these velocity components separately from the enlarged triangle.

At 90°, what are the two velocity components for speed 3?

Show the explanation

vx = 0 and vy = 3. All movement is upwards. At 180°, they are −3 and 0, giving movement to the left. Tiny floating-point residues near zero are rounded in the display.

At 45°, both components are about 2.121. Giving each component the full speed 3 would produce a diagonal speed of √18, about 4.243. Components combine geometrically; they do not each inherit the total speed.