Longitudnal Wave

This is a longitudnal wave simulation. Longitudnal Waves propagate in the form of compressions and rarefactions.
It is different from transverse wave because the particles move in the direction of wave proparation whereas in transverse wave they move perpendicular to the wave.
This is exactly how sound waves propagate in the air.
You can play with the parameters to see the effect on the wave.

Code

            
    elem=document.querySelector(".example-container");
    setCanvas(elem);
    t=0;

    function draw(){
        lambda=document.getElementById("lambda").value;
        amp=document.getElementById("amp").value;
        timep=document.getElementById("timep").value;
        n=document.getElementById("np").value;
        d=WIDTH/n;
        clearCanvas();
        points=[];

        for(i=-WIDTH/2+200;i<WIDTH/2-200;i+=d){

            x=amp*sin(i*2*PI/lambda-t*2*PI/timep)
            ic=mapRange(i,-WIDTH/2+200,WIDTH/2-200,0,360);
            new rect(WIDTH/2+i+x,HEIGHT/2-100,d/4,200,`hsl(${ic},100%,50%)`,1,'#fff',0);
                
        }

        t+=0.01;
        requestAnimationFrame(draw);
    }
    
    draw();

    document.getElementById("lambda").addEventListener("input",function(){
        document.getElementById("wlval").innerHTML=this.value;
    });
    document.getElementById("amp").addEventListener("input",function(){
        document.getElementById("aval").innerHTML=this.value;
    });
    document.getElementById("timep").addEventListener("input",function(){
        document.getElementById("tval").innerHTML=this.value;
    });
    document.getElementById("np").addEventListener("input",function(){
        document.getElementById("nval").innerHTML=this.value;
    });