3.3 跟随鼠标移动
思考下：如果在绘制图形的函数中，我们并不输入具体数值，而是输入“鼠标的横坐标”（the mouse抯 x location）或者“鼠标的纵坐标”（the mouse抯 y location），会发生什么？
实际上，在代码中，你不能直接使用上述过于具体的描述性语言，你必须使用关键词mouseX和mouseY来描述鼠标的横坐标和纵坐标。
示例3-2：mouseX和mouseY
练习3-3：当你把background()函数移动到setup()中去以后，解释下为什么你会看到一长串的矩形。
一行隐形代码
如果你紧紧遵循setup()和draw()的运行逻辑去思考，可能会发现一个非常有趣的问题：Processing到底是什么时候在窗口上显示由代码绘制的图形？新的像素是什么时候出现的？
乍看之下，你可能会认为只要是绘图功能的函数，Processing会在每一行代码运行完毕后即刻更新图形。可如果是这样的话，每次运行完一个绘图的函数，你就会在屏幕上看到一次图形更新。Processing更新如此之快，以至于每个图形每次更新的时候你根本不可能看得到。每次调用background()函数，窗口就会被擦除清空一次，这样就会产生一个有些让人苦恼的结果：闪烁。
Processing解决这个问题的办法是：在整个draw()中所有函数计算完毕后才刷新，而不是运算一个函数就刷新一次。这样的话，就好像在draw()函数的末尾有一行隐形的代码来控制窗口的图形渲染。
这就是所谓的双缓冲机制（double-buffering）。而在一个低端的环境中，你会发现必须亲自去执行它。我想花点时间再次感谢Processing，它让编程界面更加友好和简单，因为它已经为我们做好了这一切。
还有一点需要注意的是，使用stroke()函数和fill()函数设置的任何颜色，都会在draw()中的下一个循环中继续存在。
我可以进一步应用这个想法创建一个示例，这是一个更加复杂的由mouseX和mouseY位置所控制的示例（由多个形状和色彩构成）。例如，接下来我会改写Zoog，让其跟随鼠标的运动轨迹。在这个示例中，Zoog身体的中心点就是鼠标的位置坐标（mouseX，mouseY），而Zoog身体的其余部分位置则是和鼠标位置保持一个相对不变的距离。譬如Zoog的头部，其位置坐标为（mouseX，mouseY-30）。下面的这个案例只是移动了Zoog的身体和头部，如图3-5所示。
示例3-3：将Zoog变为一个跟随鼠标运动的动态草图
练习3-4：完成Zoog的代码，使得其身体的其余部分可以跟随鼠标移动。
练习3-5：将你设计的程序重新编写，使得图形可以根据鼠标位置做出反应（通过改变颜色和位置）。
除了使用mouseX和mouseY，你还可以使用pmouseX和pmouseY。这两个关键词代表当前鼠标坐标的上一个坐标位置。这就能实现一些更加有趣的交互方式。例如，如果你绘制一条直线，它开始于之前的鼠标位置，结束于当前的鼠标位置，猜想下会发生什么，如图3-6所示。
图 3-6
练习3-6：完成图3-6中横线的空白。
在draw()内的每一次循环中，通过把之前的鼠标坐标和当前的鼠标坐标使用直线进行连接，我就可以绘制出一个跟随鼠标的连续线条，如图3-7所示。
示例3-4：绘制连续的线条
练习3-7：改写示例3-4，使得移动鼠标的速度越快，绘制的线条越宽。提示：在Processing参考文档（https:// processing.org/reference/strokeWeight_.html）中查看strokeWeight()函数的具体说明。
计算鼠标水平运动速度的公式为：mouseX和pmouseX差值的绝对值。绝对值指的是忽略掉正负符号的数值，举例：
-2的绝对值是2。
2的绝对值是2。
在Processing中，通过abs()函数可以获得一个数的绝对值，也就是abs(-5)等于5。因此鼠标运动的速度为：
填写下面的空白，然后在Processing中进行验证！
