《getting started with p5.js》（中文版） 第四章 变量： 存储、修改和再利用数据

版权声明：本文为博主原创文章，未经博主允许不得转载。

第一章 您好：了解p5.js
第二章 开始写代码：创建你的第一个p5.js程序
第三章 画：定义和画简单的形状
第四章 变量： 存储、修改和再利用数据
第五章 响应： 利用鼠标、键盘和触摸板控制和影响程序
第六章 平移、旋转、缩放：坐标的变换
第七章 多媒体： 加载和显示多媒体，包括图片和字体
第八章 运动： 移动图形并为其设计“舞步”
第九章 函数： 建立新的代码模块
第十章 对象： 创建含有变量和函数的代码模块
第十一章 数组： 让处理一列变量变得简单
第十二章 数据： 载入并可视化数据
第十三章 延伸： 了解声音的DOM

4、变量

一个变量就是存储在内存中并能被程序使用的一个值。在一个程序中，一个变量可以被使用多次。在程序运行过程中，变量的值可以被修改。

创建第一个变量

我们是用变量的首要原因就是使用变量可以减少代码中的重复输入。如果你想输入一个相同的数字超过一次，那么变量的使用会使你的代码变得更通用、更易修改。

例子4-1：重复使用相同的值

在下面这个例子中，你将相同的y坐标和直径以变量的形式分别赋给三个圆形（如图4-1）：

图4-1

var y = 60;
var d = 80;
function setup() {
     
 createCanvas(480, 120);
}
function draw() {
     
 background(204);
 ellipse(75, y, d, d); // Left
 ellipse(175, y, d, d); // Middle
 ellipse(275, y, d, d); // Right
}

例子4-2：改变变量的值

在上面的例子中，我们只要改变变量 y 和 d 的值就能轻松改变三个圆的位置和形状（如图4-2）：

图4-2

var y = 100;
var d = 130;

function setup() {
     
 createCanvas(480, 120);
}
function draw() {
     
 background(204);
 ellipse(75, y, d, d); // Left
 ellipse(175, y, d, d); // Middle
 ellipse(275, y, d, d); // Right
}

如果没有使用变量，你需要修改三次y坐标和六次直径d。比较例子4-1和4-2，显然两个程序除了前两行的变量值不同之外，其他都是相同的。变量可以将你需要修改的代码段与不需要修改的部分分离开来，使得程序更容易被修改。举个例子，如果你使用变量来控制一个图形的颜色和尺寸，那么你只要修改一点代码就可以迅速尝试其他的视觉效果。

创建变量并赋值

当你创建变量时，你需要指定变量的名字和值。名字就是你决定变量叫什么，最好选取一个与你变量存储的数据相关的但又不冗长的名字。举个例子，当你看代码时，一个名字叫做“radius”（半径）的变量一定比叫 “r”变量名更容易让你理解。

变量必须先声明，这样电脑才会在内存中为你申请一块空间用来存储信息。当你要声明变量时，你需要使用 var 来表明你正在创建一个新的变量，然后你需要在 var 后面加上变量的名字。当名字确定以后，你就可以为变量赋值了：

var x; // Declare x as a variable
x = 12; // Assign a value to x

下面这段代码与上面的功能一样，只是更短：

var x = 12; // Declare x as a variable and assign a value

声明一个变量的时候需要在前面使用关键字
var ， 但是当程序在后面使用这个变量时不用再使用 var 。 因为每当你在一个变量名字前面加上 var 以后，计算机都认为你试着创建一个新的变量。 在一块相同的程序内部，你不能创建两个名字一样的变量，否则程序运行起来会得到奇怪的结果：

var x; // Declare x as a variable
var x = 12; // ERROR! Can't have two variables called x here

通常，你可以将变量放置在 setup() 和 draw() 函数的外面。如果你在 setup() 函数内部声明了一个变量，你将不能在draw() 函数中使用它。为了使这些变量在两个函数中均能使用，你需要把它们放在两个函数的外面，这些变量称之为 全局变量 ，因为它们在程序的任何地方均能使用。

p5.js 的内置变量

