JavaScript Canvas Sine Wave

Ciprian on Friday, April 28, 2023 in Canvas
Last modified on Friday, April 28, 2023

The code below generates a sine wave with a specified amplitude, frequency, and phase. The wave is drawn on the Canvas using the lineTo method, which creates a line from the current position to the specified x and y coordinates. The wave is redrawn on each frame of the animation using the requestAnimationFrame method, with the phase value incremented slightly to create the appearance of movement.

<canvas id="waveCanvas" width="600" height="400" style="width: 600px; height: 400px;"></canvas>

var canvas = document.getElementById("waveCanvas");
var ctx = canvas.getContext("2d");

var amplitude = 100;
var frequency = 0.05;
var phase = 0;

function drawWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);

for(var x = 0; x < canvas.width; x++) {
    var y = amplitude * Math.sin(frequency * x + phase);
    ctx.lineTo(x, y + canvas.height / 2);
}

ctx.strokeStyle = "blue";
ctx.stroke();

phase += 0.05;

requestAnimationFrame(drawWave);
}

drawWave();

Next, I added an amplitude function. The amplitude value is incremented by a random value within a specified range, causing the wave to wiggle. I can now adjust the wiggleAmplitude value to control the strength of the wiggle effect.

var canvas = document.getElementById("waveCanvas");
var ctx = canvas.getContext("2d");

var amplitude = 100;
var frequency = 0.05;
var phase = 0;

var wiggleAmplitude = 5;

function drawWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);

amplitude += Math.random() * wiggleAmplitude - wiggleAmplitude / 2;

for(var x = 0; x < canvas.width; x++) {
    var y = amplitude * Math.sin(frequency * x + phase);
    ctx.lineTo(x, y + canvas.height / 2);
}

ctx.strokeStyle = "blue";
ctx.stroke();

phase += 0.05;

requestAnimationFrame(drawWave);
}

drawWave();

Optionally, I can set the strokeStyle of the Canvas context to a random hexadecimal color value, so that the wave will be drawn in a different color on each frame of the animation. This creates a dynamic and colorful effect for the wave. I can adjust the range of the random color values to create different color palettes for the wave. I have not used the code below in my final code, as the result was too flickering.

ctx.strokeStyle = "#" + Math.floor(Math.random() * 16777215).toString(16);
ctx.stroke();

After messing with the variables and adding a bit more randomness, I got a nice, futuristic since wave.

var canvas = document.getElementById("waveCanvas");
var ctx = canvas.getContext("2d");

var amplitude = 10;
var frequency = 0.05;
var phase = 0;

var wiggleAmplitude = 5;

function drawWave() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);

    amplitude += Math.random() * wiggleAmplitude - wiggleAmplitude / 2;

    var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, "#57076B");
    gradient.addColorStop(0.25, "#D058EE");
    gradient.addColorStop(0.5, "#C110EB");
    gradient.addColorStop(0.75, "#5E286B");
    gradient.addColorStop(1, "#950DB8");

    ctx.strokeStyle = gradient;

    for (var x = 0; x < canvas.width; x++) {
        var y = amplitude * Math.sin(frequency * x + phase);
        y += Math.random() * 10 - 5; // add random noise to y value
        var lineWidth = Math.random() * 10 + 1; // generate random line width between 1 and 11
        ctx.lineWidth = lineWidth;
        ctx.lineTo(x, y + canvas.height / 2);
    }

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.shadowColor = "#F6055D";
    ctx.shadowBlur = Math.random() * 72 + 1;
    ctx.shadowOffsetY = 8;

    ctx.stroke();

    phase += 0.05;

    requestAnimationFrame(drawWave);
}

drawWave();

See a demo below:

See the Pen JavaScript Canvas Sine Wave by Ciprian (@ciprian) on CodePen.

Like1