第二章 准备工作
安装p5.js
开使使用p5.js和JavaScript有好几种方式,其中一种是进入p5.js官网并在系统中下载p5.js的源代码(见图 2-1)。
在写本教程时,下载页中有一个名为p5.js complete的链接,其中包含p5.js库以及一个示例项目。下载压缩包,可在其中看到一个empty-example文件夹。该文件夹中有两个文件:sketch.js文件用于编写JavaScript代码,index.html用于在Chrome等浏览器中打开并显示sketch.js文件中的JavaScript代码运行结果。还可通过作者的GitHub仓库获取相同的代码。
虽然可通过像NotePad这样的普通文本编辑器来修改sketch.js文件中的内容,但建议使用Sublime Text等代码编辑器来进行修改。
代码编辑器与Notepad或Word这样的文本编辑器非常相似,但它有着易于编码的特殊功能,如对给定编程语言的特殊词语进行语法高亮显示,我们这里的编程语言是JavaScript。Sublime Text是你可以使用的一种代码编辑器,可下载并免费试用。
或许入门p5.js最简单的方式是在线编辑器。在线编辑器可在浏览器中使用,并且不需要在系统中进行任何安装。我在学习时很喜欢这种方式,因为入门很轻松。
在准备本书时一款易于使用的在线代码编辑器可通过如下链接获取:
如果出于某种原因无法访问以上链接,也可以尝试使用我的Codepen账号中托管的p5.js模板:Codepen - p5.js简单模板。CodePen是一个社交开发平台,这里可以在浏览器中编写代码并分享给其它开发人员。它是一个很棒的开发和测试环境。Codepen和上述所提到的p5.js编辑器的区别在于p5.js编辑器中仅能运行p5.js相关的代码,而Codepen上可以运行任意前端代码。
图2-1. 下载p5.js 源码的网页
图2-2. p5.js在线编辑器
在线编辑器的使用方法是,在我们写好代码要运行时点击页面上方的播放按钮键。按下按钮后将在右侧的窗口显示代码运行结果。Codepen的在线编辑器略有不同,只要做任何修改它都会自动执行。现在按下播放按钮不会看到什么效果,因为我们还没有编码在屏幕上画任何形状。此时生成的是一个空的画面,但我们也看到编辑器里是有代码的,这段代码我几乎在所有的p5.js程序中都会使用到,为读者方便以下是这段代码(示例2-1)。