p5.js互联网创意编程

一件艺术作品真正打动你的并不是它本身，而是你在它身上找到了你的影子。

互联网 艺术的美妙碰撞
编程 互动的独特趣味
让艺术变得触手可及 

p5.js 是一个以Processing 语言为基础的JavaScript 库，经常用于互联网数据可视化和互动艺术创作。它继承了Processing 语言的初衷，通过简单的编程即可表达数字创意。本书共12 章，全面介绍了p5.js 的功能和使用方法，包括p5.js 基础图形绘制、p5.js 语法、响应互动、运动和几何变换、函数和对象、数组、图片、视频、音频等内容，可供高等学校数字媒体艺术设计类专业学生、相关从业人员和编程爱好者学习使用。

李子?D，北京城市学院艺术设计学部，讲师，虚拟漫游和数字游戏专业负责人。毕业于法国贝桑松大学STGI数字媒体研究中心，2005年至今一直从事艺术设计、视觉传达、交互设计、数字媒体艺术相关的设计和应用研究工作。主要研究领域是数字技术和艺术相结合的视觉表现设计，利用新技术进行数字化产品的设计及制作。主要工作是构建虚拟空间环境，结合虚拟现实、增强现实、互联网及大数据相关技术，为政府和相关企业设计并制作了多款具有经济价值或社会价值的数字媒体产品。

— 目 录 —

第1 章 p5.js 概述 / 001

1.1 易懂的一门语言 / 002

1.2 p5.js 的功能与特性 / 002

1.3 进入p5.js 的圈子 / 003

1.4 下载p5.js 库 / 003

1.5 开发环境 / 004

1.6 开启第一个程序 / 004

1.7 草图的重要性 / 007

第2 章 绘制图形 / 009

2.1 画布 / 009

2.2 基本形状 / 010

2.3 自定义形状 / 017

2.4 绘图顺序 / 022

2.5 颜色填充 / 023

2.6 描边属性 / 028

2.7 企鹅01 / 030

练习 / 032

第3 章 语法 / 033

3.1 了解变量 / 033

3.2 创建变量 / 035

3.3 变量类型 / 038

3.4 系统变量 / 038

3.5 简单运算 / 040

3.5.1 算术运算符 / 040

3.5.2 关系运算符 / 042

3.5.3 逻辑运算符 / 043

3.6 条件语句 / 043

3.6.1 if 语句 / 043

3.6.2 else 语句 / 044

3.7 for 循环 / 046

3.8 setup 和draw 函数 / 056

3.9 控制台 / 057

3.10 注释 / 058

3.11 映射 / 058

3.12 企鹅02 / 060

练习 / 062

第4 章 响应互动 / 063

4.1 鼠标响应 / 063

4.2 鼠标单击 / 068

4.3 键盘响应 / 069

4.4 企鹅03 / 072

练习 / 074

第5 章 运动和几何变换 / 075

5.1 移动 / 075

5.2 旋转 / 078

5.3 随机 / 081

5.4 平移函数translate / 093

5.5 旋转函数rotate / 094

5.6 缩放 / 096

5.7 push 和pop 函数 / 098

5.8 企鹅04 / 099

练习 / 101

第6 章 函数和对象 / 102

6.1 函数 / 102

6.2 面向对象编程 / 112

6.2.1 定义类 / 113

6.2.2 创建对象 / 116

6.3 企鹅05 / 121

练习 / 124

第7 章 数组 / 125

7.1 使用变量绘图 / 125

7.2 创建数组 / 127

7.3　对象与数组 / 133

7.4　企鹅06 / 135

练习 / 136

第8 章 图片 / 137

8.1 加载图片 / 139

8.2 预加载preload 函数 / 144

练习 / 145

第9 章 视频 / 146

9.1 视频文件 / 146

9.2 实时视频流 / 151

练习 / 156

第10 章 图片和视频处理进阶 / 157

10.1 像素数组 / 157

10.2 像素绘制图片 / 161

10.3 视频像素处理 / 166

10.4 实时视频流像素处理 / 175

练习 / 185

第11 章 音频 / 186

11.1 加载音频 / 186

11.2 麦克风声音捕获 / 191

11.3 p5.js 创建声音 / 193

练习 / 196

第12 章 使用库创作 / 197

12.1 p5.scribble 库 / 198

12.2 p5.play 库 / 203

练习 / 207

附录 / 208

后记 / 209

参考文献 / 210

序
回想这几年数字媒体艺术专业的教学与研究工作，虽然其中很多经验和方法不是一本书所能叙述的，但是希望这本书可以成为高等学校数字媒体艺术设计类专业学生学习创意编程的入门书籍。第一次接触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 月于北京