介绍

在本教程中，您将学习如何使用 p5.js 创建动态且丰富多彩的几何动画。这部动画象征着“世界上充满了令人难以置信的人们，他们在做着美妙的事情”。形状将在画布上随机移动，改变颜色并产生视觉上迷人的效果。

第 1 步：设置您的环境

1. 下载p5.js:

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

2. 创建一个新项目：

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

第2步：编写基本结构

让我们首先设置 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);：这将背景颜色设置为具有一定透明度的深蓝色，为形状创建拖尾效果。

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

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

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

  for (let i = 0; i 



解释：

• 随机变量：

  • 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);: 绘制三角形。

第 4 步：使动画响应式

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

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

第五步：运行你的草图

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