DIY Stroke Recognizer

大綱• 手勢辨識概要– 什麼是手勢辨識？– 手勢辨識的例子– 做手勢辨識很難嗎？– 手勢辨識的方法有哪些？

• $1 Unistroke Recognizer in JavaScript• 其他的實作方法• $N Multistroke Recognizer in JavaScript• DIY 自己的手勢辨識

簡介手勢辨識• 什麼是手勢 ?– 一種利用肢體語言 (body language) 的非語言

(non-verbal) 的溝通方式 – 在電腦上，通常指的是滑鼠手勢

(mouse gesture)• 什麼是手勢辨識– 透過特定的程序 (Program) 或演算法 (Algorithm)– 辨認使用者給定的手勢

手勢辨識的例子

關鍵報告中的手勢操作

Magic Trackpad 的手勢操作

做手勢辨識很難嗎？• 可能需要用到的背景知識– Hidden Markov Models– Neural Networks– Dynamic Programming…

• 由誰來做比較適合？– 菜鳥程式設計師 (Programmer)– 人因專家 (Human factor specialists)– 介面設計人員 (Interface Developer)

• 辨識力？互動性？

手勢辨識的方法有哪些• 使用開發好的程式庫– Artkit and Amulet

• 使用作業系統內建的功能– Siger recognizer on Microsoft’s Tablet PC

• 自己開發 ( 必須具備足夠的背景知識 )…– Statistical classifier– Feature extraction– Template matching

$1 Unistroke Recognizer in JavaScript

• 必須是：– 可以對於不同移動速率的取樣有適應性– 可支援不同角度、位置、旋轉– 不需要高深的數學技巧– 可以用幾行程式就完成– 可以達到即時互動效果– 可以只使用一個新例子就加入新的手勢– 可以有一與取樣點數無關的 N-best list 以代表相關度– 辨識率必須與目前 HCI 現有更複雜的方法相當

$1 Unistroke Recognizer in JavaScript

• 簡單的四步驟演算法– 重新取樣– 角度修正– 大小及位置修正– 找出最佳的 Unistroke

$1 Unistroke Recognizer重新取樣

$1 Unistroke Recognizer角度修正• 找出 Stroke 的中心• 找出起始點• 找出 Indicative Angle ( 中心與起始點連線的夾角 )• 將圖形旋轉使 IndicativeAngle 為零

$1 Unistroke Recognizer大小及位置修正• 將圖形調整至預設的方塊大小– SCALE-TO-SQUARE

• 將圖形位移至原點 (0, 0)– SCALE-TO-ORIGIN

• Size 為 Step 3 大小修正的方塊邊長， di* 為最小的差異值

• Score 為此 C 與 T 的分數 ( 越高越好 )

$1 Unistroke Recognizer找出最佳的 Unistroke

• C 是要被比較的圖的取樣點集合， Ti 為第 i個內存範本的取樣點集合， N 為取樣點數• d 為比較後差異值

其他的實作方法• http://depts.washington.edu/aimgroup/proj/d

ollar/

$N Multistroke Recognizer in JavaScript

• $1 只能接受 1 筆劃• $N 目標解決多筆劃問題