Question

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

它适用于图形中的所有其他线条。这个人完美地旅行，然后去#c;偏离赛道＆＃34;在路上;当它到达顶部时，它只是以一种奇怪的（随意的）方式反弹。我可以在不更改基本格式的情况下修复它吗？谢谢！

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;

}

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

1 个答案: