DEV Community

loading...
Cover image for Happy Pi Day ๐ŸŽ‰ Smooth animations with Math.sin!

Happy Pi Day ๐ŸŽ‰ Smooth animations with Math.sin!

astagi profile image Andrea Stagi ใƒป3 min read

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);
}
Enter fullscreen mode Exit fullscreen mode
degreeToRad(180) === Math.PI
degreeToRad(360) === Math.PI * 2
degreeToRad(90) === Math.PI / 2
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode


Math.sin(Math.PI / 2) === 1
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

In the JavaScript code set the canvas width fullscreen

var canvas = document.getElementById("sinCanvas");
canvas.width = window.innerWidth;
var ctx = canvas.getContext("2d");
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

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 )
Enter fullscreen mode Exit fullscreen mode

You can also adjust the frequency multiplying x by a value

y = Math.sin(degreeToRad(x * 10));
Enter fullscreen mode Exit fullscreen mode

(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">
Enter fullscreen mode Exit fullscreen mode
var marginTopBase = -350

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

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;
Enter fullscreen mode Exit fullscreen mode

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 );
Enter fullscreen mode Exit fullscreen mode

See the Pen Octopus ๐Ÿ™๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป on CodePen

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

Discussion (0)

pic
Editor guide