Sine Wave Animation

This is the effect that I am trying to achieve: link

I have gotten the four waves and they are indeed animated, but I have gotten stuck on giving each of them a slightly different animation. At the current point, all curves move at the same speed, in the same direction and switch at the same place too. they should vary slightly in all these aspects. The end result I am looking for is very much like the link i posted, with difference that each wave can only have a maximum of one cycle, that is going up once and coming down once. Thank you for your input.

Below is my code:

function start() {  
  var canvas = $("canvas");
  console.log(canvas);
  canvas.each(function(index, canvas) {
      var context = canvas.getContext("2d"); 
      canvas.width = $(".box").eq(index).width();
      canvas.height = $(".box").eq(index).height();
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCurves(context, step);
      step += 1;
  });
  requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    ctx.lineWidth = 2;
    
  for (i = 0; i < 4 ; i++) {    
    var x = 0;
    var y = 0;
    ctx.beginPath();
    if (i === 0 ) {
      ctx.strokeStyle = "red";
      var amplitude = 20;
     var frequency = height / (2 * Math.PI) ; 
      console.log(i, frequency);
     }  if ( i === 1) {
         ctx.strokeStyle = "blue";
       var amplitude = 30;
      var frequency = (height / (2 * Math.PI));
      console.log(i, frequency);
     }  if ( i === 2) {
          ctx.strokeStyle = "green";
       var amplitude = 40;
       var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);     
     }  if (i === 3) {
       ctx.strokeStyle = "yellow";
       var amplitude = 50;
      var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);
     }
  ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
  while (y < height) {
    x = (width / 2) + (amplitude * Math.sin((y + step) / frequency)) ;
    ctx.lineTo(x, y);
    y++;
  }
  ctx.closePath();
  ctx.stroke();
  ctx.restore();
}
  }


$(document).ready(function() {
  start();
})

<!DOCTYPE html>
<html>

<head>
</head>

<body>
   
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>
  
</body>

</html>

And here a Code Pen

Solution

@enxaneta thank you for your input! Got it the way I wanted to, below is my solution:

var step = 0;
		
function start(timestamp) {
  			var canvas = $("canvas");
  			canvas.each(function(index, canvas) {
    			  var context = canvas.getContext("2d"); 
      			  canvas.width = $(".box").eq(index).width();
      			  canvas.height = $(".box").eq(index).height();
      			  context.clearRect(0, 0, canvas.width, canvas.height);
      			  if (canvas.height > 1000 ) {
      			  	drawWave(context, 20,"sin");
      			  	drawWave(context, 60,"cos");
      			  	drawWave(context, 40,"sin");
      			  	drawWave(context, 80,"cos"); 
      			  }

      			  if (canvas.height < 1000 ) {
      			  	drawWave(context, 10,"sin");
      			  	drawWave(context, 30,"cos");
      			  	drawWave(context, 20,"sin");
      			  	drawWave(context, 40,"cos"); 
      			  }
   				  
   				  step = timestamp / 7;
  			});
        window.requestAnimationFrame(start);
		}

		function drawWave(ctx,amplitude,trig){
  			var width = ctx.canvas.width;
  			var height = ctx.canvas.height;
  			ctx.beginPath();
  			ctx.lineWidth = 2;
  			ctx.strokeStyle = "blue";

  			var x = 0;
  			var y = 0;
  			var frequency = height / (2 * Math.PI);
  			ctx.save();
  			ctx.translate(-amplitude * Math[trig](step / frequency), 0);
  			while (y < height) {
   			 	x = width / 2 + amplitude * Math[trig]((y + step) / frequency);
    			ctx.lineTo(x, y);
   				 y++;
 			 }
  			// ctx.closePath();
  			ctx.stroke();
  			ctx.restore();
		}
$(document).ready(function() {
  start();
});

canvas {
  background-color: wheat;
  position: absolute;
}
.box {
width: 500px;
 height: 2000px;
  border: solid;
}

.box.t {
width: 500px;
 height: 200px;
  border: solid;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
     <div class="box t">
       <canvas id="canvas"></canvas>
    </div>
  
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>

</body>

</html>