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

I need the ellipse to remain centered and move back and forth along the length of the line

本文关键字：移动      更新时间：2023-11-07

代码是我使用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;   
         }
      }

您可以使用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;
}
相关文章：