p5.js | beginShape() 函数

在p5.js中，beginShape()是一个功能强大的函数，它允许我们创建复杂的多边形图形。

语法

beginShape([mode])

beginShape() 函数包含一个可选参数 mode ，这是一个用来定义多边形类型的常量（例如 POINTS 、 LINES、TRIANGLES 等）。如果没有提供该参数，多边形会被视为通用多边形。

用法

让我们看一下如何使用 beginShape() 函数来创建一个三角形。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  beginShape();
  vertex(50,50);
  vertex(100,100);
  vertex(0,100);
  endShape(CLOSE);
}

这个例子的输出将是一个三角形，其中顶点的坐标是 (50,50) 、 (100,100) 和 (0,100) 。

关于顶点

beginShape() 函数用于在您的p5.js项目中创建自定义的图形。该函数设置一个新的多边形，随后调用的 vertex() 函数控制该多边形的各个点。

例如，如果你想绘制一个五角星：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  beginShape();
  vertex(150, 150);
  vertex(100, 50);
  vertex(125, 0);
  vertex(150, 50);
  vertex(175, 0);
  vertex(200, 50);
  vertex(225, 0);
  vertex(250, 50);
  vertex(200, 100);
  vertex(150, 150);
  endShape(CLOSE);
}

vertex() 函数获取 x 和 y 坐标，它们是图形中的点。使用 endShape() 函数可以结束当前的多边形，该函数接收一个可选参数 CLOSE ，它将终止多边形（多边形的起始和结束点将连接）。

模式

正如前面提到的，beginShape() 函数可以接受一个参数来设置多边形的模式。以下是模式的一些选项：

• POINTS：画一个点集
• LINES：画一些完全不相关的直线
• TRIANGLES：每三个顶点绘制一个三角形
• TRIANGLE_STRIP：通过绘制三角形相邻的边来绘制一个三角形集合
• TRIANGLE_FAN：通过像扇形的方式连接中心点及周围的点来绘制一个三角形集合
• QUADS：每四个点绘制一个四边形
• QUAD_STRIP：通过绘制相邻的四边形来绘制四边形集合
• POLYGON：通过将所有角连接起来绘制一个多边形

以下是一个使用 TRIANGLES 模式的例子：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  beginShape(TRIANGLES);
  vertex(50,50);
  vertex(100,100);
  vertex(0,100);
  vertex(150,150);
  vertex(200,200);
  vertex(150,250);
  endShape(CLOSE);
}

这个例子将绘制三个三角形，每个三角形有三个顶点。

结论

beginShape() 是一个用于创建自定义多边形图形的功能强大的p5.js函数。通过使用 vertex() 函数添加顶点并使用 endShape() 函数结束每个多边形，您可以创建您需要的多边形。在深入研究之前，请尝试创建一些简单的形状以熟悉 beginShape() 和 vertex() 函数。