如何使用 p5.js 绘制简单的动画？(1)

📌 相关文章

📜 如何使用 p5.js 绘制简单的动画？(1)

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

如何使用 p5.js 绘制简单的动画？

p5.js 是一个基于 Processing 的 JavaScript 库，它能够简化动态图形、交互性的设计工作。使用 p5.js，你可以轻松地绘制各种形式的图形，比如线条、圆形、矩形、三角形等等，并且通过交互以及动画的形式来展现你的设计、构思。

以下是如何使用 p5.js 绘制简单的动画的步骤，以及相关示例代码。

步骤

1. 导入 p5.js 库

我们需要先将 p5.js 库引入项目中，可以直接通过 CDN 来加载：

<script src="https://cdn.jsdelivr.net/npm/p5"></script>

或者，你也可以下载 p5.js 库到本地，并在 HTML 文件中引入。

2. 设置画布

在 HTML 中，我们需要创建一个画布用来放置我们绘制的内容。这个画布的大小可以根据实际需要来指定。

<canvas id="myCanvas"></canvas>

然后，在 JavaScript 中，我们需要获取这个画布并设置其大小。

let canvasWidth = 500;
let canvasHeight = 500;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
}

3. 绘制内容

现在，我们可以开始绘制内容了。p5.js 中提供了各种各样的绘图函数，可以用来绘制不同的形状。以下是几个常用的绘图函数：

// 绘制矩形
rect(x, y, width, height);

// 绘制圆形
ellipse(x, y, width, height);

// 绘制直线
line(x1, y1, x2, y2);

// 绘制三角形
triangle(x1, y1, x2, y2, x3, y3);

在绘制内容的过程中，我们可以利用变量、循环语句、条件语句等控制语句来制造动画效果，例如改变圆形的位置和大小等等。

下面的代码中，我们通过创建一个球体来说明如何利用变量和条件语句来制造动画效果：

let canvasWidth = 500;
let canvasHeight = 500;
let x = 0;
let y = 250;
let r = 50;
let speed = 5;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
}

function draw() {
  background(200, 200, 200);
  
  x = x + speed;
  
  if (x > canvasWidth || x < 0) {
    speed = -speed;
  }
  
  fill(255, 0, 0);
  noStroke();
  ellipse(x, y, r, r);
}

4. 运行动画

现在，我们已经创建了画布并且绘制了内容，接下来就是将这些内容展示给用户。在 p5.js 中，我们可以通过 draw 函数来实现动画效果的呈现。

function draw() {
  // 绘制内容
}

draw 函数默认每秒执行 60 次，因此我们可以在这个函数中实现时间的推移，从而制造出各种各样的动画效果。

最后，在 index.html 中引入 sketch.js，就可以看到你的简单动画了！

<body>
  <canvas id="myCanvas"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/p5"></script>
  <script src="sketch.js"></script>
</body>

示例代码

以下是一个通过改变矩形的位置、颜色和大小来实现动画效果的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>p5.js 示例</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/p5"></script>
    <script src="sketch.js"></script>
  </body>
</html>

let canvasWidth = 500;
let canvasHeight = 500;
let rectX = 0;
let rectY = canvasHeight / 2;
let rectW = 50;
let rectH = 50;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
}

function draw() {
  background(200, 200, 200);

  rectX += 5;
  rectY += random(-5, 5);
  rectW = random(10, 50);
  rectH = random(10, 50);

  if (rectX > canvasWidth) {
    rectX = 0 - rectW;
  }

  fill(random(0, 255), random(0, 255), random(0, 255));
  rect(rectX, rectY, rectW, rectH);
}

以上示例中，我们通过 random 函数来生成随机数，利用这些随机数改变矩形的位置、颜色和大小，制造出了一个简单的动画效果。