Interactive · Trigonometry

Sin, cos and tan,
by hand.

Drag the point around the circle. cos is how far right it is, sin is how far up it is, and tan is the slope of the line from the centre through it.

01 The unit circle

A circle of radius 1. Drag the point, click anywhere on the circle, or focus it and use the arrow keys. Hold Shift for 15° steps.

Angle

Jump to

cos θ x position, adjacent / hypotenuse
sin θ y position, opposite / hypotenuse
tan θ slope, sin / cos

Same thing as waves

Unroll the circle: sin and cos are the height and width of the point as the angle grows. Click or drag here too.

02 In code

Turn a distance and an angle into x and y. Then the four places this usually goes wrong.

r = 100

Math.sin(90) isn’t 1

JavaScript’s trig functions take radians, not degrees. Math.sin(90) treats 90 as 90 radians, about 14.3 full turns, and returns 0.894. Convert first: Math.sin(90 * Math.PI / 180) is 1.

Why tan explodes

Near 90° and 270°, cos approaches 0, and tan = sin / cos divides by it. The orange line shoots off the diagram. Use the (dx, dy) vector instead of a slope when you can.

Floating point noise

At exactly 90°, Math.cos returns about 6e-17, not 0, because π/2 can’t be stored exactly. Compare with a tolerance, never with ==. The Float lab shows what’s really stored.

Screen y points down

Like rows on a Tetris board, screen y starts at 0 at the top and grows downward. So y = r * Math.sin(angle) draws your circle upside down. Subtract instead: y = centerY - r * Math.sin(angle), as this page does.