求助：如何绕贝塞尔曲线作路径运动？

横截面

就是如何实现一个小球绕贝塞尔曲线作路径动画？

小菜与老鸟

关键知识点：bezierPoint

bezierPoint(a, b, c, d, t)
计算点 t 处 a、b、c、d 点的贝塞尔曲线。参数 t 在 0 和 1 之间变化，a 和 d 是曲线上的点，b 和 c 是控制点。这可以用 x 坐标完成一次，第二次用 y 坐标完成，以获得 t 处贝塞尔曲线的位置。

float t = 0;
void setup() {
  size(400, 400);
}

void draw() {
  background(#000009);
  
  noFill();

  stroke(#731DD8);
  line(340, 80, 40, 40);
  line(360, 360, 60, 320);

  stroke(#0FF4C6);
  strokeWeight(4);

  // 贝塞尔曲线
  // 340, 80 曲线第一个点
  // 40, 40 曲线第一个控制点
  // 360, 360 曲线第二个控制点
  // 60，320 曲线第二个点
  bezier(340, 80, 40, 40, 360, 360, 60, 320);
  
  // https://processing.org/reference/bezierPoint_.html
  // 根据 t 值比例，计算 x 和 y
  float x = bezierPoint(340, 40, 360, 60, t);
  float y = bezierPoint(80, 40, 360, 320, t);
  noStroke();
  fill(#F1DB4B);
  circle(x, y, 20);
  
  t += 0.01;
  if (t >= 1) {
    t = 0;
  }
}

横截面

@“小菜与老鸟”

小菜与老鸟谢谢解答，受益颇深

Sweetomato

小菜与老鸟如果一个图形是由多条，比如说两条以上贝塞尔曲分段线连接构成的，我试了一下，可以让小球分别在每一段上面运动，但是不知道怎样让小球在整个图形上自始至终的运动？请赐教

小菜与老鸟

Sweetomato
上面例子中当 t >= 1 时，其实意味着一段曲线运动已经结束，此时需要切换到下个曲线，可以将贝塞尔曲线上的点和控制点存储到数组中（可能需要多个数组），获取到数组中下一个索引位置的点，t值归零重新计算运动中点的 x 和 y。

Sweetomato

小菜与老鸟还没有想好数组怎么设计，但是按照我自己的设想，实现了一个雏形，待完善，代码如下：

float t = 0;
void setup() {
  size(1000, 1000);
}

void draw() {
  background(#000009);
  
  noFill();

  stroke(#731DD8);
  stroke(#0FF4C6);
  strokeWeight(4);

  // 贝塞尔曲线
   
   bezier(452, 179, 200, 203, 229, 694, 449, 719);
   bezier(450, 180, 693, 205, 678, 697, 450, 718);
  
  // https://processing.org/reference/bezierPoint_.html
  // 根据 t 值比例，计算 x 和 y
  float x = bezierPoint(452, 200, 229,449, t);
  float y = bezierPoint(179, 203, 694,719, t);
  
  noStroke();
  fill(#F1DB4B);
    
  x = bezierPoint(452, 200, 229,449, t);
  y = bezierPoint(179, 203, 694,719, t);
  
  circle(x, y, 20);
  t += 0.01;
 
 
  if (t >= 1) {
    t = 0;
   while(t<=1){
    x = bezierPoint(450,678, 693,450, t);
    y = bezierPoint(718, 697, 205,180, t);
    t += 0.01;
   circle(x, y, 20);
    }
    t =0;
  }
}

目前的问题是：1.右半部分明显速度更快(在内嵌while循环实现的，所以时间更短)；2.右半部分因为速度快，还伴随着痕迹，像一道闪电的效果。求指导。

小菜与老鸟

Sweetomato
恩看了下代码不复杂，就两段贝塞尔路径，如果不用数组处理简单点也可以处理。

（忽略小球的跳动，是录制的gif不是完美循环，小球末帧位置不是首帧的位置）

这里用path表示当前小球在那个路径下运动

思路：

1）根据当前的path，计算小球的位置和绘制显示
2）当前path且 t >= 1后，进入下一段路径，如果到了最后一段路径，path重新设置为0，重新开始。

float t = 0;

int path = 0;
void setup() {
  size(1000, 1000);
}

void draw() {
  background(#000009);

  noFill();

  stroke(#731DD8);
  stroke(#0FF4C6);
  strokeWeight(4);

  // 贝塞尔曲线

  bezier(452, 179, 200, 203, 229, 694, 449, 719);
  bezier(450, 180, 693, 205, 678, 697, 450, 718);

  // https://processing.org/reference/bezierPoint_.html
  // 根据 t 值比例，计算 x 和 y

  float x = 0;
  float y = 0;

  if (path == 0) {
    x = bezierPoint(452, 200, 229, 449, t);
    y = bezierPoint(179, 203, 694, 719, t);
  } else if (path == 1) {
    x = bezierPoint(450, 678, 693, 450, t);
    y = bezierPoint(718, 697, 205, 180, t);
  }

  noStroke();
  fill(#F1DB4B);

  circle(x, y, 20);
  t += 0.01;

  //if (t >= 1) {
  //  t = 0;
  //  if (path == 0) {
  //    path = 1;
  //  } else if (path == 1) {
  //    path = 0;
  //  }
  //}

  // 因为是两段路径，也可以用加1取余的方式来实现路径首尾循环
  if (t >= 1) {
    t = 0;
    path = (path + 1) % 2;
  }
}

Sweetomato

小菜与老鸟是的不用在一个draw()里边实现两段曲线的运行，while()不合适；得在draw()里边轮流实现每一段贝塞尔曲线效果就是正常的。谢谢赐教！