paper.js exercise : Line Bisection Test 1

操作流程：

1. 施測者用滑鼠在螢幕上拖拉出一條直線
2. 按下空白鍵後有一圓點沿著該直線往返移動
3. 受測者按下空白鍵後圓點停止移動並依據其位置計算分數
4. 重複1~3

Demo & Code  (paper.js 的線上 sketch 功能真的是很方便~)

說明：

• 範例使用 PaperScript，可依據需求轉為 javascript．
• paper.js 內建 mouse event handlers，這裡用了 onMouseDown、onMouseDown、onMouseUp 來實作滑鼠拖拉放劃線的功能．
• 在動畫方面由鍵盤事件觸發，所以在這沒有使用 onFrame event handler，而是用 view 的 attach 與 detach method 來掛上和移除指定的 handler．
• paper.js 動畫每秒執行 60 次 handler (60 fps)，此應用畫面不需要頻繁的更新畫面，可以透過 event.count 來判斷是否要繼續執行．在這用 mod 3 降低更新頻率成每秒 20次，我想多少可以省點資源．