简介

在本教程中，您将学习如何使用 p5.js 创建动态且丰富多彩的几何动画。形状将在画布上随机移动，改变颜色并创建视觉上迷人的效果。

第 1 步：设置您的环境

1. 下载p5.js：

   • 前往 p5.js 网站并下载最新版本的 p5.js。
   • 或者，您可以使用在线 p5.js 编辑器 editor.p5js.org，它允许您直接在浏览器中编写和运行代码。

2. 创建一个新项目：

   • 如果您使用在线编辑器，请单击左上角的“新建”来创建新草图。
   • 如果您在本地编码，请创建一个新的 html 文件并链接 p5.js 库。

第二步：编写基本结构

让我们首先设置 p5.js 草图的基本结构。这包括定义 setup() 和 draw() 函数。

function setup() {
  createcanvas(windowwidth, windowheight);
  nostroke();  // disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // dark background with transparency
}

说明：

• createcanvas(windowwidth, windowheight);：这会设置画布大小以匹配您的浏览器窗口。
• nostroke();：这会删除我们将创建的形状的边框。
• 背景(30, 30, 60, 25);：这将背景颜色设置为具有一定透明度的深蓝色，为形状创建拖尾效果。

第三步：添加动态几何形状

现在，让我们添加代码来创建具有不同颜色、位置和大小的随机形状。

function draw() {
  background(30, 30, 60, 25); // dark background with transparency

  for (let i = 0; i 



<p><strong>说明：</strong></p>

• 随机变量：

  • x 和 y 确定画布上每个形状的位置。
  • size 控制每个形状的大小。
  • colorr、colorg、colorb 为填充颜色的红色、绿色和蓝色分量生成随机值。
  • fill(colorr, colorg, colorb, 150);：这设置了稍微透明的填充颜色。

• 形状类型：

  • ellipse(x, y, size, size);：绘制圆形或椭圆形。
  • rect(x, y, size, size);: 绘制正方形或矩形。
  • triangle(x, y, x + size, y, x + size / 2, y - size);: 绘制一个三角形。

第四步：使动画响应式

为了确保画布随窗口调整大小，请添加以下函数：

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

第五步：运行你的草图

• 如果您使用 p5.js 在线编辑器，只需按“播放”按钮即可查看动画。
• 如果您在本地编码，请在网络浏览器中打开 html 文件以查看动画。