《getting started with p5.js》（中文版） 第一章 您好：了解p5.js

版权声明：本文为博主原创文章，未经博主允许不得转载。

第一章 您好：了解p5.js
第二章 开始写代码：创建你的第一个p5.js程序
第三章 画：定义和画简单的形状
第四章 变量： 存储、修改和再利用数据
第五章 响应： 利用鼠标、键盘和触摸板控制和影响程序
第六章 平移、旋转、缩放：坐标的变换
第七章 多媒体： 加载和显示多媒体，包括图片和字体
第八章 运动： 移动图形并为其设计“舞步”
第九章 函数： 建立新的代码模块
第十章 对象： 创建含有变量和函数的代码模块
第十一章 数组： 让处理一列变量变得简单
第十二章 数据： 载入并可视化数据
第十三章 延伸： 了解声音的DOM

1、您好

p5.js 是一款用来制作图片、动画和交互的软件。它的设计理念是：写一行代码，然后屏幕上就出现了一个圆。再增加一些代码，圆就会跟着鼠标走。再增加一些代码，当鼠标点击这个圆时，圆就会变色。我们将其称之为用代码素描。你一行一行地写，程序就一点一点的实现了。

编程课程通常将注意力优先放在结构与理论上。而任何的可视化的教学——比如一个交互界面、一个动画，通常是在学习了几周的算法和方法课程之后。就好像你必须吃完你的正餐才能够享受饭后甜点一样。这些年，我们看到太多的朋友们试着想要学习编程却在第一次课后或者在第一次交作业前的夜晚夜不能寐之后就放弃了。使他们失去了对计算机编程初始的好奇心的原因正是他们看不到他们所学的东西与他们所想创造的东西之间的纽带。

p5.js提供了一种创建交互图形来学习编程的方法。虽然有很多可能的方式来教授编程，然而学生经常从立刻的视觉反馈中找到勇气和动力。p5.js正是致力于提供这些反馈，
而它在图形、素描和社区方面的鲜明特点将在下文中讨论。

素写和原型

速写是一种思考的方式，它是一个轻松而快速的过程。它的基本目的就是在短时间内产生大量的想法。在我们的日常工作中，我们经常先将想法画在纸上然后将其转化为代码。动画和交互的想法通常画在充满标记的故事板上。等我们将其用一些软件画好之后，我们选取其中最好的想法并整合成原型（如图1-1）。这是一个制作、测试然后提升的在纸和屏幕上来来回回的循环的过程。

图1-1

可塑性

p5.js包含了许多可以一起组合使用的工具包，这些工具包就好像放在一个软件的工具腰包里一样。所以，p5.js可以被快速使用，也可以做深层次的研究。因为使用p5.js编写的程序可以只有几行也可以有成千上万行，这给成长和改变带来了空间。p5.js的拓展库甚至已经延伸到声音和利用html增加按钮、滑块、输入框、摄像头捕捉等领域

先贤们

人们利用计算机制作图片最早可以追溯到上世纪60年代，我们可以从这段历史中学到很多。比如，在电脑可以使用CRT 或者 LCD屏幕显示之前，人们使用巨大的打点机器（如图1-2）来画图。在我们的生命长河中，我们一直站在巨人的肩膀上，而对于p5.js来说，这些巨人包括哪些设计学、计算机图形学、艺术学、建筑学、统计学和空间设计学领域中的思想家们。想要了解他们，你可以看看Lvan Sutherland 的 《Sketchpad》（1963）、Alan Key的《Dynabook》（1968）以及Ruth Leavitt的《Artist and Computer》（Harmony Books，1976）。国际图形形象协会（ACM SIGGRAPH）和 电子艺术档案（Ars Electronica archives）提供了图形与软件历史的令人着迷的一瞥。

图1-2

p5.js的家谱

和人类语言一样，程序语言也有属于自己的家谱。p5.js是编程语言JavaScript的一个分支。p5.js的语法与JavaScript几乎一样，但是p5.js增加了关于图形和交互相关的特征（如图1-3）并且提供了更简单的方式使用已经被浏览器支持的原生HTML5的特性。由于这些分享的特征，学习p5.js成为了学习其他语言和使用不同软件工具的一个初级阶段。

图1-3

加入我们

每天有数以千计的人们使用p5.js。和他们一样，你可以免费下载它。你甚至拥有权力修改它的代码来满足你的需求。p5.js 是一个FLOSS项目（FLOSS, 即free/libre/open source software）,在社区精神的指引下，我们鼓励你在线上分享你的项目和知识（如图1-4）。

图1-4
(译者：Jason Lee，邮箱：[e-mail])

---