大家應該發現了

製作動畫時一定會用到一個函數

就是繪製函數(draw)

用汽車動畫程式來複習一下吧

還記得嗎
var x = 11代表汽車的起始位置

var draw函數包含所有繪圖程式碼

若將起始位置X的值
設為每次遞增3

汽車就能反覆來回
(汽車引擎擬聲)

各位學了如何編寫函數

但可能對繪製函數(draw function)
有些疑惑

是特別撰寫的嗎?
為何都以draw命名?

問得好

是這樣的，在可汗學院的平臺

有些特別的總體函數，
我姑且稱為神奇函數

不過這只是我自己取的名字

基本上各位在平臺上執行程式時

若有某些特定名稱的函數
像是繪製(draw)

那平台會在特定時間呼叫函數

例如在程式碼定義繪製函數時

平台會找到該函數
並讀取內部程式碼

程式就會以最快的速度
反覆呼叫那段程式碼

但繪製函數若未定義
程式就無法呼叫

因為找不到定義的內容

也就是說若將繪製函數
draw改成drow

程式就無法運行

換成drawCar也是動不了

程式會找不到更名後的函數

因為函數已經不叫繪製(draw)

程式自然不會執行對應的程式碼

當然什麼也不會發生

所以不要將自定函數命名為draw

除非要特別處理該項函數

讓程式反覆呼叫

繪製函數並非唯一的神奇函數

還有很多函數負責處理

滑鼠和鍵盤輸入

我們來看另一個動畫程式

假設我們想繪製彩色球體

滑鼠移動時就要畫

假設已有繪製(draw)、填色(fill)函數

然後在(mouseX, mouseY, 10, 10)
執行橢圓形(ellipse)函數

試一下，很好!

彩球反覆產生，很酷

繪製函數內的程式碼

會不斷被程式呼叫

就因為程式碼位於繪製函數內

即使滑鼠不動，程式也會執行

就像現在這樣，滑鼠根本沒動
程式還是不斷執行

不過事實上有更好的方法

做起來會更有效率

可將繪製(draw)函數
改成移動滑鼠函數(mouseMoved)

可汗學院平台會自動偵測程式

確認mouseMoved已經定義

若已定義
只要滑鼠移動就會呼叫函數

再看一次，繪圖功能正常

但不移動滑鼠，就不會呼叫函數

滑鼠靜止，函數就不會反應

之前函數命名為繪製(draw)時

即使滑鼠沒動作
也會反覆呼叫程式碼

但改名為移動滑鼠後

只有在需要時才會呼叫程式
也就是移動滑鼠時

程式效率因此提升

若希望程式
只在移動滑鼠時輸出結果

移動滑鼠(mouseMoved)函數

會比繪圖函數(draw)更好

還有很多神奇函數

如滑鼠按鍵是否按下(mouseIsPressed)
放開滑鼠(mouseReleased)按下按鍵(keyPressed)

我們的官方文件都有說明

重點是使用神奇函數時

拼字務必正確

若要定義自訂函數
則要避免使用神奇函數的名稱