{{ message }}

Instantly share code, notes, and snippets.

# gkhays/DrawSineWave.html

Last active Nov 23, 2021
Oscillating sine wave, including the steps to figuring out how to plot a sine wave

# Draw a Sine Wave in JavaScript

### To Do

I am revisiting the Fourier transform so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.

## Simple Animation

The end result is an oscillating sine wave. Nothing ground-breaking but it looks pretty cool to me. The JavaScript function to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis. See the simple plot below. In this case, the `draw()` function makes the repeat calls via `window.requestAnimationFrame(draw)`.

```function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.clearRect(0, 0, 500, 500);
showAxes(context);
context.save();

plotSine(context, step, 50);
context.restore();

step += 4;
window.requestAnimationFrame(draw);
}```

Note: The astute observer may observe the animation above isn't actually JavaScript but is instead an animated gif. I did this since it is currently not possible to run JavaScript from a gist although it is possible using `bl.ocks.org`.

## Superimposed Sine Waves

After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I kept it around. It reminds me of Spirograph. 😄 The `step` advances the starting point along the y-axis.

```var step = 4;
for (var i = -4; i < canvas.height; i += step) {
plotSine(context, i, 54 + i);
}```

## Simple Plot

My initial attempt to draw a sine wave on an `HTML5` canvas. ```<body onload="init()">
<h3>Oscillating Sine Wave</h3>
<canvas id="canvas" width="500" height="100"></canvas>
</body>```
```function plotSine(ctx) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var scale = 20;

ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";

var x = 0;
var y = 0;
var amplitude = 40;
var frequency = 20;
//ctx.moveTo(x, y);
while (x < width) {
y = height/2 + amplitude * Math.sin(x/frequency);
ctx.lineTo(x, y);
x = x + 1;
}
ctx.stroke();
}```

Interesting tidbit: If we uncomment `ctx.moveTo(x, y)` just before the loop we get a vertical line. ## References

I found this animated gif in Reddit. From the Fourier series definition in Wikipedia. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 Sine Wave

Oscillating Sine Wave

Multiple Sine Waves      ### vincent64 commented May 30, 2018 • edited Loading

 Very nice and interesting ! Just a question, how can I make this with Hz mesure ?

### cmsnerd commented Aug 29, 2018

 Hi,how can i make trig-aha.gif works with pure js on canvas? Here is the very similar jsfiddle: https://jsfiddle.net/2L4ubgpx/85/

### kamyfakhr commented Mar 21, 2021

 Hi, Amazing job! I just wonder how we can make it interactive? Like touching the waves by hand and set the frequency? Thanks,

### Sanjeev-kumaar008 commented Apr 7, 2021

 it is not working for high order frequencies ...how can i tackle that problem ??