动画圆圈以跨线移动

Question

我正在使用 lerp() 函数将我的圆移过一条线，但它不起作用。圆圈总是在某处结束，这取决于我的 amt 参数用于 lerp() 函数。如果我将 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;

}

动画圆圈以跨线移动

Animating Circle to Move Across Line

java

processing

animation

lerp