如何使用processing.js使贝塞尔曲线的动画更平滑/更慢

Question

我尝试在画布和库Processing.js上使用交互式动画来动摇。这波浪必须像水一样运动。 当波的一部分与鼠标坐标交互时，转换太快。谁知道如何使用processing.js / p5.j使此转换平稳而缓慢？

在代码笔上有此示例的链接： https://codepen.io/todoryshyna-maryna/pen/wQbdXO?editors=0010

有代码示例：

function program(proc) {

  var yvalues = [];
  theta = 0.0;
  theta01 = 0.0;
  theta02 = 0.0;

  points = [

    [1583.5, 103.8, 1564.9, 157.4, 1476.2, 157.4],
    [1387.5, 157.4, 1321.2, 119.2, 1200.5, 119.3],
    [1079.7, 119.5, 1046.6, 180.0, 960.0, 180.0],
    [865.7, 180.0, 819.4, 129.4, 699.7, 129.3],
    [580.0, 129.2, 548.6, 159.9, 461.3, 159.9],
    [374.0, 159.9, 361.2, 102.8, 0.0, 90.0],
    [361.2, 75.2, 374.7, 23.9, 461.3, 23.7],
    [547.9, 23.4, 586.3, 59.1, 699.8, 59.1],
    [813.3, 59.1, 865.8, 0.0, 960.0, 0.0],
    [1046.2, 0.0, 1089.3, 67.5, 1199.6, 67.5],
    [1309.9, 67.5, 1387.4, 22.5, 1475.9, 23.3],
    [1564.3, 24.0, 1583.1, 75.2, 1920.0, 90.0],
  ];

  proc.setup = function() {
    width = window.outerWidth;
    height = window.innerHeight;

    proc.size(width, 450);
    proc.smooth(8);
    proc.frameRate(30);
    proc.strokeWeight(1);
    amplitude = proc.height / 8;
    w = proc.width + 16;

  };


  proc.draw = function() {
    proc.background(255, 255, 255, 0);
    let color = proc.color(0, 255, 199, 100);

    let set = {
      points: points,
      vertex: '',
      color: color,
      animateWave: animateWave1,
    }

    createWave(proc, set, [1920.0, 90.0]);

    proc.noStroke();

  };
}

var canvas = document.getElementById("canvas");

var instance = new Processing(canvas, program);
instance.translate(0, 450 / 4);
instance.scale(0.8, 0.8);


function createWave(proc, props, points) {
  proc.beginShape();
  proc.lineJoin = 'round';
  proc.vertex(points[0], points[1]);
  var pointsLength = props.points.length;

  props.points.forEach((point, index) => {
    props.animateWave(proc, point, index, pointsLength, props.random);
  })
  proc.fill(props.color);
  proc.endShape();
}

