从零开始学习 Processing合辑 | Alan Hou的个人博客

时至今日Processing 在新媒体艺术行业依然具有重要的地位，但相较于TouchDesigner, VVVV 等而言，Processing 总是让艺术生们望而畏。一方面在于写代码这件事让很多人觉得不自在，另一方面相关中文资料也有欠缺。本合辑旨在尝试通过使用案例结合编程知识讲解的方式让大家入门并进阶 Prcoessing。本合辑中的主要内容取自Abe Pazos(Fun Programming)所录制视频以及Processing- A Programming Handbook for Visual Designers and Artists, 2 edition一书(该书在国内已发行了中文版，名为Processing语言权威指南（第2版）)。

近期已获Abe Pazos Solatie本人的授权，将会搬运他的视频至国内的平台上，在与艺术家的沟通中，他表示会下架掉 YouTube 上的视频，因为他不喜欢平台靠贴片广告挣钱，因此准备上传到目前均无视频贴片广告的B站以及新媒体视频垂直网站MANA上，敬请期待。
艺术家简介：Abe Pazos Solatie是一名艺术家及创意编程工程师，致力于创造微观和有机主题的静态、动态及交互影像。快乐编程(Fun Programming)系列源自其于2011年8月发起的一项日更挑战，之后累计完成Processing基础视频共153集。虽然视频并不算很新，但 Processing这些年的变化并不是太大，所以学习起来依然不过时(Processing 4目前仍处于Alpha版，官方未透露稳定版的发布时间)。
关于视频清晰度：早期录制部分视频时考虑播放器上会存在非平滑插值( non-smooth interpolation)，所以调低了分辨率来让其在手机上显示更为美观。

项目最新视频完成效果

视频目录

