Trigonometry turns an angle into useful screen coordinates. In frontend work, sine and cosine place, rotate, and animate elements around curves; tangent describes a line’s steepness. Start with a right triangle: sin(θ) = opposite / hypotenuse, cos(θ) = adjacent / hypotenuse, and tan(θ) = opposite / adjacent. section 9.1.1
On a unit circle, cosine gives the horizontal coordinate and sine gives the vertical coordinate: x = cos(θ), y = sin(θ). For a circle centered at (centerX, centerY) with radius r, scale and shift those values: x = centerX + r × cos(angle); y = centerY + r × sin(angle). section 9.1.1 section 9.6
Place a circular menu
Divide a full turn, 2π, by the number of items to get an angle step. Multiply that step by each item index, then calculate its left and top positions with Math.cos() and Math.sin(). Centering each item with translate(-50%, -50%) puts its midpoint on the circle. This JavaScript approach adapts when the item count changes; fixed menus can use CSS sin() and cos() with nth-child(). section 9.2.1
Listing 9.1 Circular menu with JavaScript
function generateCircularMenu(items, centerX, centerY, radius) {
const angleStep = (2 * Math.PI) / items.length; #1
items.forEach((item, index) => { #2
const angle = angleStep * index; #3
const x = centerX + radius * Math.cos(angle); #4
const y = centerY + radius * Math.sin(angle); #4
item.style.left = x + 'px'; #5
item.style.top = y + 'px'; #5
item.style.transform = 'translate(-50%, -50%)'; #5
});
}
const items = document.querySelectorAll('.menu-item'); #6
const radius = 100; #6
const centerX = 150; #6
const centerY = 150; #6
#6
generateCircularMenu(items, centerX, centerY, radius); #7
Inspect the angle-step loop that converts each menu item index into a point on a circle. section 9.2.1
The same relationships support common UI effects:
- Use sin or cos values that smoothly repeat from −1 to 1 for wave, floating, or bouncing motion; scale the value to change amplitude and scale the angle to change frequency. section 9.1.1 section 9.6
- Use CSS rotation, curved motion, and trigonometric positioning for circular layouts and animations. section 1.4.8
- Use atan2 for directional calculations when an angle must work correctly across all quadrants. section 9.6
Angles may be expressed in radians rather than degrees. Convert degrees with degrees × (Math.PI / 180), and convert radians with radians × (180 / Math.PI). CSS and JavaScript provide sin(), cos(), tan(), inverse functions, and atan2(); JavaScript exposes them through Math, such as Math.sin() and Math.cos(). section 9.6 section 1.3.2
