p5.js 入门：深入理解操作符和变量

2023-10-28 14:48:59

在 p5.js 旅程的第四章中，我们将深入探讨操作符和变量，这是构建交互式图形应用程序的关键组成部分。通过将这些概念付诸实践，我们将进一步提升我们的编码能力。

操作符的力量

操作符是编程语言中至关重要的工具，用于执行各种操作，从简单的数学运算到复杂的比较。p5.js 支持广泛的操作符，让我们从最基本的算术运算符开始。

算术运算符

算术运算符允许我们对数字进行加法 (+)、减法 (-)、乘法 (*) 和除法 (/)。例如：

let x = 10;
let y = 5;

console.log(x + y); // 输出 15
console.log(x - y); // 输出 5
console.log(x * y); // 输出 50
console.log(x / y); // 输出 2

此外，我们还有余数运算符 (%)，用于计算除法的余数：

console.log(x % y); // 输出 0

赋值运算符

赋值运算符用于将值存储在变量中。最简单的赋值运算符是等于 (=)，它将右边的值分配给左边的变量：

let z = x + y; // z 现在等于 15

还有其他赋值运算符，允许我们使用简单的语法进行复合赋值：

z += 5; // 相当于 z = z + 5
z -= 3; // 相当于 z = z - 3

比较运算符

比较运算符用于比较两个值并返回一个布尔值 (true 或 false)。最常用的比较运算符包括：

等于 (==)
不等于 (!=)
大于 (>)
小于 (<)
大于或等于 (>=)
小于或等于 (<=)

console.log(x == y); // 输出 false
console.log(x != y); // 输出 true
console.log(x > y); // 输出 true

变量的魅力

变量是用来存储数据的容器，在 p5.js 中，我们使用 let 或 const 来声明变量。let 声明的变量可以在程序中重新分配，而 const 声明的变量则不可变。

let name = "John";
const PI = 3.14;

变量可以存储各种类型的数据，包括数字、字符串、布尔值和数组。我们可以使用 typeof 运算符来检查变量的类型：

console.log(typeof name); // 输出 "string"
console.log(typeof PI); // 输出 "number"

实践：操作符和变量

为了巩固我们的理解，让我们动手写一个 p5.js 程序，演示操作符和变量的使用。我们创建一个简单的交互式图形，当鼠标移动时更改大小和颜色。

let circleX = 100;
let circleY = 100;
let circleSize = 50;

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

function draw() {
  background(0);
  fill(255, 0, 0);
  circle(circleX, circleY, circleSize);

  if (mouseIsPressed) {
    circleSize += 2;
  } else {
    circleSize -= 1;
  }

  circleX = mouseX;
  circleY = mouseY;
}