p5.js 内置了一系列的特殊变量用来存储程序运行时与其相关的一些信息。举个例子，存储画布（canvas）的宽和高的变量就是 width 和 height 。 这两个变量的值是由 createCanvas() 函数设定的。你可以使用它们绘制一些与画布尺寸相关的元素。

例子4-3：调整画布的尺寸，看看会发生什么

在这个例子中，你可以尝试修改 createCanvas() 函数的参数，看看会发生什么：

图4-3

function setup() {
     
 createCanvas(480, 120);
}
function draw() {
     
 background(204);
 line(0, 0, width, height); // Line from (0,0) to (480, 120)
 line(width, 0, 0, height); // Line from (480, 0) to (0, 120)
 ellipse(width/2, height/2, 60, 60);
}

其他的一些内置变量主要用来存储当前鼠标的轨迹和键盘的按键值等等。这些我们将在第五章讨论。

一点点数学

人们通常认为数学与编程是一回事。尽管数学知识在某些编程领域确实非常有用，但是最重要的部分还是基本的算术。

例子4-4：基本的算术

图4-4

var x = 25;
var h = 20;
var y = 25;
function setup() {
     
 createCanvas(480, 120);
}
function draw() {
     
 background(204);
 x = 20;
 rect(x, y, 300, h); // Top
 x = x + 100;
 rect(x, y + h, 300, h); // Middle
 x = x - 250;
 rect(x, y + h*2, 300, h); // Bottom
}

在上面的代码中，像 +、- 和 * 这些符号我们称之为 操作符（operators）。当我们把它们放置在两个值之间时，它们就创建了一个表达式。比如， 5+9 和 1024 -512 这两个都是表达式。下表中是基本的数学运算操作符：

+	加
-	减
*	乘
/	除
=	赋值

JavaScript 有一系列的规则规定这些运算符的流程，也就是先计算哪一部分,再计算哪一部分等等。这些规则定义了代码运行的顺序。我们通过讲解下面这段代码是如何工作的来引入一点这方面的知识：

var x = 4 + 4 * 5; // Assign 24 to x

4*5 这个表达式会被第一个执行，因为在这个语句中乘法拥有最高的优先级。接下来，4与4*5的积相加得到24。因为赋值操作符（=）的优先级最低，所以最后一步是将24赋值给变量x。为了看上去更清楚，下面这段代码中加了括号，但是结果是一样的：

var x = 4 + (4 * 5); // Assign 24 to x

如果你想强制让加法先运行，那么你需要将括号的位置移动一下。因为括号的优先级高于乘法，这时程序运行的顺序将被修改，计算结果也会改变：

var x = (4 + 4) * 5; // Assign 40 to x

在数学课上，我们将这个计算优先级称之为 PEMDAS。这其实是括号(Parentheses)、指数（Exponents）、乘（Multiplication）、除（Division）、加（Addition）、减（Subtraction）的几个英文单词的首字母缩略词，其中括号拥有最高的优先级而加减法拥有最低的优先级。完整的优先级顺序参见附录B（Appendix B）。（译者注：由于时间关系，附录B未来我会补上）

一些计算由于使用的过于频繁所以人们发明了一些缩写形式，这将节省一些代码输入。比如，你可以用下面的操作符来给变量加上或减去一个值：

x += 10; // This is the same as x = x + 10
y −= 15; // This is the same as y = y - 15

当然给变量加上或减去1也是常用的操作，所以这个操作也有缩写形式。++ 和 −− 就是用来干这个哒：

x++; // This is the same as x = x + 1
y−−; // This is the same as y = y − 1

重复

当你写的程序越来越多时，你就会注意到当代码不断重复但是又有些许变化时就会产生各种图案。一种称之为循环（loop）的代码结构可以使这种多行的重复代码压缩为一行代码运行。这使得你的程序更模块化更易于修改。

例子4-5： 不断地做同一件事情

下面这个例子（如图4-5）所绘制图案的方法可以通过 for 循环来简化：

图4-5

