Question

我使用lerp（）函数将我的圆圈移过一条线，但它不起作用。根据我的amt参数对lerp（）函数的影响，圆总是最终在某处。如果我把0.5用于amt然后将圆圈放在线的一半，但是我看不到它移动也没有圆圈完成向下移动圆圈的长度。那么，任何人都可以帮助我让圈子向下移动吗？

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

您需要为传递到amount函数的lerp()值使用变量。然后随着时间的推移增加该变量以进行动画处理：

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;

}

动画圆圈移动跨线

1 个答案: