《getting started with p5.js》（中文版）第二章开始写代码：创建你的第一个p5.js程序

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

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

2、开始写代码

为了掌握本书的内容，你需要的不仅仅是读它的文字，更重要的是你需要不断地实验和练习。你不可能仅仅通过阅读代码学会编程，你需要通过不断地尝试写这些代码。作为开始，下载p5.js 并且创建你的第一个项目。

运行环境

首先，你需要一个代码编辑器。一个代码编辑器与文本编辑器类似（比如Notepad或者Notes），只不过它为代码编辑赋予了特殊的功能而不是单纯的将文本打印出来。你可以使用任何一款你喜欢的编辑器。我们推荐 Atom 和 Brackets,它们都可以在线下载。

当然，我们也提供了一个官方版的p5.js编辑器。如果你喜欢使用它，你可以通过浏览 http://p5js.orgdownload 并选择“Editor”这个按钮下载。如果你使用p5.js编辑器，你可以直接跳到你的第一个程序那一节。

下载并安装文件

浏览http://p5js.org/download 然后选择“p5.js complete.”。双击下载的.zip文件，然后将里面的文件夹拖到你硬盘的一个位置。这个位置可以是 Program Files 或者文档或者是桌面上，但是最重要的事情就是将p5文件夹从.zip文件中解压出来。

在p5文件夹中包含一个示例程序，你可以从这个程序开始学习。首先打开你的代码编辑器，然后在你的代码编辑器里打开名为 empty-example 的文件夹。在大部分的代码编辑器里，你可以通过 “文件/打开”，然后选择empty-example 文件夹完成。现在，你已经完成了所有的配置并准备开始你的第一个程序了！

你的第一个程序

当你打来empty-example 文件夹以后，你将会看到一个侧边栏。在侧边栏的顶部可以看到文件夹的名字，接下来你会看到文件夹中包含的文件的列表。如果你点击每一个文件，你将会看到这些文件的内容出现在编辑器的主显示区域。

一个p5.js项目是通过几种不同的语言一起编译成的。HTML(HyperText Markup Language) 提供骨架，将其他所有的元素连接在一个页面。JavaScript（和p5.js库函数）让你在HTML页面显示你所创建的交互的图形。一些时候 CSS（Cascading Style Sheets）给HTML页面赋予新的样式，但是本书不涉及这个知识。

如果你打开了 index.html 文件，你会注意到那里已经存在一些 HTML代码了。这个文件通过引入p5.js库函数，为你的项目提供了结构。而另一个文件 sketch.js 则是写下你自己程序代码的地方。创建这些链接的代码如下：

<script language="javascript" type="text/javascript" src="../p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>

你无须对HTML文件做任何事情，它已经为你配置好了。接下来，点击 sketch.js 看一下其中的代码：

function setup() {
 // put setup code here
}
function draw() {
 // put drawing code here
}

这个模板包含两块，或者说两个函数，setup() 和 draw() 。你可以将代码放到任何一个函数中，但这两个函数的目的是不同的。
任何与你程序的初始化相关的代码都放在 setup() 中。现在，我们先让空着，但是在本书的后面内容中，你将会在里面填写代码来设置你的画布的尺寸，你的线条的宽度，或者你程序运行的速度。

任何与你在屏幕上绘制相关的代码（设置背景颜色、画各种形状、文字或者图片）都将放在 draw() 中。这里便是你将要写下你的第一行代码的地方。

例子2-1：画一个椭圆（或者圆）

删掉 draw() 花括号中的文本 // put drawing code here 并将其替代为如下的代码：

background(204);
ellipse(50, 50, 80, 80);

此时，你的程序将变成如下样子：

function setup() {
 // put setup code here
}
function draw() {
 background(204);
 ellipse(50, 50, 80, 80);
}

这个新的代码行的含义是“画一个中心点离左边界50像素，离上边界50像素，并且宽和高均为80像素的椭圆（ellipse）”。通过按“Command-S”或者选择“文件/保存”的方式保存这个代码。

你可以在任何浏览器上（比如Chrome, Firefox, 或者 Safari），打开 * index.html* 文件来查看程序的运行效果。进入你的empty-example 文件夹中，双击 * index.html* 文件来打开它。当然，你也可以在浏览器中选择 “文件/打开”然后选中 * index.html* 文件。

