p5.js入门学习-三次贝塞尔曲线

301 阅读1分钟

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();

p5js 开源社区 - 乐述云享 (aleshu.com)