📌  相关文章
📜  如何使用 p5.js 设计平面着色图形？(1)

📅  最后修改于: 2023-12-03 15:23:56.917000             🧑  作者: Mango

如何使用 p5.js 设计平面着色图形？

简介

p5.js是一个基于 Processing 的 JavaScript 库，可以帮助开发者在网页中创建交互式的图形、动画和媒体应用。

在本文中，我们将介绍如何使用 p5.js 来设计平面着色图形，并提供一些示例代码。

步骤
1. 创建一个 HTML 文件

首先，创建一个 HTML 文件，并在其中通过 script 标签引入 p5.js 库。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>平面着色图形</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
2. 编写 JavaScript 文件

接下来，我们需要编写 JavaScript 文件，以创建平面着色图形。

在这个示例中，我们将创建一个菱形，并将其分成四个不同的颜色区域。

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

function draw() {
  background(220);
  
  // 绘制菱形
  noStroke();
  fill(255, 0, 0);
  beginShape();
  vertex(width / 2, height / 4);
  vertex(width * 3 / 4, height / 2);
  vertex(width / 2, height * 3 / 4);
  vertex(width / 4, height / 2);
  endShape(CLOSE);
  
  // 绘制颜色区域
  noStroke();
  fill(255, 255, 0, 200);
  beginShape();
  vertex(0, 0);
  vertex(width / 2, 0);
  vertex(width / 2, height / 2);
  vertex(0, height / 2);
  endShape(CLOSE);
  
  fill(0, 255, 0, 200);
  beginShape();
  vertex(width / 2, 0);
  vertex(width, 0);
  vertex(width, height / 2);
  vertex(width / 2, height / 2);
  endShape(CLOSE);
  
  fill(0, 0, 255, 200);
  beginShape();
  vertex(0, height / 2);
  vertex(width / 2, height / 2);
  vertex(width / 2, height);
  vertex(0, height);
  endShape(CLOSE);
  
  fill(255, 255, 255, 200);
  beginShape();
  vertex(width / 2, height / 2);
  vertex(width, height / 2);
  vertex(width, height);
  vertex(width / 2, height);
  endShape(CLOSE);
}
3. 运行代码

最后，打开 HTML 文件，查看我们刚刚创建的平面着色图形。

示例代码可以在 CodePen 上找到。

总结

使用 p5.js 设计平面着色图形非常简单，只需要使用 beginShape()、vertex() 和 endShape() 等函数，就可以创建各种形状，并分配颜色。

希望这篇教程能够帮助你开始使用 p5.js 开发图形应用。如果您有任何问题或建议，请在评论中告诉我们。