Smooth Wave in HTML5

Waves in HTML5

A sine wave is a mathematical function that is repeated at a regular interval of time. The function is used in many fields including mathematics, physics, and engineering. We can also say that a sine wave is a smooth wave.

It has the following properties:

The sine wave is blue whenever the value is positive.
The sine wave is red whenever the value is read.
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. Theta will vary from 0 degrees to 1040 degrees.

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

Since sine waves have both positive and negative values, a sine wave varies from -1 to 1. Since the canvas has only positive values in the y axis, we will need to reconfigure the bitmap so that 0 and negative values can also be represented. To do this, in the sample above 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).

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 will now create the "sineWave()" method.

Step 1

In this method, we will find the sine of the angle; see:

var y = Math.sin(x*Math.PI/180);

Step 2

If the sine value is positive then map it above y = 100 and change the color to blue, as in the following:

if(y >=0)
{
y = 100 - (y-0) * 50;
ctx.fillStyle = "blue";
}

Step 3

If the sine value is negative then map it below y = 100 and change the color to red, as in the following:

if( y < 0 )
{
y = 250 + (0-y) * 50;
ctx.fillStyle = "red";
}

Step 4

We will use the fillRect method to draw the actual wave.

ctx.fillRect(x, y, Math.sin(x * Math.PI/180) * 5, Math.sin(x * Math.PI/180 * 5);

After that we increment the angle, as in the following:

x+=1,

Step 5

When the angle reaches 1040, stop the animation, as in the following:

if(x > 1040)

clearInterval (animFlag);

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
]
<script type="application/javascript">
var x = 0;
var animFlag;
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// 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>
<body onload="init();">
<canvas id="canvas" width="700" height="300"></canvas>
</body>
</html>

Output

Image 1

Image 2

Image 3

Image 4