在 ps 中创建动态几何动画

简介

在本教程中，您将学习如何使用 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 < 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);: 绘制三角形。

第 4 步：使动画具有响应性

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

第 5 步：运行草图

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

以上是在 ps 中创建动态几何动画的详细内容。更多信息请关注PHP中文网其他相关文章！