function setup() {
     
 createCanvas(480, 120);
 strokeWeight(8);
}
function draw() {
     
 background(204);
 line(20, 40, 80, 80);
 line(80, 40, 140, 80);
 line(140, 40, 200, 80);
 line(200, 40, 260, 80);
 line(260, 40, 320, 80);
 line(320, 40, 380, 80);
 line(380, 40, 440, 80);
}

例子4-6：使用一个循环语句

上面那个例子可以使用如下循环语句实现，这样可以减少代码量：

function setup() {
     
 createCanvas(480, 120);
 strokeWeight(8);
}
function draw() {
     
 background(204);
 for (var i = 20; i < 400; i += 60) {
   line(i, 40, i + 60, 80);
 }
}

显然，这个 for 循环与我们之前见到的任何代码都不太相同。首先它含有一对花括号{ }。在花括号之前的的代码我们通常称之为一个块（block）。这部分代码会随着 for() 循环的迭代而不断重复运行。

在括号（）中有三个呗分号分割开的三个部分，它们一起控制花括号内代码段的运行次数。从左至右，这三个部分分别为循环初始化（init）、测试条件（test）和条件的更新（update）：

for (init; test; update) {
 statements
}

初始化（init）的作用是在 for 循环中声明一个变量并为其赋初值。这个变量我们通常用 i 来命名，这只是个习惯没有什么特殊含义。测试条件部分（test）主要用来评估这个变量是否符合条件，而更新部分（update）只要是用来改变变量的值。图4-6显示了它们运行的顺序以及它们如何共同控制块内代码的运行的。

图4-6

在这里，测试条件部分（test）需要额外解释一下。总是写成两个数值与一个关系操作符组成的关系表达式。在这个例子中，表达式是 “i<400”，其中关系操作符为<（小于）。常用的关系操作符如下：

>	大于
<	小于
>=	大于等于
<=	小于等于
==	等于
!=	不等于

这个关系表达式的结果总是 true 或者是 false 。比如，表达式 5>3 的结果就是 true 。 我们可以问 “5比3大吗？” 因为结果是 “是的”所以这个表达式的结果是 true 。对于 5<3 , 我们问 “5<3吗？”; 因为结果是 “不是”所以这个表达式的结果是 false 。 当判断为 true 时，块内的程序继续运行，当是 false 时， 块内的代码不再运行然后循环结束。

例子4-7：亮一亮你的“循环肌肉”吧

一个 for 循环最大的力量就是能够使代码迅速发生变化。
因为块内的代码运行了很多次，此时快内代码的一个改变将产生巨大的影响。我们只要稍微修改一下例子4-6，就可以绘制出截然不同的图案（图4-7）：

图4-7

function setup() {
     
 createCanvas(480, 120);
 strokeWeight(2);
}
function draw() {
     
 background(204);
 for (var i = 20; i < 400; i += 8) {
 line(i, 40, i + 60, 80);
 }
}

例子4-8：让线条展开

图4-8

function setup() {
     
 createCanvas(480, 120);
 strokeWeight(2);
}
function draw() {
     
 background(204);
 for (var i = 20; i < 400; i += 20) {
 line(i, 0, i + i/2, 80);
 }
}

例子：4-9：弯转线条

图4-9

function setup() {
     
 createCanvas(480, 120);
 strokeWeight(2);
}
function draw() {
     
 background(204);
 for (var i = 20; i < 400; i += 20) {
 line(i, 0, i + i/2, 80);
 line(i + i/2, 80, i*1.2, 120);
 }
}

例子4-10：在一个循环内嵌入另一个循环

当一个循环内嵌入另外一个循环时，重复的次数是相乘的。首先，让我们先看一个小例子：

图4-10

function setup() {
     
 createCanvas(480, 120);
 noStroke();
}
function draw() {
     
 background(0);
 for (var y = 0; y <= height; y += 40) {
 for (var x = 0; x <= width; x += 40) {
 fill(255, 140);
 ellipse(x, y, 40, 40);
 }
 }
}

例子4-11：行和列

在这个例子中， 两个 for 循环是相连的，而不是一个嵌在另外一个里面。结果如图4-11显示的那样，一个循环绘制了一列4个圆而另外一个循环绘制一行13个圆：

图4-11

