2.7　转动的眼珠

首先绘制如图2-22所示的两个圆圈，并让较小的黑色圆圈跟随鼠标位置移动：

sketch_2_7_1.pyde

 1    def setup():
 2        size(600, 600)
 3    
 4    def draw():
 5        background(255)
 6        fill(235)
 7        circle(300,300,200)
 8        fill(0)
 9        circle(mouseX,mouseY,100)

图2-22

为了让黑色圆圈的移动范围不超出灰色圆圈的范围，可以使用Processing提供的map()函数：

sketch_2_7_2.pyde

 1    def setup():
 2        size(600, 600) 
 3    
 4    def draw():
 5        background(255)
 6        fill(235)
 7        circle(300,300,200)
 8        fill(0)
 9        x = map(mouseX,0,width,260,340)
10        y = map(mouseY,0,height,260,340)
11        circle(x,y,100)

鼠标水平方向坐标mouseX的取值范围为[0,width]；为了防止黑色小圆圈超出范围，设定其圆心的x坐标范围为[260,340]。map(mouseX,0,width, 260,340)函数即把范围[0,width]内的mouseX等比例的映射到范围[260,340]内，如图2-23所示。

对于纵坐标，map(mouseY,0,height,260,340)函数即把范围[0,height]内的mouseY等比例的映射到范围[260,340]内。

图2-23

提示

当读者不熟悉Processing的某些函数时，可以点击“Help”—“References”获取帮助，如图2-24所示。

图2-24

Processing会在浏览器中打开帮助网页，如图2-25所示。

图2-25

读者可以找到“map()”，点击查看详细的帮助文档，如图2-26所示。

也可以点击网页左侧的“Tutorials”或“Examples”，查看更多的帮助、示例代码信息。

图2-26

在sketch_2_7_2.pyde基础上添加一个圆圈，可以实现眼珠随鼠标转动的效果（如图2-27所示）：

sketch_2_7_3.pyde

 1    def setup():
 2        size(600, 600)
 3        
 4    def draw():
 5        background(255)
 6        fill(180)
 7        circle(300,300,300)
 8        fill(235)
 9        x1 = map(mouseX,0,width,260,340)
10        y1 = map(mouseY,0,height,260,340)
11        circle(x1,y1,200)
12        fill(0)
13        x2 = map(mouseX,0,width,220,380)
14        y2 = map(mouseY,0,height,220,380)
15        circle(x2,y2,100)

图2-27