P5.js 数学完整参考

P5.js 是一个强大的 JavaScript 库，它使得在网页上构建交互式图形和动画变得更加容易。而使用数学则是 P5.js 库的一个关键部分，使程序员可以使用在绘图和动画时需要的许多数学公式和技术。

本文将详细介绍 P5.js 中与数学相关的主题，包括几何图形、向量、矩阵、二维和三维几何变换、函数等。

几何图形

P5.js 可以绘制常见的几何图形，例如线段、圆、椭圆、矩形、三角形等。

以下是一个简单的例子：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  strokeWeight(4);
  line(0, 0, width, height);
  ellipse(width / 2, height / 2, 100, 100);
  rectMode(CENTER);
  rect(width / 2, height / 4, 50, 50);
  triangle(120, 240, 220, 240, 170, 140);
}

上面的代码会绘制一个斜线、一个圆、一个在画布中央的矩形、以及一个三角形。

向量

在 P5.js 中，向量是表示大小和方向的一组数字。向量可以表示例如位置、速度、加速度等一些物理量。

以下是一个简单的例子：

let position = createVector(100, 100);
let velocity = createVector(5, 0);

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(position.x, position.y, 30, 30);
  position.add(velocity);
}

上面的代码会绘制一个红色圆，它的初始位置是 (100,100)，每一帧向右移动 5 个像素。

矩阵

矩阵是在数学和计算机图形学中广泛使用的一种数学工具，它可以用于表示几何变换、线性方程组等。

以下是一个简单的例子：

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  console.table(matrix);
}

上面的代码使用了一个 3x3 的矩阵并在控制台中打印它。

几何变换

P5.js 提供了许多函数，用于在 2D 和 3D 空间中进行平移、旋转、缩放等几何变换。

以下是一个简单的例子：

let angle = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  translate(width / 2, height / 2);
  rotate(angle);
  rectMode(CENTER);
  rect(0, 0, 50, 50);
  angle += 0.05;
}

上面的代码会绘制一个旋转的矩形。

函数

在数学中，函数是输入值和输出值之间的关系。P5.js 提供了许多函数，用于计算常见数学函数（例如正弦、余弦、平方根等）。

以下是一个简单的例子：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let y = sin(frameCount / 50) * 100 + 100;
  ellipse(width / 2, y, 50, 50);
}

上面的代码会绘制一个在垂直方向上来回摆动的圆。

总结

P5.js 库中的数学相关主题十分丰富，包括几何图形、向量、矩阵、二维和三维几何变换、函数等。本文对其作了详细介绍，相信对于 P5.js 的开发者们会有所帮助。