p5.js 编程基础学习合集【1】

不知道你是否了解过 Processing 语言的家谱（如下图所示）。与人类语言一样，编程语言同样属于相关语言的家族。而今天，我要引出的，即其家族成员之一的 p5.js（官网）。

###Introduction
简单来讲，p5.j​​s 是一个库配上许多工具，它让编程爱好者、艺术家、设计师们可以轻松使用 JavaScript 语言进行创意编程。

库是 JavaScript 库。

为什么选择 JavaScript？其优势在于 JavaScript 广泛的可用性和无处不在的支持——每个 Web 浏览器都内置了 JavaScript 解释器，也就意味着 p5.js 程序通常可以在任何Web浏览器中运行。作为一种简单而友善的环境，p5.j​​s 提供了一种通过创建交互式图形来学习编程的方法，这也大大降低了学习 JavaScript 的难度。

有人把它看作是 Processing 的 Web 版本。这也并不无道理。它们都在构建草图和原型方面有着无可替代的优势，既好玩又方便，让我们在很短的时间内能探索更多的想法。

工具是第三方库的支持。

就像软件的工具栏一样，libraries 将 p5.js 进一步扩展到声音和音乐的领域、使用HTML添加按钮、滑块、输入框和网络摄像头捕捉……
###Workflow
那么，如何进行 p5.js 项目的设置和编写你的第一个草图呢？这里有官方教程，以下是我的做法——

方式一：在线编辑

这是我找到的在线编辑网址：

• https://codepen.io/p5js/pen/wreBKy
• http://alpha.editor.p5js.org/
• https://www.openprocessing.org/

因为我并不常用，所以在这里不多评价。

方式二：使用代码编辑器

我所采用的是 Brackets，官方还推荐了Atom等。下面我只介绍 Brackets，如果你安装了其他的编辑器，也可以通过以下教程自行解决。

教程列表：

• Sublime Text 安装教程
• Brackets 安装教程
• Atom 安装教程

我如何做的——

第一步：下载 p5.js 库 和下载并安装 Brackets；

第二步：用 Brackets 选择你 html 和 js 文件所在的文件夹（在你下载的 p5.js 库中，一般叫 empty-example）。如果你查看 index.html，你会注意到它是链接到了 p5.js 文件。（如果你觉得加载速度慢，你可以使用压缩版 p5.min.js）

<script src="../p5.js"></script>

可这时候的链接地址是不正确的，至于如何修改，我找到了两种方案：
方案一：
改为链接到在线托管的 p5.js 文件。所有版本的p5.js都存储在 CDN 中。即：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

方案二：
在你 html 和 js 文件所在文的件夹中，新建一个名为“libraries”文件夹。然后把你下载好的 p5.js 文件（或是其他的）放到其中。最后请将链接地址更改为：

<script src="libraries/p5.js"></script>

第三步，用 Brackets 编写 sketch.js 文件，开始散播你的灵感了。举个栗子：

function setup() {
  createCanvas(640, 480);
}

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

PS：Brackets 的使用——

1. 实时预览功能，即在浏览器中运行代码。下图标记处的功能等效。
   

2. 修改软件语言。Brackets 默认的语言是英语，如果你想改为汉语，请通过 Debug>Switch Language 修改。

3. 使用 ESLint 自动检测 JavaScript 中的问题。Brackets 具有两个查错的工具。基本上 JSHint 是一个能够完成所有工作的较老的工具，但 ESLint 能更好地完成了这项工作。借助 ESLint，您可以配置所有内容，以您想要的方式工作。您还可以获得新规则，这使得 ESLint 可以检测更多问题。JSHint 的唯一优点是速度稍快。**注意的是：这里检测出问题不一定就是错误，程序也许能够正常地运行。它只是检测出可能的错误，更方便我们找出错误。**你也可以通过配置 ESLint，使其能够更智能地为我们服务，具体参看文章。
   ###Basics of drawing
   如同在 Processing 中一样，setup() 函数（最开始调用的函数）只调用一次，在这里我们需要创建画布：createCanvas(width, height)；而 draw() 函数会不停地调用，我们一般在这里写上要显示的内容。

至于一些简单的图形元素，你可以在这里找到。（记住一点，官方手册是非常重要的学习资料）

关于通过鼠标和触摸交互的方法，这里有个表格我觉得很实用：

###Color
色彩很奇妙，水也很深。我想通过一个栗子，和大家简单地了解一下：

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

function draw() {
  background(127);
  noStroke();
  for (var i = 0; i < height; i += 20) {
    fill(129, 206, 15);  // 填充
    rect(0, i, width, 10);
    fill(255);
    rect(i, 0, 10, height);
  }
}

效果如下：

可以知道的是，p5.js 和 Processing 一样，拥有 RGB 颜色模式，当然还有 HSB。不是很了解的朋友，可以自行查阅。这里我们知道这么多已经足够了。
###Learning
如何学习 p5.js? 我觉得最好的两个地方，就是官网和论坛了。（官方手册尤为重要）

官方网站：

论坛：https://forum.processing.org/two/

至于其他资源：
Processing.js Quick Start

Daniel Shiffman 的教学视频，YouTube

学习书籍下载：

Getting Started with p5.js 【PDF 高清无水印版】

Learning JavaScript Design Patterns