Sine Waves in HTML5/JavaScript

 

The Sine Wave

Sine waves are curves that plot the graph of the mathematical sine function. They look like this;

 

The wave can be stretched or compressed horizontally or vertically by any amount and it will still be a sine wave.

The sine wave and sine (or sin) function are used in many branches of maths and science and are also very prominent in signal processing. The reason they are prominent in signal processing is that a sine wave signal has only one frequency, which is the least amount of spectral (frequency) information possible.

The graph above is a sine wave signal in the time-domain. The wave in the frequency-domain looks like the graph below.

Sine Waves in the Frequency Domain

Sinusoidal waves

The sine wave starts its cycle at 0 amplitude. The sine wave and all the other waves are shaped like sine waves but do not start at 0 amplitude are called sinusoidal waves. The cosine wave is the most common of these after the sine wave. It is +90° out of ‘phase’ with the sine wave which means that it starts 1/4 cycle earlier. The phase is the point in the oscillation/cycle. When x = 0 on a cosine graph then y = 1.

Using both of these functions we can plot a circle. When you pull a guitar string down and away from the guitar body it produces get sinusoidal waves on both the x and y axises. Both axises are cosine waves so the string usually just travels back and forth, on a 45o angle to the guitar body, on roughly the same path.

 

Sine Waves in Audio Signal Processing

Sound engineers refer to sinusoidal waves as pure tones because they are made up of only 1 frequency. The waves are repeated to generate constant tones. Hear a sine wave below.

It is not the most interesting sound but this will become very useful later in this series.

 

JavaScript Sine Wave Generator

For this post, I created a sine wave generator module which is used in the demonstrations of this post and will also be heavily used later. The mathematical sine function is available in all programming languages with a maths library and even on a scientific calculator.

The mathematical function takes a phase argument in radians and returns values between the maximum and minimum peaks, -1 and +1 inclusive. Since the function is readily available then the generator module does not have to do too much. It does allow for different instances to be created so that many sinusoidal waves can be managed. Each instance tracks the state of its own wave and can return to the caller the amplitude of the next sample using the getSample function. It also has a reset function to set it back to its original state for reuse. Like the sine function, The created the module also returns values between -1 and +1 but the original phase can be offset using an argument in degrees during instantiation.

 

Sine Wave Generator in Action

The image below, and the image of the sine wave from earlier in the article, are not actually images at all. They are HTML5 canvases which use the Sine Wave generator module.

The sine wave is in blue
The cosine wave is in red

If the following demonstrations do not run smoothly then it is because there are in running in Iframes. You can stop them both using the buttons and there are direct links to the pages where they should run much better.

 

Naturally Occurring Sine Saves

Link to Page

Click on the canvas for full screen
This illustrates one on the numerous naturally occurring sinusoidal waves. It should look something like ripples in water. The sine wave affects the height of the water and each point. Sine and Cosine waves are also put to other uses here, though. The shape of each ripple is drawn using a sine and cos. The slider allows for specifying the number of sides the ripple shape should have. Each ripple is the regular form (when the angle is from above) of the shape with the same number of sides as specified by the slider. The largest amount sides/points is 100. When it gets to around 50+ sides, at this size, the shape appears to be a circle. The least number of sides is 3 which draws a triangle with 3 equally spaces points on the perimeter of a circle (when viewing from above).

The angle slider is just for fun.

I also could have also used sin and cos to give more of a realistic feel when changing the viewing angle.

 

Sine Waves and Circles

The demo below uses a sine and a cosine to plot the perimeter of a circle. The sine function is used for the circle y-axis and is then used to plot the sine wave. So continuously moving around on a sine wave on the y-axis and a cosine wave on the x-axis will produce a circle. Applying this Sine function to a graph against time on the y-axis will produce a sine wave. A moving picture is worth 1,000 words per frame so click the start button to see what I mean.

Link to Page

 

The Sound of Sine Waves

Ok, time for me to come clean. The only demonstration on the page that does not actually use the sine wave generator is the audio sine wave. It uses the Web Audio API OscillatorNode, because it’s simple and was easy to implement. There will be plenty opportunity to use the generator to actually make sound later on.

 

Change Log

  • Sine Generator module.
  • Full-Screen module.
  • Sine and Cosine graphs.
  • Ripple demonstration.
  • Sine and cosine relationship with circle demonstration.

Source Code (click to expand)

Scripts/com/littleDebugger/daw/dsp/generator/sineWave.js


Scripts/com/littleDebugger/ui/fullScreenEvent.js


Styles/ripple.css


Ripple.html


SineCircle.html


SineCosineGraph.html


SineGraph.html


SineSound.html


Scripts/ripple.js


Scripts/sineCircle.js


Scripts/sineGraph.js


Scripts/sineSound.js


Scripts/com/littleDebugger/namespacer.js


Leave a Reply