简介
在本教程中，您将学习如何使用 p5.js 创建动态且丰富多彩的几何动画。形状将在画布上随机移动，改变颜色并创建视觉上迷人的效果。
第 1 步：设置您的环境
-
下载p5.js：
- 前往 p5.js 网站并下载最新版本的 p5.js。
- 或者，您可以使用在线 p5.js 编辑器 editor.p5js.org，它允许您直接在浏览器中编写和运行代码。
-
创建一个新项目：
- 如果您使用在线编辑器，请单击左上角的“新建”来创建新草图。
- 如果您在本地编码，请创建一个新的 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 < 5; i++) {
let x = random(width);
let y = random(height);
let size = random(20, 80);
let colorr = random(255);
let colorg = random(255);
let colorb = random(255);
let shapetype = random(['ellipse', 'rect', 'triangle']);
fill(colorr, colorg, colorb, 150); // set fill color with some transparency
if (shapetype === 'ellipse') {
ellipse(x, y, size, size);
} else if (shapetype === 'rect') {
rect(x, y, size, size);
} else if (shapetype === 'triangle') {
triangle(x, y, x + size, y, x + size / 2, y - size);
}
}
}
说明：
-
随机变量：
- 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 文件以查看动画。
