java - 动画圆以跨线移动

Question

我正在使用 lerp() 函数将我的圆移过一条线，但它不起作用。圆圈总是在线上的某个地方结束，具体取决于 lerp() 函数的 amt 参数。如果我将 amt 设置为 0.5，则圆圈将放置在线条的中间位置，但我看不到它移动，圆圈也不会沿着圆圈的长度完成移动。那么有人可以帮我让圆圈向下移动吗？

float x1,y1,x2,y2;
float cx,cy;
float x4,y4;

void setup() {
  size(600,600);
  x1 = 200;
  y1 = 150;
  x2 = 300;
  y2 = 250;
  cx = 450;
  cy = 200;
}

void draw() { 
  background(60);
  stroke(220);
  line(x1,y1,x2,y2);
  noFill();
  noStroke();
  // calculate the point
  float k = ((y2-y1) * (cx-x1) - (x2-x1) * (cy-y1))
   / ((y2-y1)*(y2-y1) + (x2-x1)*(x2-x1));
  float x4 = cx - k * (y2-y1);
  float y4 = cy + k * (x2-x1);
  stroke(0);
  line(cx,cy,x4,y4); //line connecting circle and point on line

  float x = lerp(cx, x4, .1);
  float y = lerp(cy, y4, .1);

  fill(255, 0, 175);
  ellipse(x4,y4, 8,8);

  fill(175, 0, 255);
  ellipse(x, y, 50, 50);
}

Answer 1

您需要使用变量作为传递到 lerp() 函数的 amount 值。然后随着时间的推移增加该变量即可设置动画:

float amount = 0;
float speed = .001;

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

void draw() {

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

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

  amount += speed;

}