原理
这篇文章讲的很清楚:贝塞尔曲线原理(简单阐述)
演示
以下演示转自 贝塞尔曲线 总结
一阶:
二阶:
三阶:
四阶:
五阶:
代码
这是用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();
}