Math.sin(angle) returns the sine of an angle in radians: a value that changes smoothly from −1 to 1. That smooth, repeating output makes it useful whenever a UI needs motion or placement that follows a circle, arc, or gentle back-and-forth wave. In JavaScript, it commonly supplies the vertical component of a calculation while Math.cos() supplies the horizontal one. section 12.3.2 section 1.3.2
For a point on a circle centered at (centerX, centerY), calculate its y-position with `centerY + radius * Math.sin(angle)`. As the angle advances, the sine result moves the point above and below the center. Pair that value with `centerX + radius * Math.cos(angle)` to place the point around the full circle. section 9.2.1 section 9.2.2
Arrange menu items around a circle
Divide a full circle, `2 * Math.PI`, by the item count to get an angle step. For each item, multiply that step by its index, calculate `y` with `Math.sin(angle)`, and assign the resulting coordinates to `left` and `top`. This JavaScript approach accommodates a varying number of menu items; a fixed set can instead use CSS `sin()` with custom properties and `nth-child()` rules. 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
The listing shows the paired coordinate calculation: `Math.sin(angle)` determines each menu item’s y-position before absolute positioning and centering transform are applied. section 9.2.1
To animate circular motion, repeat the same coordinate calculation every frame. Increase `angle` by a speed value, calculate the next y-coordinate with `Math.sin(angle)`, move the element with a transform, and schedule the next frame with `requestAnimationFrame()`. Smaller speed values slow the motion; negative values reverse its direction. section 9.2.2
Turn an advancing value into a pendulum swing
A continuously increasing angle does not need to represent a visible geometric angle. Feed it to `Math.sin()` each frame, then multiply the result by an amplitude. Applying `amplitude * Math.sin(angle)` to `rotate(...)` produces a smooth oscillation; amplitude controls the swing size and the per-frame increment controls its pace. section 12.3.2
Listing 12.8 Simulating a pendulum
const pendulum = document.getElementById('pendulum');
let angle = 0;
const speed = 0.05; #1
const amplitude = 45; #2
function animate() {
const rotation = amplitude * Math.sin(angle); #3
pendulum.style.transform = `rotate(${rotation}deg)`; #4
angle += speed; #5
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
This compact animation maps the sine output directly to a rotation, making the separate roles of speed, amplitude, and frame updates easy to inspect. section 12.3.2
The same directional behavior can support pointer-responsive effects. After measuring a pointer’s angle and distance from an element center, a sine-based vertical rotation can be scaled by distance, so the tilt grows stronger toward the element edge. The result can be combined with cosine-based horizontal rotation and a subtle scale change. section 10.2.3
