Javascript-форум - Как сделать анимацию волн при этом чтобы каждый квадрат также анимировался?

Пытаюсь сделать анимацию волн со слоями, с помощью математических функций. Мне удалось сделать два примера.
Вот пример 1.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style type="text/css">
	html, body {
		margin: 0px;
	}

	canvas {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
	}
</style>

</head>
<body>
<canvas id="canvas">
        Your browser does not support HTML5 canvas. If you would 
        like to view, please update your browser. 
</canvas>

<script>
Rectangle = function(x, y, w, h,color)
{
  
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
  this.color = color;
  
  this.draw = function(ctx)
  {
      
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }

}    
 
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var context = canvas.getContext("2d");
var rect;



   var targetY = 100;
   var duration = 1000;
   var posX = 120;
   var posY = 50;

  
  var angle=0;
  var angleStep=30;
  var angleSpeed=2;
  var distance = 60;  
  var waveHolder = [];

  function init()
  {
    var colors=["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#FF0066"];
  
    waveHolder = [];
    var spr;
    for (var i = 0; i < colors.length; i++) 
    {
       
       waveHolder.push(spr = addContent(colors[i]));
    }
    angle = 0;
		angleStep = 30;
		angleSpeed = 8;
		distance = 60;
    update();
  }
  
  function addContent(color)
  {
          
            var rect = [];
            
            
            for (var i = 0; i < 5; i++) 
            {
               rect[i] = new Rectangle(i * 35, 30, 30,30,color);
               rect[i].draw(context);
            }
            return rect;
            
  }
  
  init();

  var spr = [];  
    
 function update() 
 {
  
   context.clearRect(0, 0, canvas.width, canvas.height);
    var currAngle;
   
  

    for (var i = 0; i < waveHolder.length; i++) 
    {
      for(var j = 0; j < 5; j++)
      {
        spr = waveHolder[i][j];
        currAngle = (angle+angleStep * i) * Math.PI / 180;
        spr.x = posX+(j*35 - i * 5);
        spr.y = posY+(Math.sin(currAngle) * distance);
        spr.draw(context);
      }
    }
    angle+= angleSpeed;
    angle %= 360;
    requestAnimationFrame(update); 
 }
 
</script>
</body>
</html>

Вот пример 2.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style type="text/css">
	html, body {
		margin: 0px;
	}

	canvas {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
	}
</style>

</head>
<body>
<canvas id="canvas">
        Your browser does not support HTML5 canvas. If you would 
        like to view, please update your browser. 
</canvas>
<script>
Rectangle = function(x, y, w, h,color)
{
  
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
  this.color = color;
  
  this.draw = function(ctx)
  {
      
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  }

}

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var context = canvas.getContext("2d");
var rect;
   var targetY = 100;
   var duration = 1000;
   var posX = 120;
   var posY = -70;

  
  var angle=0;
  var angleStep=30;
  var angleSpeed=2;
  var distance = 60;  
  var waveHolder = [];
  var startTime = new Date().getTime();  
    const letterSpacing = 35; 

  function init()
  {
    var colors=["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#FF0066"];
  
    waveHolder = [];
    var spr;
    for (var i = 0; i < colors.length; i++) 
    {
       
       waveHolder.push(spr = addContent(colors[i]));
    }
    angle = 0;
		angleStep = 30;
		angleSpeed = 8;
		distance = 60;
    update();
  }
  
  function addContent(color)
  {
          
            var rect = [];
            
            
            for (var i = 0; i < 5; i++) 
            {
               rect[i] = new Rectangle(i * 35, 30, 30,30,color);
               rect[i].draw(context);
            }
            return rect;
            
  }
  
  init();

  var spr = [];  
   
 
 function update() 
 {
  
   context.clearRect(0, 0, canvas.width, canvas.height);
    var currAngle;
   
    var elapsed = new Date().getTime() - startTime;

     var pos = elapsed * 0.2;
     

    for (var i = 0; i < waveHolder.length; i++) 
    {
       
      

     
      for(var j = 0; j < 5; j++)
      {
        spr = waveHolder[i][j];
        
         var posx = pos + letterSpacing * j;

        
        
         var posy2 = 100 + Math.sin(posx / 50) * 20;
        
        currAngle = (angle+angleStep * i) * Math.PI / 180;
        spr.x = posX+(j*35 - i * 5);
        spr.y = posY + (35 + i * 5)+(posy2);  
        //posY + posy2; 
        //posY+(Math.sin(currAngle) * distance);
        spr.draw(context);
      }
    }
    angle+= angleSpeed;
    angle %= 360;
    requestAnimationFrame(update); 
 }
 


                       
</script>


</body>
</html>

Как сделать анимацию волн при этом чтобы для каждого квадрата тоже происходила анимация из восьми дубликатов (сверху вниз)? То есть, чтобы один ряд (с дубликатами разных цветов) был привязан конкретно к квадрату и для него помимо горизонтальной волны происходила еще и вертикальное перемещение (как в примере 1).

P.S. Оба примера можно запустить, кнопкой "выполнить".