我需要椭圆保持居中并沿线的长度来回移动

Question

代码是我为项目编写的程序的 sn-p，使用 processing.js 库。我需要椭圆沿着对角线的整个长度行进，同时保持在线的中心。完成后，一共有八条线，椭圆来回滑动。这是第五行。你会注意到我必须创建一个特殊的速度变量，以使球体沿对角线向下移动（代码中的另外两条对角线在没有这个的情况下工作）。

它适用于图形中的所有其他行。这个完美地向下行驶，然后在向上的过程中“偏离轨道”；当它到达顶部时，它只是以一种奇怪的（看起来随机的）方式弹跳。我可以在不更改基本格式的情况下修复它吗？谢谢！

var x5 = 113;
var y5 = 27;
var speed5 = 1;
var speed5y = speed5 * 2;

draw = function() {
   //lineBallFive
     line(100, 1, 300, 400); 
       fill(0, 225, 255);
       ellipse(x5, y5, ballSize, ballSize);
         if (x5 > 300)  {
             speed5 = -3;   
         }
         if (x5 < 100)  {
             speed5 = 3;   
         }
         if (y5 > 400)  {
             speed5y = 2 * -3;   
         }
         if (y5 < 1)  {
             speed5y = 3;   
         }
      }

Answer 1

您可以使用lerp() 函数通过线性插值来移动椭圆，而不是相对于自身移动椭圆。这样可以更轻松地同步您的线路。

这是一个小例子：

var amount = 0;
var speed = .001;

function setup() {
  size(500, 500);
}

void draw() {

  var startX = 0;
  var startY = 0;
  var endX = width;
  var endY = height;
  var currentX = lerp(startX, endX, amount);
  var currentY = lerp(startY, endY, amount);

  background(0);
  ellipse(currentX, currentY, 20, 20);

  amount += speed;

}