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

Question

该代码是我使用processing.js 库为项目编写的程序的片段。我需要椭圆沿着对 Angular 线的整个长度移动，同时保持在线的中心。完成后，总共将有八条线，其中椭圆来回滑动。这是第五行。您会注意到，我必须创建一个特殊的速度变量，以使球体沿对 Angular 线向下移动(代码中的另外两条对 Angular 线无需此变量即可工作)。

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

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;

}