Applying Math.cos() and Math.sin() for Circular Rotations in JavaScript

When creating applications with visual animations or dealing with graphics in JavaScript, one often encounters scenarios where rotation is required. A common method of achieving circular rotations involves using trigonometric functions, specifically Math.cos() and Math.sin(). In this article, we will delve into leveraging these functions to perform circular rotations.

Introduction to Trigonometric Functions in JavaScript

Before we dive into examples, it’s essential to understand the basics of trigonometric functions in JavaScript. The Math.cos() and Math.sin() methods belong to the Math object, which provides a library of mathematical functions and constants.

Math.cos(angle)

Returns the cosine of the angle provided in radians.

Math.sin(angle)

Returns the sine of the angle provided in radians.

Radian vs Degree

A crucial note is that Math.cos() and Math.sin() require the input angle to be in radians, not degrees. To convert degrees to radians, use the following formula:

function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

Applying Circular Rotation

Circular rotation involves processing points around a circle. The typical coordinate of a point on a circle with radius r and center at origin is calculated as follows:

• x = r * Math.cos(theta) - X-coordinate
• y = r * Math.sin(theta) - Y-coordinate

Here, theta is the angle of rotation in radians.

Animating a Circular Rotation

Let's create a basic animation that rotates a point around the center of a 100x100 unit area kept inside an HTML canvas element. This example makes it clear how Math.cos() and Math.sin() are useful in visual animations.

<canvas id="canvas" width="200" height="200"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const radius = 50;

function drawCircle(x, y) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2); // Draw circle
    ctx.fillStyle = 'blue';
    ctx.fill();
}

let angle = 0;
function animate() {
    angle += 0.01; // Increment angle
    const x = 100 + radius * Math.cos(angle); // Update x
    const y = 100 + radius * Math.sin(angle); // Update y
    drawCircle(x, y);
    requestAnimationFrame(animate);
}
animate();