bezier()函数是一个用于在屏幕上绘制三次贝塞尔曲线的函数。
这些曲线是由一系列锚点和控制点所定义的。前两个参数定义第一个锚点而最后两个参数定义另一个锚点,这也是曲线的第一和最后一个点。中间的参数是用来定义控制点的位置并将决定曲线的形状。一般来说,控制点会将曲线“拉”向它们的方向。
语法:bezier(x1, y1, x2, y2, x3, y3, x4, y4); 其中: (x1, y1)为第一个锚点坐标,(x2, y2)为第一个控制点坐标 (x3, y3)为第二个控制点坐标,(x4, y4)为第二个锚点坐标
function setup() {
// 画布大小:720*400
createCanvas(720, 400);
stroke(255);
noFill();
}
function draw() {
background(0);
// 循环10次,每次取i的值作为坐标值的修改值
for (let i = 0; i < 200; i += 20) {
// 第一个锚点坐标以及第二个锚点坐标中结合了鼠标x轴的值,因此该贝塞尔曲线可以由鼠标控制
bezier(
mouseX - i / 2.0,
40 + i,
410,
20,
440,
300,
240 - i / 16.0,
300 + i / 8.0
);
}
}
new p5();