Math.cos(angle) returns the cosine of an angle expressed in radians. In frontend work, it commonly supplies the horizontal part of a circular calculation: add radius * Math.cos(angle) to a center x-coordinate. Pair it with Math.sin(angle) for the vertical y-coordinate, and a changing angle becomes a point moving around a circle. section 9.2.1 section 1.3.2
Place menu items around a circle
A circular navigation menu starts with a center point and radius. Divide the full circle, 2π, by the number of items to get an angle step. For each item, multiply that step by its index, then calculate x with cosine and y with sine. Absolute positioning places the item at that point; translate(-50%, -50%) centers the item on it. const angleStep = (2 * Math.PI) / items.length; const angle = angleStep * index; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); 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 complete menu function to see angle spacing, cosine-based x placement, sine-based y placement, and final CSS positioning together. section 9.2.1
For motion, repeat the same coordinate calculation every animation frame. Incrementing angle changes the cosine result, so the element advances horizontally around its path. A smaller speed increment slows motion; a larger one speeds it up; a negative value reverses direction. requestAnimationFrame schedules the next update. section 9.2.2
Animate an orbiting element
Use cosine for x and sine for y on each frame, then move the element with a transform. let angle = 0; function animate() { angle += speed; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); element.style.transform = `translate(${x}px, ${y}px)`; requestAnimationFrame(animate); } When the item count is fixed or the animation is simple, CSS can use cos() and sin() with custom properties instead. An animated --angle from 0deg to 360deg drives the same circular placement. section 9.2.2
Cosine also produces back-and-forth motion. A swinging sign can use maxAngle * Math.cos(speed * t) as its current angle: maxAngle sets the swing extent, speed controls oscillation, and time keeps the value changing. That angle can then determine the pendulum bob’s position from its pivot. section 9.3.3
In pointer-driven effects, cosine can split a mouse angle into a horizontal rotation component. Combined with Math.atan2(), Math.sin(), distance, and a scaled tilt intensity, it helps rotate an element more strongly as the pointer moves farther from its center. section 10.2.3
The practical pattern is consistent: choose an angle, scale cosine by the distance or amplitude you need, and add the result to the relevant horizontal baseline. Use Math.sin() alongside it whenever the UI needs the matching vertical component. section 9.2.1 section 9.3.3
