processing--路径动画

Processing提供了bezierPoint()函数，它可以在贝塞尔曲线上进行插值运算，求出曲线0~1之间t时刻点的坐标值。

float t;
void setup() {
  size(900, 600);     
  background(200);
  rectMode(CENTER);
}
void draw() {
  noFill();
  bezier(100, 200, 150, 400, 450, 400, 500, 200);         //设置曲线参数
  float x = bezierPoint(100, 150, 450, 500, t);            //曲线上点的x坐标
  float y = bezierPoint(200, 400, 400, 200, t);            //曲线上点的y坐标
  float tx = bezierTangent(100, 150, 450, 500, t);         //求出切线方向x分量
  float ty = bezierTangent(200, 400, 400, 200, t);        //求出切线方向y分量
  float radian = atan2(ty, tx);                        //根据切线方向分量求出角度
  translate(x, y);                                  //坐标移到曲线上点的位置
  rotate(radian);                                 //坐标系旋转
  fill(255, 0, 0);
  rect(0, 0, 50, 30);
  if (t<=1) {
    t +=0.01;
  }
}

效果图：