Как остановить анимацию прыжков на холсте

Question

У меня есть анимация холста, которую вы можете увидеть здесь .

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

Код ниже:

<canvas id="canvas"></canvas>

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 4;
var A = 4;

function draw(shift) {
   var w = canvas.width;
   var h = canvas.height;
   shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
   ctx.clearRect(0, 0, w, h);
   var grd = ctx.createLinearGradient(0, 0, w, h);
   grd.addColorStop(0, "#4a8bf5");
   grd.addColorStop(1, "#f16b55");
   ctx.strokeStyle = grd;

   ctx.lineCap = "round";
   for (var i = 0; i < w; ) {
      var _A = Math.abs(A*Math.cos(2*i));
      ctx.beginPath();
      var pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
      pos *= h / 2;
      var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
      ctx.lineWidth = (lw)+1;
      ctx.lineTo(i, h / 2 - pos);
      ctx.closePath();
      ctx.stroke();
      i += 1;
   }

   window.requestAnimationFrame(function(){
      draw(shift + 1);
   });
}
draw(0);

Answer 1

Решение состоит в том, чтобы убедиться, что изменение в смещении приводит к изменению аргумента sin(), кратному 2π.

Учитывая

Math.sin((i + shift) / (w / P))

, это можно сделать, используя что-токак

if (shift > 500) shift -= 2 * Math.PI * (w / P);

Здесь все еще будет скачок во втором аргументе sin(), ширина линии.Чтобы избежать этого, shift нужно уменьшить на число, которое вызывает изменение обоих аргументов на кратные 2π, если хотите, LCM.

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 10;
var A = 4;

var shift = 0;

function draw() {
  var w = canvas.width;
  var h = canvas.height;
  shift += 1;
  if (shift > 500) shift -= 2 * Math.PI * (w / P);
  shift_el.innerHTML = shift;
  ctx.clearRect(0, 0, w, h);
  var grd = ctx.createLinearGradient(0, 0, w, h);
  grd.addColorStop(0, "#4a8bf5");
  grd.addColorStop(1, "#f16b55");
  ctx.strokeStyle = grd;

  ctx.lineCap = "round";
  for (var i = 0; i < w;) {
    var _A = Math.abs(A * Math.cos(2 * i));
    ctx.beginPath();
    var pos = Math.exp(-_A * i / w) * Math.sin((i + shift) / (w / P));
    pos *= h / 2;
    var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
    ctx.lineWidth = (lw) + 1;
    ctx.lineTo(i, h / 2 - pos);
    ctx.closePath();
    ctx.stroke();
    i += 1;
  }
  window.requestAnimationFrame(draw);
}
draw();

body {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

canvas {
  height: 200px;
  width: 100%;
}

#shift_el {
  position: absolute;
  top: 0
}

<canvas id="canvas"></canvas>
<div id="shift_el"></div>