Processing快乐编程001 开山篇
Processing快乐编程002 安装Processing及点、线的绘制
本视频中我们将开始安装Processing并使用point() 和 line()进行点线的绘制。视频中会介绍到坐标系的使用，通过 X和 Y值进行定位。与数学中的坐标系略有不同，这里的 X 为从左边框起算的距离，而 Y为从上边框起算的距离。
Processing快乐编程003 使用random()函数实现动画
本视频中学习如何使用line( random(100),random(100), random(100),random(100) )来随机绘制线段进而产生动画效果，同时讲解了的 background()函数的使用，用于设置画布背景色。
Processing快乐编程004 颜色、灰度级和frameRate()函数
本视频讲解如何保存代码到电脑硬盘上。通过background()函数演示了颜色灰度以及 RGB 颜色模式的使用。同时使用到了frameRate()函数，放在 setup()函数中使用。
Processing快乐编程005 激光效果以及直线颜色的修改
本视频讲解如何为随机线段设置颜色，实现一种类似夜店的激光效果。还讲到了如何进行代码的自动格式化（快捷键 Cmd/Ctrl+T），这样去除多余的空格、让代码变得更加美观。视频中用到的主要函数有 line(), stroke(), random(）以及 setup()和 draw()。
Processing快乐编程006 白色线段动画
本视频为练习课，讲解如何绘制黑底白线的动画效果。视频中对于线段的绘制也进行了详解：line(x1,y1, x2,y2)。
Processing快乐编程007 水平线动画及变量的使用
本视频将第6课中的直线全部变成了水平线。实现这一功能我们初次引入了变量（variable）的概念。变量是用于存储值的一块内存空间，可在程序中多次反复使用。水平线的起点和终点距离画布顶部的距离相同。为确保这两个点与顶部的距离相同，我们可以使用同一个变量。这里使用浮点型(float)是因为random()默认返回该类型。
Processing快乐编程008 垂直线动画
本视频比较简单，通过对上一个视频的代码进行调整将水平线变为垂直线。
Processing快乐编程009 调整画布大小及彩色动画
我们在上一个视频所学程序的基础上做了进一步的修改，让原本黑白的竖线变成了彩色。视频使用了 random 函数的另一种用法，即传了两个参数，一个最小值、一个最大值。然后视频中讲解了如何使用size()函数来让画布变大，不使用该函数时默认为100×100的画布。
Processing快乐编程010 画圆、矩形以及颜色的填充
本视频中讲解如何使用 ellipse 函数“画鸡蛋”，通过将第3和第4个参数设成同样的值可画出正圆。然后我们可以通过 rect 函数来绘制矩形，使用rectMode函数可控制是从中心(CENTER)开始绘制还是从左上角(CORNER)开始绘制等等。我们已经学习过 background 函数用于设置背景色，stroke 函数用于设置边框，而 fill 函数用于填充前景色。Processing为方便我们拾取颜色提供了一个 Color Selector 工具，可以直接在相关函数中使用十六进制的颜色值。
Processing快乐编程011 非随机数圆形动画
本视频中我们首先复习了ellipse() 函数的用法，然后让圆从左到右进行移动。使用随机函数可实现动画。这里我们使用全局变量来存储圆心的 x 值(circle_x)，这样在 void()和 draw()函数中均可访问，通过修改 circle_x 的值即可实现动画。
Processing快乐编程012 使用if()语句实现循环动画
本视频中我们学习了条件语句if()，其后的代码块仅在满足条件时都会执行。示例中我们借助它来判断小球是否移到画布之外，在超出右边框之后将其移至左边框，从而实现循环动画。然后我们还实现了两个小球按不同速度移动的效果。
Processing快乐编程013 随机改变球的大小
本视频中我们首次使用了print()函数。使用 print 可以打印变量值，在程序下面显示信息。在调用程序时出现意料外的情况时可以添加 print()打印辅助信息。随后我们对上一个视频中的程序进行了微调，使球在移动的同时随机改变大小。
Processing快乐编程014 改变小球的移动方向
本视频中用到了strokeWeight()函数来修改线的宽度，不使用该函数时线会很细。同时还对动画进行了复习，然后修改程序让其不只能从左向右移动，还能向其它方向移动，实现方法时改变 X 和 Y 的值。
Processing快乐编程015 画布内反弹球效果
本例稍有些复杂。之前我们的动画是在小球触达到边框时回位到另一边，而本例则实现了触达边框后反弹的效果。这里主要使用到了变量来存储小球移动的位置，变量值在正值和负值中来回切换。正值为向右及向下移动，负值为向左和向上移动。同时在视频中使用到了width和height这两个变量来获取画布的宽高，这样就不需要在修改宽高时修改相应代码了。另外还讲到了println()函数，它与print()的区别在于打印时多一个换行。
Processing快乐编程016 制作彩虹动画
本视频为雨后即兴录制的彩虹动画，大多是已学习的知识点，用到 noFill(), strokeWeight()等函数
Processing快乐编程017 使用HSB颜色模式
上一节视频结束时我们彩虹有些偏灰，我们一直都使用RGB颜色模式随机生成颜色。本视频中引入了新的颜色定义方式：HSB 颜色模式。通过colorMode(HSB)进行定义后即可使用。
Processing快乐编程018 条形码效果
本视频中进一步讲解了随机数及其对应的概率。修改相应数字会增加或降低概率，视频中我们使用了 if-else 配合随机数改变颜色，制作了一种类似条形码的效果。
Processing快乐编程019 编写第一个函数
本视频中我们继续使用上一节中的条形码案例。不同的是我们创建了第一个自定义函数。函数在程序中经常使用到，它可以更好地组织代码也会增强代码的可读性。在反复执行同一任务时函数可以避免重复编写相同的代码。
Processing快乐编程020 最简单的画图程序
本视频开篇我们仅通过一行代码实现了一个画图程序，然后对该程序进行了一部分优化。监测仅在点击鼠标时（keyPressed）才进行画图，并通过点击键盘上的任意键进行图片的保存。
Processing快乐编程021 画图程序优化
本视频继续优化我们的画图程序。上一版中按下任意键即会进行保存，本视频中我们在按下 s 键时执行保存，按下 b 键时切换一个随机背景色，按下 c 键时切换前景色，并在画布上端显示当前所切换的颜色。为在切换背景色时依然知道画笔的颜色，我们使用了同样的代码。这时便出现了冗余代码的问题，而这正是函数的用武之地，使用函数得以让代码保持简洁。
Processing快乐编程022 一闪一闪亮晶晶
本视频创建了一个很有趣的淡出效果。一直以来，我们使用的动画效果都是在屏幕上进行移动，清除所绘制内容然后使用新的一帧进行画图。但这里我们不是使用 backgroud()清除整个屏幕，而画了一个矩形遮盖住所有的像素点，精髓之处是使用了低透明度。
Processing快乐编程023 使用循环
本视频介绍一种新的结构循环。代码结构与 if 语句相似，但if 后的语句要么执行一次，要么不执行。while 就不一样了，可以循环执行多次，只要条件为 true 就会一直执行下去。视频中通过循环绘制了多个圆形，只需修改其中的值就可以改变执行的次数。while 语句应当保证存在 false 的情况，否则不停运行会非常消耗电脑的性能。
Processing快乐编程024 有趣的圆环效果
本视频对上一节视频的代码进行了一些调整，生成了一些非常有趣的圆环效果。
Processing快乐编程025 文字输入淡出效果
本视频学习使用 text()函数在屏幕上书写文字。该函数第一个参数为所希望显示的文本，第二和第三个参数为 x 和 y 轴位置。可通过 textSize()函数控制文字的大写。在 text()函数执行前调用 fill()可对文本设置颜色。视频后半部分我们的程序可直接将输入的内容输出到屏幕上。每个字母输出的位置及大小都随机，并且很快淡出。
Processing快乐编程026 旋转对象制作图案
此前的视频中我们一直进行的是上下左右的移动，本视频讲解如何进行旋转。rotate()函数让我们可以创建水平和垂直之外的矩形。使用 while 循环可以画出多个矩形并产生很有意思的图案。这里仅延左上角进行旋转，未来我们还会延着图形的中心进行旋转。smooth()函数会使线条更为平滑，这在旋转矩形时效果非常明显。
Processing快乐编程027 旋转动画
上一个视频中使用旋转和 while 循环创建了一个图案。在其中多次进行了图形的创建、旋转。本视频中使用 rotate()函数生成了动画效果。在动画的每一帧中（每次调用 draw()时），我们对飞屏幕进行了些微的旋转，不停的重复过程中会看到一个围绕左上角旋转的圆圈。最后我们对圆圈的大小添加了随机值，产生了非常有意思的图案。
Processing快乐编程028 旋转和坐标轴平移
从第1个视频开始我们一直存在一个预设，X 坐标向右绘制，0,0为画布的左上角。本节我们会发现 X 轴并不一定是向右的，如果调用 rotate()函数 X 轴有可能指向任意一个方向，就像时钟上的分针那样。我们可以使用 rotate()将图像翻转过来。然后我们在本视频中学习到可以移动坐标轴，0,0点不一定是左上角。最后我们修改了前一个视频中的代码，在 draw()函数的一开始进行了修改，让图形沿着画布中心进行旋转绘制。
Processing快乐编程029 随鼠标移动的旋转矩形
本视频中我们绘制了一个以其自身中心进行旋转的矩形。我们还添加了淡入淡出的效果，让矩形的边角产生一种模糊尾晕的效果，只需修改一行代码就可以让其以鼠标位置为中心进行旋转。本视频中的关键函数有rectMode()、rotate()和translate()。
Processing快乐编程030 多对象旋转及坐标重置
上一个视频中我们学习了如何旋转矩形。本视频中我们对4个矩形进行旋转。让对象以自己的中心进行旋转，我们必须移动原点并旋转坐标轴。只有一个对象时很好实现，但旋转多个对象会有一些难度。因为每次在调用 translate()和 rotate()时，效果会叠加到前一次translate()和 rotate()的调用之上。为解决这一问题，我们引入了 resetMatrix()，它会将此前对原点和坐标轴的旋转去除掉。我们执行的主要是1. translate(), 2. rotate(), 3. 绘制内容, 4. resetMatrix() 取消第1和2步中的设置。然后反复对其它旋转对象执行1-4步。
Processing快乐编程031 带参函数及返回值
本视频是纯理论课，没有生动的图像，但学习函数知识对今后的开发是非常重要的。视频中我们创建了一个不接收任何参数的函数以及一个接收两个参数的函数，并对这两个参数求和。此外我们还创建了一个有返回值的函数。了解了这些知识后我们就可以对前一个视频中创建4个旋转矩形的程序进行简化了。
Processing快乐编程032 使用函数简化程序
本视频对第30节视频中创建的4个旋转矩形的程序进行了简化。我们编写了一个创建旋转矩形的函数，该函数接收3个参数来进行不同行为的设定。这时，就可以通过函数来在不同位置创建不同大小的矩形了。
Processing快乐编程033 使用倍数放大、缩小速度和尺寸
我们在程序中经常用到乘法，因此应适应对它的使用。在编程语言中，用于乘法的符号是星号：*。任何数乘以1得到的为原数：77 * 1 = 77。乘以大于1的数，得到的结果更大：77 * 1.2 = 92.4，乘上小于1的数，得到的结果变小：77 * 0.8 = 61.6。了解了这些简单规则后，我们我们创建一个简单的程序让物体按不同速度进行移动。之后我们升级了前面视频中讲解的5个矩形的程序，让每个矩形的移动速度都不同。
Processing快乐编程034 使用嵌套 while 循环创建对象网格
之前的视频我们学习了如何使用 while 循环创建多个对象。本视频我们在一个 while 循环中放入另一个 while 循环来创建对象网格。产生的结果是一组在画布上分布的矩形或圆形，类似国际象棋棋盘黑白交替的图案。在循环内使用另一个循环是编程中很常见的做法，在未来的视频中我们还会使用到。
Processing快乐编程035 矩形网格波浪形旋转
本视频中我们第二次用到对象网格。上一个视频中我们在 whiile 循环中使用了另一个 while 循环。这些循环用于递增在画布中矩形所使用的两个变量。本视频中我们再次使用了嵌套 while 循环，我们不再计算整个屏幕中的像素素，而是对所要绘制的矩形进行计数。然后再次使用到了前一个视频中创建的旋转矩形。
这里测试了以相同角度进行旋转以及按列和行采用不同角度旋转，最后根据行和列以及持续增加的变量来让每个矩形以不同的角度进行旋转。
Processing快乐编程036 使用noise()的仿生随机动画
在本系列视频中我们反复地用到了random()。但random()有一个问题，那就是它太过随机。现实世界中的事物不会从一地方突然跳到另一个地方，而是有节奏地缓慢移动。noise()函数让我们可以获取这种类型的随机数字。random()和noise()之间存在一些不同。random()返回最大和最小值之间的随机数字，而noise()返回0和1之间的数字。调用 random 时需要设置最小值和最大值。noise()只需要一个参数来获取变化不那么大的随机数。因此如果调用noise(3.00)，接着调用noise(3.01)，会返回随机数，但两者的数字不会差很多。对于位置、大小、旋转和颜色的随机都会很适用。通常我们会需要比默认0 … 1更大的值。通过对noise()所得到值进行乘法运算可以解决这一问题。例如，如果将noise()乘上100，就会获取到0 和 100之间的数字。
可以尝试对以前视频中的程序使用noise()函数！
Processing快乐编程037 使用noise()创建舞动的矩形
本视频中我们又一次使用了noise()函数进行试验。这里用到 noise()函数使得所绘制长方形移动、旋转及变化大小。此处noise()函数接收一个参数，如果多次使用相同参数调用noise()，会得到相同的随机数。示例中我们使用了不同参数5次调用了noise()函数，大家可以使用同样的参数看一下效果如何。例如，向右移动时矩形更大或进行了更多的逆时针旋转。也可以对背景色、填充色、边框等进行数字的修改实现动画。大家可以试试能不能让这个矩形只在左半屏中移动。
Processing快乐编程038 使用noise()制作海平面动画
把noise()函数想象成透过纸张的小孔向外观看。noise函数根据所发送的参数返回随机数。以纸中小孔这个例子而言，会返回透过小孔所看到的颜色，参数为透过小孔所看的方向。如果稍微向上或稍微向右，颜色都会发生改变。本视频中我们使用带两个参数的noise()函数。示例中第一个参数为当前水平位置，第二个参数为其倍数。在缓缓修改倍数时，随机数也会发生变化，生成一种类似海平面的动画。
Processing快乐编程039 ”糖果盒“讲解noise函数
在对noise()函数使用一个参数时，Processing会假定另两个参数为0。视频中把noise类别为一个从盒子里取出糖果的函数。要定位出糖果的位置，我们需要为noise()指定3个参数：x, y和z。我们在日常使用屏幕时已经习惯了x和y。z表示尝试，所以我们就不再局限于平面，而是可以设想到屏幕前或屏幕后的物体。
虚构出的糖果盒充满着不同颜色的糖果。在每次启动程序时，Processing会在其中装入糖果。但盒子内具有独特性：相邻的糖果颜色相近。在绿糖果旁不会出现蓝色的糖果。因此如果想要noise()通过获取颜色变化较小的糖果，就应选择相近的糖果。也即缓慢修改noise()的参数，步长小于0.03。更大的增量可能会得到截然不同的颜色。
Processing快乐编程040 ”糖果盒“讲解noise函数(多参数)
糖果盒示例的第二部分中，我们对noise()函数使用两个和三个参数。首先对一排圆形绘制动画颜色，每个圆通过noise()函数获取其颜色，用到了圆的x和y位置来选取颜色。最后我们对整个网格的颜色添加动画，在 noise()调用中使用倍数对变量 z 进行递增，这样在动画每帧中都设置不同的颜色。
Processing快乐编程041 生成正弦曲线的函数
视频中我们使用了一个新函数sin()。这是一个与数学和三角学有关的函数，返回值为-1到1之间。sin()仅接收一个参数。本视频中我们使用sin()来生成一些有趣的图像和动画。
Processing快乐编程042 在安卓手机上实现动画效果
本视频会用到安卓手机。其中并不涉及到新的编程技巧，只是演示了在安卓手机上运行程序的便捷性。Processing编程器已经内置了在手机上启动程序的工具。我们只需要下载所需的Android SDK软件，然后点击一下按钮即可安装程序。
Processing快乐编程043 用sin()制作动画
本视频中我们使用sin()函数来做圆的动画。本例中圆会来回反复左右平滑移动。sin()函数返回-1到1之间的数。noise()函数返回0到1之间的数。这些数字对于计量像素以及在屏幕上绘制都太小。因此需要对这些数字进行乘积。
因sin()函数返回正数及负数，转换供绘制使用会有点麻烦。因此我们学习了map()的使用，将一个区间内的数字转换为另一个区间的数字。例如，我们可以将sin()函数产生的-1至1的区间，转化为0 至 400这一区间，这样就更有利于在屏幕上进行绘制。
Processing快乐编程044 用sin()创建多层次波纹
如果将多个sin()函数，如sin()*sin()*sin()，所得到的结果仍是-1到1之间的数，但使用这一结果进行绘图或制作动画会得到更为更趣的形状。
Processing快乐编程045 将距离转化为颜色或宽度
map()函数对于将一个范围内的数转化为另一个范围的数非常有用。在什么时候使用呢？其实在很多地方都会存在不同的取值范围。比如sin()函数的返回值是-1到1之间。在我们画布上X轴的有效绘制范围是0到400。RGB颜色模式的值通常在0到255之间。有时我们会希望按距离推导出颜色或按速度推导出宽度。可以在程序中关联任意两种概念，使用map()正是将一个取值范围转换为另一个取值范围的最简单的方式。
Processing快乐编程046 使用多个sin()函数创建漂亮的曲线
现在我们使用sin()函数来控制多个属性，对屏幕上的圆圈设置了动画。其X 和 Y位置使用了 sin 函数进行计算。每个圆的尺寸、色调、亮度也采用了不同的 sin()公式进行计算。默认三角函数的值很简单，可以预测其结果，但通过对 sin()函数相乘得到了更加复杂的图形，而路线依然流畅。
视频持续更新中…