function animateWave1(proc, point, index, pointsLength, random) {
  var sin2 = 2;
  var sinHalf = 1.5;
  var ty = proc.bezierTangent(20, 10, 90, 80, 0.5);
  var tx = proc.bezierTangent(85, 10, 90, 15, 0.5);
  var a = proc.atan2(ty, tx);
  a += proc.PI;

  var cy1 = (proc.sin(theta) * amplitude / 3) + (point[1] * proc.sin(sin2));
  var cy2 = (proc.sin(theta) * amplitude / 3) + (point[3] * proc.sin(sin2));
  var cy3 = (proc.sin(theta) * amplitude / 3) + (point[5] * proc.sin(sin2));

  var cy1i0 = (proc.sin(theta01) * amplitude / 3) + (point[1] * proc.sin(sin2));
  var cy2i0 = (proc.sin(theta01) * amplitude / 3) + (point[3] * proc.sin(sin2));
  var cy3i0 = (proc.sin(theta01) * amplitude / 3) + (point[5] * proc.sin(sin2));

  var cy1i1 = (proc.sin(theta02) * amplitude / 3) + (point[1] * proc.sin(sin2));
  var cy2i1 = (proc.sin(theta02) * amplitude / 3) + (point[3] * proc.sin(sin2));
  var cy3i1 = (proc.sin(theta02) * amplitude / 3) + (point[5] * proc.sin(sin2));

  var cy01 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
  var cy02 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
  var cy03 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));

  var cy01i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
  var cy02i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
  var cy03i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));

  var cy01i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
  var cy02i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
  var cy03i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));


  /* --------comparison bottom points---------- */

  var yScale = 0;
  var yScale2 = 0;
  var yScale3 = 0;

  if (index < (pointsLength) / 2) {
    if (index === (pointsLength / 2) - 1) {
      cy03 = point[5];
    }

    if (index === 0 || index === 1) {
      cy01 = cy01i0;
      cy02 = cy02i0;
      cy03 = cy03i0;

      if (index === 1) {
        cy03 = cy03i0 / (amplitude / 55.5);
        cy02 = cy02i0 / (amplitude / 55.5);
      }
    }

    if (index === 2 || index === 3) {
      cy01 = cy01i2;
      cy02 = cy02i2;
      cy03 = cy03i2;

      if (index === 3) {
        cy03 = cy03i2 / (amplitude / 56.8);
        cy02 = cy02i2 / (amplitude / 55.8);
      }
    }

    if (proc.mouseX > proc.width / 2.5 && proc.mouseX + 80 <= proc.width / 1.2) {

      if (index === 1) {
        cy01 = proc.lerp(proc.mouseX / 2.3, cy01 / 2, 0.5)
        cy02 = proc.lerp(proc.mouseX / 2.3, cy02 / 3, 0.5)
        cy03 = proc.lerp(proc.mouseX / 2.3, cy03 / 3, 0.5) - 70
      }
      if (index === 0) {
        cy01 = proc.lerp(proc.mouseX / 2.3, cy01 / 3, 0.5)
        cy02 = proc.lerp(proc.mouseX / 2.3, cy02 / 3, 0.5)
        cy03 = proc.lerp(proc.mouseX / 2.3, cy03 / 2, 0.5)
      }

    } else if (proc.mouseX > proc.width / 3 && proc.mouseX + 80 <= proc.width / 1.5) {

      if (index === 2) {
        cy01 = proc.lerp(proc.mouseX / 2, cy01, 0.5)
        cy02 = proc.lerp(proc.mouseX / 2, cy02, 0.9)
      }
      if (index === 1) {
        cy01 = proc.lerp(proc.mouseX / 2, cy01, 1)
        cy02 = proc.lerp(proc.mouseX / 2, cy02, 0.5)
        cy03 = proc.lerp(proc.mouseX / 2, cy03, 0.5)
      }

    } else if (proc.mouseX > proc.width / 4 && proc.mouseX + 80 <= proc.width / 2.5) {

      if (index === 2) {
        cy01 = proc.lerp(proc.mouseX / 1.8, cy01, 0.5)
        cy02 = proc.lerp(proc.mouseX / 1.8, cy02, 0.5)
        cy03 = proc.lerp(proc.mouseX / 1.8, cy03, 0.5)
      }
      if (index === 1) {
        cy03 = proc.lerp(proc.mouseX / 1.8, cy03 - 100, 0.5)
      }
      if (index === 3) {
        cy01 = proc.lerp(proc.mouseX / 1.8, cy01, 0.5)
        cy02 = proc.lerp(proc.mouseX / 1.8, cy02, 0.5)
        cy03 = proc.lerp(proc.mouseX / 1.8, cy03, 0.7)
      }

    } else if (proc.mouseX > proc.width / 7 && proc.mouseX + 80 <= proc.width / 3) {

      if (index === 4) {
        cy01 = proc.lerp(proc.mouseX, cy01 - 50, 0.4)
        cy02 = proc.lerp(proc.mouseX, cy02, 0.9)
        cy03 = cy03 + 10
      }

      if (index === 3) {
        cy01 = proc.lerp(proc.mouseX, cy01, 0.9)
        cy02 = proc.lerp(proc.mouseX, cy02 - 50, 0.6)
        cy03 = proc.lerp(proc.mouseX, cy03 - 50, 0.5)
      }

    } else if (proc.mouseX > proc.width / 16 && proc.mouseX + 80 <= proc.width / 5) {

      if (index === 4) {
        cy01 = proc.lerp(proc.mouseX + 80, cy01, 0.5)
        cy02 = proc.lerp(proc.mouseX + 80, cy02, 0.5)
        cy03 = proc.lerp(proc.mouseX + 80, cy03, 0.5)
      }
      if (index === 3) {
        cy01 = point[1];
        cy03 = proc.lerp(proc.mouseX / 1.5, point[5] + 70, 0.5)
      }
      if (index === 5) {
        cy01 = proc.lerp(proc.mouseX + 90, cy01, 0.5)
        cy02 = proc.lerp(proc.mouseX + 90, cy02, 0.5)
        cy03 = point[5]
      }

    }

    proc.bezierVertex(
      point[0], cy01 + proc.sin(a) * -4,
      point[2], cy02 + proc.sin(a) * -4,
      point[4], cy03 + proc.sin(a) * -4
    );
  }

  /* --------comparison top points---------- */

  if (index >= (pointsLength) / 2) {

    if (index === pointsLength - 1) {
      cy3 = point[5];
    }

    if (index === pointsLength - 1 || index === pointsLength - 2) {
      cy1 = cy1i0;
      cy2 = cy2i0;
      cy3 = cy3i0;

      if (index === pointsLength - 1) {
        cy3 = point[5];
      } else {
        cy2 = cy2i0 / (amplitude / 55.5);
        cy1 = cy1i0 / (amplitude / 55.5);
      }
    }

    if (index === pointsLength - 3 || index === pointsLength - 4) {
      cy1 = cy1i1;
      cy2 = cy2i1;
      cy3 = cy3i1;

      if (index === pointsLength - 3) {
        cy2 = cy2i1 / (amplitude / 55.5);
        cy3 = cy3i1 / (amplitude / 58.5);
      }
    }

    if (index === pointsLength - 5 || index === pointsLength - 6) {
      cy1 = cy1;
      cy2 = cy2;
      cy3 = cy3;

      if (index === pointsLength - 5) {
        cy2 = cy2 / (amplitude / 55.5);
        cy3 = cy3 / (amplitude / 55.5);
      }
    }

    proc.bezierVertex(
      point[0], cy1 - yScale + proc.sin(a),
      point[2], cy2 - yScale2 + proc.sin(a),
      point[4], cy3 - yScale3 + proc.sin(a)
    );
  }

  theta += 0.004;
  theta01 += 0.0042;
  theta02 += 0.0044;
}

#canvas {
  width: 100%;
  max-width: 1920px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>