如果上述所有事情你都做正确的话，你将会看到一个圆出现在你的浏览器中。如果你没有看到，请确保你已经正确的复制了这段示例代码。这些数字必须包含在括号中并且用逗号隔开。每一行都要以分号结尾。

刚开始编程时，你面对的最困难的事情之一就是要清楚程序的语法。p5.js 并不总是能够理解你的意思，并且对标点符号的位置有比较严格的要求。你需要一些练习来熟悉掌握它。

例子2-2 画很多圆

删掉上面的例子，然后试试下面这个。保存你的代码，然后在浏览器中重新打开或者刷新（Command-R） index.html 来看看变化。

function setup() {
 createCanvas(480, 120);
}
function draw() {
 if (mouseIsPressed) {
 fill(0);
 } else {
 fill(255);
 }
 ellipse(mouseX, mouseY, 80, 80);
}

这个程序创造了一个480*120的画布，然后它会在你鼠标放置的位置画一个白色的圆圈。当一个鼠标按键按下时，这个圆的颜色会变成黑色（如图2-1）。我们会在之后的内容中详细解释这个程序。现在，运行这个程序，移动鼠标并点击来体验一下吧！
这里写图片描述
图2-1

控制台

浏览器中内置的控制台对于调试程序是非常有用的。每个浏览器都有不同的方式打开控制台。这里我们列举一些最常用的浏览器打开控制台的方法：

对于Chrome浏览器，在顶部的目录上选择视图/开发者/JavaScript控制台。
对于FIrefox浏览器，从顶层菜单选择工具/Web开发者/Web 控制台
对于Safari，在使用之前你要允许使用控制台功能。具体做法是在顶层菜单，选择偏好（Preferences）然后点击高级选项，然后选择显示“在菜单栏显示开发菜单”。之后，你就可以使用“开发者/显示错误控制台”来打开控制台了。
在IE中，按F12打开开发者工具，然后选择控制台工具。

按照你的浏览器选择上述方法，接下来你应该会看到一个界面出现在你屏幕的下方或者旁边（如图2-2）。如果你的程序中有打印错误或者其他错误，你将会看到一些说明错误原因的红色的文字。这些文字有些时候有一点让人难以理解，但是如果你注意看这一行的右手边，你会发现一个文件名和一个行号。这是浏览器检测到你错误发生的位置，从这里开始检查你程序的问题将会是一个不错的选择。

这里写图片描述
图2-2

做一个新的项目

你现在已经通过 empty example 创建了一个项目，那么如何再创建一个新的项目呢？最简单的方法就是将empty example 复制并粘贴到一个新的位置创建第二个empty example 。你可以给这个新的文件夹重新起一个名字——比如 Project-2。

你现在可以在代码编辑器中打开这个文件夹然后创建一个新的项目。当你想要看看它在浏览器中的运行效果时，打开 Project-2 文件夹中的 index.html 文件即可。

经常保存你的项目是一个很好的注意。当你尝试不同的事情时，保存为不同的名字（通过“文件/另存为”）。这样你总可以轻松回到更早的版本。无论何时，这个习惯总是很有帮助的。

示例和参考

学习如何用p5.js编程将探索大量的代码：运行、修改甚至推倒重来，然后提高直到你将这些代码重塑为新的代码。考虑到这一点， p5.js网站上拥有大量的示例来展示p5.js库的不同特性。你可以通过 the Examples page 来查看。你可以在网页上编辑每个例子的源代码然后点击“run”来把玩它们。这些例子基于它们使用的函数进行分类，比如形状（Form）、颜色（Color）、图片（Image）等。你可以找一个你认为有趣的主题并尝试其中的示例。

如果你遇到程序中某一部分是你不熟悉的或者你想要了解它更多的功能，请浏览 the p5.js Reference 进行查阅。

p5.js 参考文档对每个函数的功能进行了解释并配有示例。参考程序比那些在 Learn page 上的例子更短（通常只有4-5行）并更容易理解。这些示例为了简便通常省略了 setup() 和 draw() ，但是你看到的这些代码都被自动放入了这些块中运行。我们建议你在读这本书或者在编程时保持 Reference 始终开着。你可以通过主题或者页面上方的搜索栏进行浏览。

Reference 是为初学者量身定做的，我们希望它讲的清楚并容易理解。在这里，我们非常感谢那些指出并且公布错误的人们。如果你认为可以提高一个参考内容的质量或者你发现一个错误，请点击页面下方的链接让我们知道。

(译者：Jason Lee，邮箱：676574039@qq.com)