paper.js exercise : Line Bisection Test 2

操作流程：

1. 畫面隨機顯示長度不等直線
2. 受測者用滑鼠點選線段中點

Demo & Code

說明：

• 一開始的想法是先產生一條直線 path，之後再用 symbol 來表示其他直線以增加效能．流程是先建立一條水平 path，用此 path 建立 symbol，place 到畫面中隨機 point，對此 symbol 水平 scale 隨機值、rotate 隨機值． 
• 隨機出來的線段有可能不是我們要的位置，要依檢查花費的成本來依序檢查．
• case 1 線段其端點有超出可視範圍：用其 bounds.x 來檢查．c
• case 2 線段相交：paper.js 的 path 有提供 getIntersection 來取得兩 path 的交叉點．這時才發現 symbol 其 definition 是指到原本的 path，所以用 getIntersection 沒用，只好改成每一條線都是 path．
• case 3 線段距離太近，例如兩條線幾乎平行，兩者間最短距離只有 1px，或是端點太近使得看起來像是連成一條線：這部分運算比較多，我是先檢查新產生線段的兩個端點與其他線段兩個端點看其距離是否少于某一數值，若有的話表示可能會有太近的情況，此時得進一步檢查線段兩端點與另一條線的最短距離是否太小．
• 求點與線段最短距離的部分我是參考 Shortest distance between a point and a line segment 這篇．
• closestDist function 可放到 checkDistance function 中以減少部份重複的運算和省下 getDistance．

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次，我想多少可以省點資源．

paper.js exercises

最近在寫視覺刺激和相關測試的軟體，對於之前只用過 tk canvas 畫折線圖的我來說真的是另一個不同(熟)的領域，還好現在有一大票 Javascript 2D Canvas Libraries 可用，搭配 node-webkit 即可快速做出一個應用．因為對這方面不熟，一開始不知道要挑哪套比較好，最後以看封面買唱片的習慣挑了 paper.js ，它提供的文件和範例還蠻清楚的，寫起來的話反而是數學部分比較花時間 (很久沒碰加減乘除以外的數學了...)． 另外 Raphaël 看起來也不錯，這裡有篇 Paper.js、Processing.js、Raphaël 的比較，往後有時間再來試看看．

接著這一系列的練習會以我目前開發軟體中 paper.js 的部分為範例，只是我繪圖和動畫這部分真的是很弱，寫出來的程式只要求能達到目標且效能不要太差，若覺得有更好的寫法或問題都歡迎提出．