不知道你是否了解过 Processing 语言的家谱(如下图所示)。与人类语言一样,编程语言同样属于相关语言的家族。而今天,我要引出的,即其家族成员之一的 p5.js(官网)。
###Introduction
简单来讲,p5.js 是一个库配上许多工具,它让编程爱好者、艺术家、设计师们可以轻松使用 JavaScript 语言进行创意编程。
库是 JavaScript 库。
为什么选择 JavaScript?其优势在于 JavaScript 广泛的可用性和无处不在的支持——每个 Web 浏览器都内置了 JavaScript 解释器,也就意味着 p5.js 程序通常可以在任何Web浏览器中运行。作为一种简单而友善的环境,p5.js 提供了一种通过创建交互式图形来学习编程的方法,这也大大降低了学习 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,如果你安装了其他的编辑器,也可以通过以下教程自行解决。
教程列表:
我如何做的——
第一步:下载 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 的使用——
-
实时预览功能,即在浏览器中运行代码。下图标记处的功能等效。
-
修改软件语言。Brackets 默认的语言是英语,如果你想改为汉语,请通过 Debug>Switch Language 修改。
-
使用 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