## DEV Community is a community of 636,189 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

loading... # 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
degreeToRad(360) === Math.PI * 2
degreeToRad(90) === Math.PI / 2
``````

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);
y = Math.sin(degreeToRad(x));
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(
degreeToRad(animationCycle * frequency)
) * pixelOffset + 'px';
animationCycle += 1;
}, 100 );
``````

See the Pen Octopus 🐙👨🏻‍💻 on CodePen

Check the full code on Github. More info about Pi here