Animation - Sine Wave

Creating Sine Waves

A sinusoidal wave or sine wave is a mathematical function that can be graphed as smooth waves that are repetitive at regular intervals. The function is used in many fields including mathematics, physics, and engineering. To learn more about how sinusoidal waves are created, go here.

In the above animation, the sine wave graphics has the following properties.

1. The sine wave is blue whenever the value is positive
2. The sine wave is red whenever the value is red
3. The thickness of the line is directly proportional to the absolute value of the magnitude of the wave. For example, where the sine value reaches 0, the wave is absent.

On the x-axis, we will map the angle Theta. In the above animation, Theta will vary from 0 degree to 1040 degrees.

On the y-axis, we will map sin(Theta). For this, we will use the Math function Math.sin. The Math.sin function takes angles in radians. So the angle is multuplied by PI / 180 first.

As is the nature of the sine wave, it has both positive values and negative values. A sine wave varies from -1 to 1. Since the canvas has only poitive values in the y axis, we will have to reconfigure the bitmap so that 0 and negative values can also be represented. To achieve this, in the above animation, the 0 value is mapped to y = 100 on the bitmap. The waves are limited from y = 50 (when sine(theta) = 1) to y = 150 (when sine(theta) = -1). Thus, the mapping function will look like this:

When sineValue > 0,

y = 100 - (sineValue-0) * 50;

when sineValue < 0,

y = 100 + (0 - sineValue) * 50;

So when the sineValue is positive, the wave is drawn above y = 100. When it is negative, the wave is drawn below y = 100. The multiplication by 50 is to scale the wave, so that it falls between y = 50 and y = 150.

We have to call the sineWave() function repeatedly at regular intervals. We will use the setInterval() method for this. The setInterval takes 2 parameters:

1. The function that is to be called at regular intervals
2. The interval in microseconds

setInterval(function() {sineWave()}, 1)

The above function will call moveBanner() function every 1 microseconds.

Now, let's put it all together

HTML Code

<html>
<head>
<script type="application/javascript">

var x = 0;
var animFlag;

function init() {

// Call the sineWave() function repeatedly every 1 microseconds
setInterval(function() {sineWave()}, 1)
}

function sineWave()
{
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

// Find the sine of the angle
var y = Math.sin(x*Math.PI/180);

// If the sine value is positive, map it above y = 100 and change the colour to blue
if(y >=0)
{
y = 100 - (y-0) * 50;
ctx.fillStyle = "blue";
}

// If the sine value is negative, map it below y = 100 and change the colour to red
if( y < 0 )
{
y = 250 + (0-y) * 50;
ctx.fillStyle = "red";
}

// We will use the fillRect method to draw the actual wave. The length and breath of the
ctx.fillRect(x, y, Math.sin(x * Math.PI/180) * 5, Math.sin(x * Math.PI/180 * 5);

// Increment the angle.
x+=1;

// When the angle reaches 1040, stop the animation.
if(x > 1040)
clearInterval (animFlag);
}}
</script>
<title>Animation - Sine Wave</title>
</head>
</html>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas>
</body>
</html>