贝塞尔曲线原理及Processing实现的二阶贝塞尔曲线演示代码

原理

这篇文章讲的很清楚：贝塞尔曲线原理(简单阐述)

演示

以下演示转自 贝塞尔曲线 总结

一阶：

二阶：

三阶：

四阶：

五阶：

代码

这是用Processing实现的二阶贝塞尔曲线演示动画。

PVector p0, p1, p2;
float t;
PVector p00, p11;
PVector p02;

void setup() {
  size(400, 400);
  p0 = new PVector(100, 300);
  p1 = new PVector(200, 100);
  p2 = new PVector(300, 250);
  t = 0.001;
}

void draw() {
  background(200); 
  
  update();
  
  showPoints();
  showCurves();
  showText();
}

void mousePressed() {
  t = 0.001;
}

void update() {
  if(t < 0.999){
     t += 0.005; 
  }
  p00 = new PVector((1-t)*p0.x + t*p1.x, (1-t)*p0.y + t*p1.y);
  p11 = new PVector((1-t)*p1.x + t*p2.x, (1-t)*p1.y + t*p2.y);
  p02 = new PVector((1-t)*p00.x + t*p11.x, (1-t)*p00.y + t*p11.y);
}

void showPoints() {
  push();
  
  stroke(30);
  strokeWeight(6);
  point(p0.x, p0.y);
  point(p1.x, p1.y);
  point(p2.x, p2.y);
  
  stroke(0, 200, 0);
  strokeWeight(8);
  point(p00.x, p00.y);
  point(p11.x, p11.y);
  
  stroke(200, 0, 0);
  point(p02.x, p02.y);
  
  pop();
}

void showCurves() {
  push();
  
  stroke(0);
  strokeWeight(1);
  noFill();
  
  beginShape();
  vertex(p0.x, p0.y);
  quadraticVertex(p1.x, p1.y, p2.x, p2.y);
  endShape();
  
  line(p0.x, p0.y, p1.x, p1.y);
  line(p1.x, p1.y, p2.x, p2.y);
  
  push();
  stroke(0, 0, 200);
  line(p00.x, p00.y, p11.x, p11.y);
  pop();
  
  pop();
}

void showText() {
  push();
  
  fill(0);
  textSize(14);
  textAlign(RIGHT, TOP);
  text("P0", p0.x, p0.y);
  text("P1", p1.x, p1.y);
  text("P2", p2.x, p2.y);
  
  text("P00", p00.x, p00.y);
  text("P11", p11.x, p11.y);
  
  text("P02", p02.x, p02.y);
  pop();
}

参考

贝塞尔曲线原理(简单阐述)
贝塞尔曲线 总结