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