作者：李子旸,蔡蔚妮,等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
p5.js互联网创意编程试读：
内容简介
p5.js是一个以Processing语言为基础的JavaScript库，经常用于互联网数据可视化和互动艺术创作。它继承了Processing语言的初衷，通过简单的编程即可表达数字创意。本书共12章，全面介绍了p5.js的功能和使用方法，包括p5.js基础图形绘制、p5.js语法、响应互动、运动和几何变换、函数和对象、数组、图片、视频、音频等内容，可供高等学校数字媒体艺术设计类专业学生、相关从业人员和编程爱好者学习使用。序
回想这几年数字媒体艺术专业的教学与研究工作，虽然其中很多经验和方法不是一本书所能叙述的，但是希望这本书可以成为高等学校数字媒体艺术设计类专业学生学习创意编程的入门书籍。
第一次接触Processing语言是在2010年，那时我还在法国贝桑松大学多媒体专业就读研究生二年级。当时就感觉这种参数化的艺术创作形式非常新颖且具有吸引力，之后又学习了广州美术学院谭亮老师的经典中文著作——《Processing互动编程艺术》，该书对我之后的数字媒体艺术创作和教学有着非常深远的影响。近年来，随着移动互联网的普及，Processing语言的JavaScript版本p5.js面世，让互联网与艺术形成了一次美妙的碰撞，人们可以借助互联网进行艺术创作，体验互动艺术结合互联网带来的便利性与趣味性。
近半年，我一直在进行这本书的编写工作。它不仅是我教学资料的总结，更融合了我对互联网创意编程的理解。由于国内p5.js的中文书籍和资料非常少，因此在编写过程中难免会有不足之处，还望读者谅解并提出宝贵意见。
感谢p5.js创始人Lauren McCarthy女士对我撰写中文版p5.js书籍的支持。感谢我的学生们带给我的灵感和启发，感谢丁沐榕、王军艺、倪家赫、任柏洺、唐宇昂、于文媛、丁梦茹同学，他们的优秀作品为本书的出版做出重要贡献，感谢电子工业出版社的刘瑀老师及其团队，感谢我的同事对本书提出的宝贵建议。最后，特别感谢家人对我的支持和理解。
前 言
我早就想写一本关于互联网创意编程的书，与同行们交流和分享些许教学与研究的体会，但迟迟找不准切入点，想不透互联网艺术的意义到底是什么。近几年，我做了些关于互动艺术的项目，看了很多与数字媒体艺术相关的展览，从中或多或少汲取了一些经验。特别是下面提到的两件事情让我感受深刻，促使我对未来数字媒体艺术的表现形式有了更多的思考。
第一件事情是做时光绘画装置实验。这是我于2016年参与的某商家的一个互动艺术项目，即用户拿着发光体在暗室中挥动，用摄像头捕捉光运动的像素点并记录下来，形成图像。项目前期测试做起来很有意思，但在展览现场却没有达到预期的效果。在和用户交流的过程中才领悟到：用光在暗室中绘画和用笔在纸上绘画，虽然场景和手法不同，但创作构图同样需要绘画功底。我们之前做原型测试的时候找的都是艺术设计专业的学生。他们有绘画基础，因此可以使用光笔轻松地做出各种图形。而在展示现场，测试者千差万别，大多数人没有绘画能力。一位年轻女性用户的反馈就很直白，她觉得这个东西好玩儿，很有意思，但对她来说操作太难，哪里还有自信在暗室中用光笔画出理想的图案啊？！
第二件事情是我于2018年参加Barbican Centre（巴比肯艺术中心）在北京举办的一个展览。这个主题为“Digital Revolution（数字革命）”的展览讲述了电子游戏发展史，并对未来数字化媒介进行了实验和探索，是一个值得看的数字媒体艺术展，可惜有不少的展品是几年前的。我在感叹数字媒体艺术的发展实在是太快的同时，也观察和研究了观展人群及其兴趣。我把观众大致分为80～90后、90～95后、95～00后几个年龄段，随访了一些人。可以这样说，这些年龄段的人的价值观基本上代表着未来10年甚至20年主流人群的价值观。受访者背景各异，其中仅有一小部分人接受过艺术类专业教育，但所有的人对数字媒体交互艺术的兴趣都很高。无论是电子游戏还是一些富有创造性的交互展品，他们都很喜欢，只是希望没有很复杂的交互过程，且不用特殊的专业技能就可以参与互动创作。
这两个事例看似有些矛盾，我们一方面在强调大众参与，一方面又强调专业基础；一方面强调应用效果，一方面又强调社会效益；一方面强调娱乐性，一方面又强调艺术品位。其实，这些问题正是当前数字媒体艺术发展面临的难点。众所周知，数字媒体艺术是伴随着计算机科学技术和网络媒体技术的发展而形成的新兴艺术门类。作为技术支持工具的计算机及其配套设备是工业标准化的产物，而艺术的生命力又在于它的个性化和独创性，这就要求我们在标准化的条件限制下尽最大可能去展现和张扬艺术品的个性与特色。再看网络媒体技术，大众化是它的本质特征。今天的世界已经被互联网和移动社交媒体环绕，信息不断丰富带给受众的已经不仅仅是艺术欣赏。人们对美和创造力的追求非但没有因为信息爆炸而丧失，而且还在不断地升级。参与、体验、再创作成为一种新的时尚。人们喜欢用一些可以做微创造的艺术表现工具来展示自我，并把一些有意思的东西分享和曝光出去；进而，人们不再喜欢陈旧的表现形式，总想深入一些问题，掺杂一些自己的东西和思想到艺术品中。这也许就是为什么诸如抖音、脸萌、Faceu和 ZEPETO 这些App 能够火爆起来的原因吧。此外，单就艺术本身来说，视觉艺术与听觉艺术、实景艺术与虚拟艺术、动态艺术与静态艺术都有各自的特性。数字媒体出现以后，创作、保存、复制和传播的方式发生了很大改变，多种艺术元素和艺术形式的高度融合也成为了现实，传统作品至高无上的唯一性规则已经受到很大冲击。
综上所述，如何实现工具标准化、应用大众化、艺术个性化的有机结合，是数字媒体艺术发展面临的实际问题。当然，这些问题的解决有待于深入的理论研究和探索。但从应用角度来看，设备改良、软件选择、程序设计等手段可能更加可行。因此，目前有很多高校在数字媒体艺术专业开设了程序设计课程，或许通过艺术专业学生强化程序设计在艺术创作中的作用，是促进“数字技术+媒体传播+艺术创作”有机结合的一条有效途径。基于这一认识，我们选择p5.js编程语言作为切入点，试图针对高等学校数字媒体艺术设计类专业学生的思维特点，编撰一部基于互联网创意编程的教材。
本书的显著特点是注重实用，除介绍少量而又必要的概念之外，尽量避开繁冗的文字叙述，代之以多种绘图方法和大量示例程序。凡是涉及操作功能的，都与示例相联系，并且每一个示例程序都已测试通过。用户只要理解正确，准确输入，就可以得到满意的结果，即使是从未接触过程序设计的初学者也可以快速入门。
本书适合高等学校数字媒体艺术设计类专业学生、相关从业人员和编程爱好者学习使用。希望读者在掌握p5.js编程要领后，可以在网页上做出有意思的互动作品。希望本书可以让更多人亲身体验到互动艺术的魅力。李子旸2019年6月于北京第1章 p5.js概述
p5.js是什么？它是如何诞生的？这得从2001年讲起。艺术家Casey Reas和Ben Fry是美国麻省理工学院媒体实验室（M.I.T Media Lab）美学与计算小组的成员。该小组成立于1996年，由著名的计算机艺术家John Maeda领导。其开发了Design By Numbers语言并且一直致力于研究计算机程序与艺术表现的完美结合。过去，C++和Java是人们经常使用的编程语言，然而这两种编程语言让大多数艺术家感到烦恼，尤其是没有接触过编程的艺术家和设计师，编写这两种类型的代码对他们来说是非常困难的事情。Casey Reas和Ben Fry也意识到了这一点。在Design By Numbers语言的影响下，他们开发出了一款让设计师、艺术家和其他非程序员都能够轻松使用的计算机编程语言——Processing。
艺术与科技的巧妙结合，碰撞出让人意想不到的火花。通过Processing，设计师和艺术家可以更好地、更简单地使用代码来表现创意，不再被烦琐的编程语言束缚思维，而是可以将注意力集中在图像与交互方式上面。这些年，Processing已经广泛应用于艺术、人文科学、数据可视化、计算机科学等很多领域。
几年前，Casey Reas和Ben Fry联系了Lauren McCarthy，一起讨论并设想Processing在Web上呈现的可能性。他们带着这个想法，带着Processing的初衷，创建了p5.js这个JavaScript库，实现了Web端的互动艺术创作，释放出互联网创意编程的巨大魅力。
第一个p5.js的测试版于2014年8月推出，从那时起，它便在全世界范围内被设计师和艺术家使用。p5.js能有今日的成就，要归功于千万名艺术家与程序员的努力。他们修复核心功能漏洞、编写示范与案例、无私地分享代码，这些因素缺一不可。p5.js希望可以继承Processing的理念，在Web上继续做出好的创意，让更多的人接触到互动编程艺术，学习使用代码创作互动艺术作品的方法。
p5.js可以制作基于网页的图像、动画和交互作品。输入一行绘制点的代码，会有一个像素点显示在屏幕上。将绘制代码稍加变化，像素点可能会变成一个椭圆形。再多写几行代码，椭圆便能跟随鼠标指针移动。试着添加一些描绘颜色的代码后，当单击鼠标时，椭圆会改变颜色。在编写和修改代码的过程中，一步一步实现图形的绘制与互动，是一件非常有趣的事情。为了让使用Processing的用户能更好地适应Web开发，p5.js尽可能地遵循Processing的语法。但是，毕竟p5.js使用JavaScript语言构建，而Processing使用Java语言构建，两种语言有着不同的模式。因此，有时在编写过程中不得不偏离Processing的语法。不过p5.js与其他JavaScript库可以完美地兼容，从功能到工具上实现无缝集成，从而对熟悉Web或前端开发但不了解创意编程的用户是非常友好的。
在接下来的章节中，本书将阐述p5.js提供的各种绘图和互动方法。1.1 易懂的一门语言
编程也有它的语言体系，这一点与人类语言非常像。p5.js属于JavaScript语系，它与JavaScript的语法结构基本相同。但是p5.js更加简单且易于使用，它将很多功能进行了封装，用户只需要输入一个函数名就可以执行某个复杂功能。正因为有了这些简单易懂的函数，p5.js成为了适合学习互联网创意编程的入门语言。1.2 p5.js的功能与特性
p5.js由许多工具和模块组成，它们以不同的组合方式协同工作。一个p5.js程序短则几行，长则数千行、数万行。因此，它的灵活性与适应性需要更深入的研究。另外，一些p5.js的外部库进一步将它扩展，实现了图片、音频、视频、3D等处理功能，并通过HTML添加按钮、滑块、输入框，实现了各种形式的数据输入。1.3 进入p5.js的圈子
任何人都可以去p5.js的官方网站（p5js.org）免费下载开发包进行学习和创作。p5.js是一个免费、自由、开源的软件。它本着开放共享的精神，希望用户登录p5js.org分享和发布自己的项目和经验。同时，也可以登录OpenProcessing网站（免费的Processing艺术家作品分享网站）与世界各地的艺术家进行探讨交流（如图1.1所示）。图1.1 OpenProcessing网站1.4 下载p5.js库
访问p5.js的官方网站p5js.org（如图1.2所示），在Download菜单中可以下载最新版本的p5.js开发包。
由于本书所有示例均使用0.7.1版本，因此强烈建议读者从本书提供的链接下载本书的资源压缩包，其中包括了p5.js 0.7.1版本开发包、所有示例文件及素材。
本书资源压缩包下载地址：https：//share.weiyun.com/5xCNNia。（资源下载）图1.2 p5.js官方网站主页
资源压缩包解压后将得到“资源”文件夹，将其中“开发包”文件夹下的“p5”文件夹（p5.js 0.7.1版本开发包）拖至硬盘的某个位置。1.5 开发环境
除了开发包，还需要下载一个代码编辑器。代码编辑器类似于文本编辑器，它可以进行代码的编写。建议使用Sublime或者Notepad++，这两个代码编辑器都可以在它们的官方网站下载。1.6 开启第一个程序
完成上述工作便可以开启第一个程序了！“p5”文件夹内已经有一个创建好的空项目——“empty-example”文件夹。打开“empty-example”文件夹将会看到两个文件：“index.html”和“sketch.js”。使用代码编辑器将它们打开并浏览里面的内容。
查看“index.html”文件会发现，它仅仅是为了给程序建立架构，它将需要用到的p5.js库文件和另一个名为“sketch.js”的文件（需要编写p5.js代码的文件）链接在一起。创建这些链接的HTML代码如下：
本书并不是为了学习HTML语言，因此无须对此HTML文件执行任何操作，读者只需要将重心放在“sketch.js”文件上面即可。 接下来，使用编辑器浏览“sketch.js”文件，会看到下面的代码，这里才是开始编写p5.js代码的地方：
学习过Processing的读者对上述结构会感觉非常熟悉，代码分为两部分：setup函数和draw函数。每个部分都有特定的功能。凡是设置程序初始状态的代码，建议写在setup函数里面，例如，设置画布大小、刷新频率、色彩模式等。关于图形绘制的功能代码建议写在draw函数里面，例如，设置颜色填充、绘制矩形、绘制直线、绘制图像像素等。这里暂且将这些详细的功能放到一边，本书后面会对这些功能进行详细讲解。
与前几节不同，学习后面章节要做的不仅仅是阅读，实践与练习才是最重要的事情。在理解了一些代码的基本含义后，请使用键盘输入这些代码并尝试进行改变，绘制出不一样的艺术图形。首先，尝试着画一些简单的图形。
例1-1 绘制一条线段
在draw函数内，输入以下内容：
完整的代码结构如下：
上述代码执行的结果是：绘制一条线段，其中一个顶点的位置距离画布最左边50像素，距离画布最顶部50像素，另一个顶点会跟随鼠标指针移动。将示例保存并使用Web浏览器（推荐使用Chrome浏览器）查看代码的运行效果。双击“index.html”文件，或在浏览器中选择并打开“index.html”文件。如果输入的代码无误，那么将会在浏览器中看到一条跟随鼠标指针移动的线段。
上面这个示例是在“empty-example”文件夹中完成的创作。但是，如何建立新项目呢？最简单的方法是：单击“empty-example”文件夹，直接复制粘贴并将文件夹重命名，例如，命名为“myFirstProject”或“1-1”或其他能够表达作品内容的名称。创建好新的文件夹后，就可以在代码编辑器中打开新文件夹下的“sketch.js”文件开启新篇章。
读者练习本书的每个示例前，请使用不同的文件夹名称创建项目，以便日后方便查找（建议使用本书的示例编号命名文件夹名称，例如，将文件夹命名为“1-1”）。另外，应记住随时保存代码。养成经常保存代码的好习惯，在面对突发状况时就可以从容应对。
下面这个示例将尝试做一些更有趣的图形。
例1-2 绘制连续的线条
复制空项目“empty-example”文件夹并重命名文件夹名称。进入新创建的文件夹并打开“sketch.js”文件进行本例的编写（效果图如图1.3所示）。图1.3 例1-2效果图
这个示例创建了宽、高都是600像素的画布，鼠标指针可以在画布上移动并绘制出一些黑色的线段。单击鼠标，线段将变为灰白色。与其他计算机语言一样，p5.js只认识代码，因此需要严谨的语法结构和缜密的逻辑思维。只要一点一滴地进行练习，终会慢慢适应它。这里尝试着理解代码的含义，但不要着急，后面的章节还会学到更多关于绘图和互动的知识。读者学完整本书后，可以再回过头来看看这个示例，将会有不一样的感受。1.7 草图的重要性
在正式学习p5.js的内容前，需要强调关于图形草图与构思的重要性。Casey Reas在接受创想计划采访时特别谈到了绘制草图。草图是一种非常有意思的思考方式，它便于快速地将想法记录下来。在p5.js的创作中，并不建议直接进行图形代码的编写，而是应该先在纸上绘制一些原型草图（如图1.4所示），然后再用代码把想要表现的图形呈现在屏幕上。图1.4 随着草图从纸张转移到屏幕上，画面产生了新的可能性（作者：王军艺）第2章 绘制图形《罐中瓶》，倪家赫，2019年1月
创建了一个p5.js项目，便可以通过“index.html”文件在浏览器中查看效果。浏览器窗口呈现图形的区域称为画布。画布默认会在浏览器窗口的左上角呈现。它可以与浏览器窗口尺寸相同，也可以不同。在屏幕上绘图，就像在一张坐标纸上画画一样，只不过屏幕的基本单位是像素而不是厘米或毫米。在绘制图形时，x坐标是指某个像素点到画布左边缘的距离，y坐标则是指这个点到画布顶端的距离。2.1 画布
画布是怎么建立起来的？画布上的图形又为什么能够呈现出来？这一切都要归功于函数。函数是p5.js的基础组成部分，函数的具体表现是由它的参数决定的。每个p5.js程序都会写入createCanvas函数，用来创建具有特定高度及宽度的画布。关于函数的更多知识，将在本书后面的章节详细介绍。
例2-1 创建一个画布
createCanvas（width，height）函数有两个参数，第一个参数width用于设置画布的宽度，第二个参数height用于设置画布的高度。本例创建了宽为640像素、高为480像素的画布。background函数用于设置画布的背景颜色。2.2 基本形状
p5.js可以使用一些函数绘制基本图形。如果读者之前学习过Photoshop或者类似的数字绘图软件，应该对计算机绘图有一些了解，这些软件都可以使用基本图形创建非常有意思的图画。p5.js可创建的基本图形包括：点、直线、三角形、四边形、矩形、椭圆、圆弧和贝塞尔曲线。下面将举例说明这些绘制基本图形函数的使用方法。
例2-2 点——point函数
point（x，y）函数可以绘制像素点，即填充一个像素单位。这个函数需要两个参数，x坐标与y坐标。首先创建一个宽为300像素、高为300像素的画布，然后在画布中心绘制一个坐标为（150，150）的点。
使用肉眼分辨屏幕中的一个像素点非常困难。因此，试着再多写几个点并改变一下它们的参数，让它们处于同一条水平线或垂直线上，这样就能看得更清楚并且能更快地明白这个函数的意义。
例2-3 线段——line函数
line（x1，y1，x2，y2）函数绘制线段需要4个参数，前两个参数定义线段起点坐标，后两个参数定义线段终点坐标。使用line函数绘制一条起点坐标为（80，400）、终点坐标为（400，100）的线段（效果图如图2.1所示）。图2.1 例2-3效果图
例2-4 三角形与四边形——triangle和quad函数
triangle（x1，y1，x2，y2，x3，y3）函数绘制三角形需要6个参数，quad（x1，y1，x2，y2，x3，y3，x4，y4）函数绘制四边形需要8个参数（每个顶点需要一对坐标参数）（效果图如图2.2所示）。图2.2 例2-4效果图
例2-5 矩形——rect函数
绘制矩形函数rect（x，y，width，height）是经常需要使用的一个函数，它需要4个参数，前两个参数定义矩形左上顶点位置，后两个参数分别定义矩形的宽度与高度。本例使用rect函数创建了3个矩形（效果图如图2.3所示）。图2.3 例2-5效果图
如果希望rect函数的前两个参数表示矩形的中心点坐标，那么可以使用rectMode（CENTER）函数将矩形起点位置设置为矩形的中心。运行以下代码，看看矩形的位置发生了什么变化。
例2-6 椭圆——ellipse函数
绘制椭圆函数ellipse（x，y，width，height）与rect函数类似，前两个参数定义椭圆的圆心，后两个参数分别代表椭圆的宽度直径及高度直径（效果图如图2.4所示）。图2.4 例2-6效果图
p5.js中并没有用于绘制正方形或正圆形的函数。想要做出这两种形状可以使用ellipse或rect函数，并设置其宽度与高度参数值相等即可。
例2-7 圆弧形——arc函数
arc（x，y，width，height，start，stop）函数可以绘制圆弧形。arc函数共有6个参数，前4个的作用与椭圆一样，用于确定圆弧的圆心位置和宽、高直径。第5个参数决定圆弧的起始角度，第6个参数是圆弧的结束角度（效果图如图2.5所示）。图2.5 例2-7效果图
arc函数的第5个和第6个参数采用弧度制计算。弧度是基于圆周率PI的测量值，图2.6展示了弧度与角度的关系。角度从0°至360°进行表述，而弧度则从0至大约6.28。p5.js给常用的4个弧度值赋予了特殊的名称：QUARTER_PI 、HALF_PI、PI和TWO_PI分别代表45°、90°、180°和360°的弧度值。图2.6 弧度与角度的关系
例2-8 角度转换为弧度
如果习惯以角度为单位进行计算，可以使用radians（angle）函数将角度转换为弧度。本例与例2-7的效果一样，只不过加入了radians函数将角度转换为弧度。
例2-9 贝塞尔曲线——bezier函数
贝塞尔曲线由法国工程师皮埃尔·贝塞尔于1962年发明，该曲线用他的名字命名。最早，贝塞尔曲线用于汽车设计，后来广泛运用在工业设计领域和数字图形设计中。著名的Photoshop中的钢笔工具就是使用了贝塞尔曲线。p5.js中，贝塞尔曲线由4个点定义，分别是起点、终点以及两个相互分离的控制点。移动两个控制点，贝塞尔曲线的形状会发生明显的变化。
贝塞尔曲线函数bezier（x1，y1，cx1，cy1，cx2，cy2，x2，y2）包含8个参数，其中，x1，y1与x2，y2定义起点和终点坐标；cx1，cy1与cx2，cy2定义两个控制点坐标（效果图如图2.7所示）。图2.7 例2-9效果图
综上所述，所有绘图函数的使用方法与呈现效果如图2.8所示。图2.8 所有绘图函数的使用方法与呈现效果2.3 自定义形状
除了简单的基本形状，还可以通过连接顶点的方式创建一些更有意思的形状。
例2-10 星形
beginShape函数表示开始创建自定义图形，vertex（x，y）函数定义这个形状中每个顶点的坐标，最后写入endShape函数表示形状已经完成（效果图如图2.9所示）。
试读结束[说明：试读内容隐藏了图片]