1.2　画布与帧

我们的第一个程序由两个方法（method）组成：setup()方法和draw()方法。有时人们通俗地把方法称为函数或命令。我们想让程序做事，就需要调用Processing自定义的方法（名字会自动变成蓝色粗体）或自己定义的方法（将在第4章介绍）。

现在我们在line(400, 300, mouseX, mouseY);上面增添一行代码：

再次按下播放键，鼠标在展示窗口内移动时的效果和之前不同了，只有一根线跟随鼠标移动。这是怎么回事呢？实际上，程序中的draw()方法每秒会被调用60次左右，因此我们的程序会随着鼠标不断地画直线。而新增的background(255)方法先把整个画布（展示窗口）刷成了白色，然后画一根直线，因此直线不会随时间叠加在画布上，如图1-2所示。

1.1节的程序（线在画布上叠加）与本节的画线程序（线不叠加）代表了画画模式和动画模式两种动态模式，除此之外，静态模式（不含draw()方法）也很常用。开始写任何一个程序之前，首先要挑选一种模式。

Processing程序以setup()方法启动，然后不断运行draw()方法。所以我们把只需要在开头运行一次的代码放到setup()程序块里，把需要反复运行的代码放到draw()程序块里。在每个程序块内部，代码会逐行依次运行。

以前美国有个做铁路生意发家的富豪，他和人打赌说马奔跑的某个瞬间四只蹄子都不着地。马跑得太快，人眼无法分辨，于是他花钱聘了一位摄影师（Eadweard Muybridge）来拍摄马飞奔过程中的所有瞬间。这个摄影师花了好几年才成功，他的胶片放映机每秒会依次投射24张左右的胶片而人眼感受到的是马飞奔的连贯动作。【特别浪费啊！】每张胶片称为一帧（frame），其中的某一帧显示：马的四只蹄子确实都离开了地面。

Processing也使用了帧的概念，draw()（包括其后一对{}里面的所有代码）会被程序连续调用，形成动画效果。通常，我们在draw()方法的第一行把屏幕刷白：

这样就形成了一张不断更新的白色画布（帧）。也许你更爱黑色背景，那就用background(0)；这一代码。Processing采用0～255的整数来表示灰度，0代表黑色，255代表白色，中间的数字代表各种灰色。

那如何设置彩色背景呢？也很简单，譬如background(255, 170, 0)、就是一个橙色背景，括号里的三个数字分别表示红色、绿色、蓝色的成分，我们会在1.3节详细介绍颜色。

重要的事情再重复一遍！开始写任何一个程序之前，【这里是第二遍！】首先要挑选一种模式。

（1）静态模式。静态模式只有setup()方法，没有draw()方法，譬如：

（2）画画模式。在画画模式下，每帧画的内容在一张画布上不断叠加（见1.1节程序）。

（3）动画模式。在动画模式下，每帧均在一张空白画布上进行绘图，即在draw()方法第一行用background()指定背景颜色。

静态模式、画画模式和动画模式使Processing视觉艺术变得丰富多彩。静态模式可以输出大幅精美图像；画画模式像画笔一样，不断在画布上留下笔触；动画模式能产生无穷无尽的不重复的视频。

有时一个程序可以写成两种模式，如画画模式：

以及动画模式：

上面两组代码唯一的区别就是background(255, 160, 160)方法是在setup()程序块中还是在draw()程序块中。代码中运用了模运算（%符号），当%符号前面的数字增加，直到等于width时，模运算的结果变为0。所以当椭圆移动到窗口最右侧时，会跳回到窗口的最左侧，如图1-3所示。

我们可以用frameRate()方法来控制帧的更新速度，如在上面这个程序中，在setup()方法的内部加入“frameRate(5);”，小球的移动速度就会非常慢。Processing的默认速度是frameRate(60)，比电影的每移24帧快很多。还有一种特殊情况，当每帧需要绘制的内容（或所需的运算）特别多时，帧的实际更新速度会比设定的要慢。