9 Trigonometry for web developers

Trigonometry turns out to be a practical tool for web developers rather than just an abstract math topic. The chapter introduces the core ideas behind sine, cosine, and tangent using the right triangle and the unit circle, showing how these functions describe positions, slopes, and repeating wave patterns. It also explains the angle units used in web work, especially degrees and radians, and shows how to convert between them so CSS and JavaScript trig functions can be used correctly together.

With those basics in place, the chapter demonstrates how trig powers circular layouts and motion. Using cosine and sine, developers can place items evenly around a circle, build circular menus, and animate elements along orbit-like paths. The same ideas can be applied in CSS or JavaScript, depending on whether more control or simpler implementation is needed, and they also extend to spinners and pendulum-like motion by updating angles over time.

The chapter then shifts to wave and direction-based effects. It shows how sine waves can position letters or other elements in a wave pattern, and how amplitude, frequency, and phase shift make those waves dynamic and visually interesting. Finally, it explains how atan2 helps compute the direction from one point to another, which is useful for rotating arrows, pointers, or other interface elements toward targets such as the mouse cursor, with special emphasis on why atan2 is more reliable than simpler inverse tangent calculations across all quadrants.

A right triangle and its sides relative to the angle theta (θ).

The graph of sin(θ) for -2π ≤ θ ≤ 2π.

The graph of tan(θ) for -2π ≤ θ ≤ 2π.

Arranging menu items in a circle using JavaScript.

Arranging letters along a wave path using sin.

Using Math.atan2() to get the arrow to follow the cursor.

• Trigonometry deals with the relationships that exist within a triangle, particularly a right-angled triangle, where one of the angles is 90 degrees.
• The sine is the opposite over the hypotenuse, so it’s a measure of the vertical component of the angle.
• The cosine is the adjacent over the hypotenuse, so it’s a measure of the horizontal component of the angle.
• The tangent is the opposite over the adjacent, so it’s a measure of the steepness of the angle.
• The values of cos(θ) and sin(θ) oscillate smoothly within the range [-1, 1], so that when you graph sin(θ) or cos(θ), the result is a regular, repeating wave pattern.
• To convert from degrees to radians, use degrees * (Math.PI / 180). To convert from radians to degrees, use radians * (180 / Math.PI).
• There are seven main trig functions—sin(), cos(), tan(), asin(), acos(), atan(), and atan2()—available in both CSS and JavaScript. The JavaScript versions are methods of the Math object (Math.sin(), Math.cos(), and so on).
• You can use sin and cos to arrange page elements along a circle. For a circle with radius r centered at the point (centerX, centerY), for any angle, you calculate the x and y coordinates of that point on the circle using x = centerX + r * cos(angle) and y = centerY + r * sin(angle).
• The trig functions are useful for arranging page elements along a curved path. Multiply cos or sin to modify the amplitude of the curve, which is the maximum vertical offset from the horizontal axis. Multiply the angle to modify the frequency, which is a measure of how fast the wave cycles.
• When working with directional calculations, use atan2 to ensure the angle is correct in all quadrants.

FAQ