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

## Top comments (0)