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();

Practice: Making Adjustments

This base setup achieves the basics of circular rotation. To enhance this, consider additional factors such as speed and direction (clockwise or counter-clockwise) of rotation:

// Adjust speed by changing angle increment
angle += 0.05; // Faster
angle -= 0.05; // Faster and counter-clockwise

Similarly, by adding adjustments to the center points (100, 100 in our example), you can shift where the rotation occurs, providing a flexible animated effect for various applications, from games to data visualizations.

Conclusion

The use of Math.cos() and Math.sin() in JavaScript goes beyond performing calculations in the backend. It opens up creative possibilities in front-end development, allowing the construction and animation of objects in elegant and precise ways. By mastering these functions for circular movements, developers can enhance the interactivity and visual appeal of their projects.