Andrea Stagi

Posted on

# Happy Pi Day π Smooth animations with Math.sin!

Pi Day is celebrated on March 14th around the world π

Pi (often represented by Greek letter `Ο`) is the symbol used in mathematics to represent a specific constant value: the ratio of the circumference of a circle to its diameter, which is approximately `3.14159`.

In this article we'll play with `Ο` value and create a simple animation using JavaScript to make an octopus floating in the sea π (see the Pen Octopus ππ¨π»βπ» on CodePen)

## The sine function

In JavaScript `Ο` value is accessible from the `Math` module using `Math.PI` constant. Before using trigonometric functions to animate things like `sine` (`Math.sin` in JavaScript), we need a method to convert degrees values from 0 to 360 to radians

``````function degreeToRad(angle) {
return angle * (Math.PI / 180);
}
``````
``````degreeToRad(180) === Math.PI
``````

In a right angled triangle, the sine of an angle is the length of the side opposite the angle divided by the length of the hypotenuse.

``````sin (ΞΈ) = opposite / hypotenuse
``````

``````Math.sin(Math.PI / 2) === 1
``````

To see `Math.sin` in action let's try to create a simple script to graphically represent `sine` function.

We need a canvas to draw the function

``````<canvas id="sinCanvas" height="360" style="border: 1px solid black;"></canvas>
``````

In the JavaScript code set the canvas width fullscreen

``````var canvas = document.getElementById("sinCanvas");
canvas.width = window.innerWidth;
var ctx = canvas.getContext("2d");
``````

And then calculate `Math.sin(x)` where `x` is a value from 0 to 360 degrees converted to radians using our beloved function `degreeToRad` (ignore value 180, it's just an offset for the canvas)

``````var x = 0, y = 0;

for ( x = 0; x <= 360; x += 1 ) {
ctx.moveTo(x, y * 180 + 180);
ctx.lineTo(x, y * 180  + 180);
ctx.stroke();
}
``````

A sine wave (or sinusoid) is now easy to generate, multiplying 360 by a value representing cycles (4 in this case)

``````for ( x = 0; x <= 360 * 4; x += 1 )
``````

You can also adjust the frequency multiplying `x` by a value

``````y = Math.sin(degreeToRad(x * 10));
``````

(I omit the code to add extra elements to canvas, for more check the full code on Github)

## Smooth animations with Math.sin

In this section we'll try to make an octopus taken from the LotrΓ¨k 404 page floating in the sea!

As you can see from the previous section, sine waves are a good choice for creating cyclic smooth animations: we can use a full sine wave that goes from 0 to Ο Γ 2 and generate a movement that goes from -1 to 1 and back smoothly.

Setup the octopus π image and position

``````<img id="myOctopus" src="./octopus_01.png">
``````
``````var marginTopBase = -350

var octopus = document.getElementById("myOctopus");
octopus.style.position = 'relative';
octopus.style.marginTop = marginTopBase;
octopus.style.marginLeft = -40;
``````

Then set the desired `frequency` of the final animation and the `pixelOffset` (`Math.sin` results between -1 and 1 will be multiplied by this value)

``````var frequency = 10;
var pixelOffset = 10;
``````

The animation will live in an interval where variable `animationCycle` is incremented and the marginTop of our octopus is recalculated with `Math.sin` to make the animation smooth

``````var animationCycle = 1;

window.setInterval( function() {
octopus.style.marginTop = marginTopBase - Math.sin(