function setup() {
     
 createCanvas(480, 120);
 noStroke();
}
function draw() {
     
 background(0);
 for (var y = 0; y < height+45; y += 40) {
 fill(255, 140);
 ellipse(0, y, 40, 40);
 }
 for (var x = 0; x < width+45; x += 40) {
 fill(255, 140);
 ellipse(x, 0, 40, 40);
 }
}

当一个循环嵌套另外一个循环的时候（比如例子4-10），第一个循环重复了四次，而每次中包含着第二个循环的十三次运行，所以最终块内的程序一共运行了52次（4×13 = 52）。

例子4-10是一个很多可视化绘图的基本程序样式。后面的例子中，我们会发现这个样式会拓展成各种形式，而这只是这个样式能够拓展的形式中的很小一部分。

例子4-12：钉子和线

在这个例子中，代码用来绘制从网格上每个点到屏幕中心的一条直线（如图4-12）：

图4-12

function setup() {
     
 createCanvas(480, 120);
 fill(255);
 stroke(102);
}
function draw() {
     
 background(0);
 for (var y = 20; y <= height-20; y += 10) {
 for (var x = 20; x <= width-20; x += 10) {
 ellipse(x, y, 4, 4);
 // Draw a line to the center of the display
 line(x, y, 240, 60);
 }
 }
}

例子4-13：半调图案（Halftone Dots）

在这个例子中，每一行的圆都会比上一行缩小一点，而通过在x坐标上加上y坐标使圆从左边移到右边（如图4-13）：

图4-13

function setup() {
     
 createCanvas(480, 120);
}
function draw() {
     
 background(0);
 for (var y = 32; y <= height; y += 8) {
  for (var x = 12; x <= width; x += 15) {
   ellipse(x + y, y, 16 - y/10.0, 16 - y/10.0);
  }
 }
}

机器人2： 变量

图4-14

下面这个程序由于变量的引入而使程序看上去比之前的 机器人1更加复杂，但是这个程序却更容易修改，因为需要修改的数字都放在了一个位置。比如，颈部的绘制基于 neckHeight 变量。程序顶部的这些这些变量控制着我们想改变的机器人的每一个部分：它的位置、身高、颈部的高度。从图4-14中，你可以看到不同的变量值对应的不同的机器人图案。

当你使用变量而不是数值来修改你的代码时，你需要小心的设计好需要怎样改变，然后用简短的方式进行修改。比如，你在写程序时，最好一次创建一个变量这样可以将程序变化的复杂度降到最低。当一个变量被创建以后，一定要确保这个变量正常使用然后再声明下一个变量：

var x = 60; // x coordinate
var y = 420; // y coordinate
var bodyHeight = 110; // Body height
var neckHeight = 140; // Neck height
var radius = 45;
var ny = y - bodyHeight - neckHeight - radius; // Neck Y
function setup() {
     
 createCanvas(170, 480);
 strokeWeight(2);
 ellipseMode(RADIUS);
}
function draw() {
     
 background(204);
 // Neck
 stroke(102);
 line(x+2, y-bodyHeight, x+2, ny);
 line(x+12, y-bodyHeight, x+12, ny);
 line(x+22, y-bodyHeight, x+22, ny);
 // Antennae
 line(x+12, ny, x-18, ny-43);
 line(x+12, ny, x+42, ny-99);
 line(x+12, ny, x+78, ny+15);
 // Body
 noStroke();
 fill(102);
 ellipse(x, y-33, 33, 33);
 fill(0);
 rect(x-45, y-bodyHeight, 90, bodyHeight-33);
 fill(102);
 rect(x-45, y-bodyHeight+17, 90, 6);
 // Head
 fill(0);
 ellipse(x+12, ny, radius, radius);
 fill(255);
 ellipse(x+24, ny-6, 14, 14);
 fill(0);
 ellipse(x+24, ny-6, 3, 3);
 fill(153);
 ellipse(x, ny-8, 5, 5);
 ellipse(x+30, ny-26, 4, 4);
 ellipse(x+41, ny+6, 3, 3);
}

(译者：Jason Lee，邮箱：[email protected])

---