JSFiddle - React, Tailwind, and code Playground

by kotsoft

HTML

<canvas></canvas>

JavaScript

b = document.body;
c = document.getElementsByTagName('canvas')[0];
a = c.getContext('2d');

var nPoints = 50;
var f1 = Array(nPoints);
var f2 = Array(nPoints);
var f3 = Array(nPoints);
for (var i = 0; i < nPoints; i++) {
    f1[i] = f2[i] = f3[i] = 0;
}

f3[25] = f3[26] = f3[27] = 20;
setInterval(function() {
    c.width=innerWidth;
    c.height=innerHeight;
    var f4 = f1;
    f1 = f2;
    f2 = f3;
    f3 = f4;
    var sum = 0;
    for (var i = 1; i < nPoints-1; i++) {
        sum += f3[i] = .99*(2*f2[i] - f1[i] + .5*(f2[i-1]+f2[i+1]-2*f2[i]));
    }
    sum /= nPoints;
    for (var i = 1; i < nPoints-1; i++) {
        f3[i] -= sum;
    }
    
    var scaleX = innerWidth/(nPoints-1);
    var midY = innerHeight/2;
    a.beginPath()
    a.moveTo(0, innerHeight);
    for (var i = 0; i < nPoints; i++) {
        a.lineTo(i*scaleX, midY+f3[i]);
    }
    a.lineTo(innerWidth, innerHeight);
    a.fill();
}, 33);