PafcalJS

• Detecție în timp real
• Suport pentru gestul de click
• Opțiune de personalizare
• Exclusiv JavaScript ES5

PafcalJS

Premise:

• Cameră Web
• Haine contrastante
• Mâneci lungi
• Fundal contrastant
• Persoane caucaziene

Procesul de detecție

7 etape ce transformă și filtrează imaginea camerei Web:

Procesul de detecție

Eliminarea fundalului

1. Atenționăm utilizatorul să părăsească temporar spațiul camerei Web.
2. Preluăm imagini sub formă de liste de valori în spațiul RGB.
3. Creem o imagine de referință a fundalului.
4. Determinăm dacă fundalul este prea dinamic.

Procesul de detecție

Eliminarea fundalului

Procesul de detecție

Detecția pielii

Filtrăm pixelii pielii folosind două praguri de culoare diferite, pentru spațiul RGB și cel HSV.

Complexitate liniară ce nu impactează procesarea în timp real.

R

G      >    15

B

Procesul de detecție

Detecția pielii

Procesul de detecție

Detecția feței

Dar, procesul anterior detectează atât pielea mâiniii cât și pe cea a feței.

 

Biblioteca JSFeat

• oferă detecția feței utilizatorului
• este  oferită sub licență MIT

Procesul de detecție

Detecția feței

Procesul de detecție

Dilatarea imaginii

Scop: umplerea eventualelor goluri din interiorul mâinii

 

Aplicăm operația morfologică de dilatare :

• introduce noi pixeli în jurul pixelilor existenți
• fiecare pixel e modificat independent de ceilalți -> O(n)

 

 

Procesul de detecție

Operații morfologice

Procesul de detecție

Eliminarea componentelor mici

Scop: filtrarea exclusivă a pixelilor mâinii eliminând zgomotul

 

Euristică proprie:

• eliminăm toate componentele mai mici decât un prag
• dimensiunea pragului influențează rezultatul
• funcționează bine dacă pixelii mâinii sunt conectați între ei

Procesul de detecție

Eliminarea componentelor mici

Procesul de detecție

Înfășurătoarea convexă

Aflăm regiunea mâinii calculând înfășurătoarea convexă a acesteia.

 

Presupunere:

• toți pixelii prezenți în imagine aparțin mâinii

Procesul de detecție

Înfășurătoarea convexă

Procesul de detecție

Diferențierea gesturilor

Am creat o metodă bazată pe proporțiile mâinii:

• calculăm centrul înfășurătorii convexe
• determinăm cele mai îndepărtate/apropiate puncte
• raportul acestor distanțe ne indică gestul mâinii

Procesul de detecție

Diferențierea gesturilor

Comparație între cele două gesturi:

Optimizări

Timpul de procesare este esențial pentru utilizarea în timp real.

 

Metode de optimizare:

 

1 - Stocare economă sub formă de matrice rară

2 - Algoritm propriu pentru înfășurătoarea convexă

3 - Adaptarea ariei de căutare

Optimizări

Stocare economică

Pentru stocarea imaginilor binare am ales formatul CRS căci permite:

• calcularea rapidă a coordonatelor unui punct știind indexul coloană
• calcularea rapidă a indexului coloană știind coordonatele sale

Optimizări

Algoritm propriu pentru înfășurătoarea convexă

• Algoritmii clasici oferă o complexitate medie de O(n * log n)
• Bazându-ne pe modalitatea de stocare a pixelilor imaginii, am implementat un algoritm propriu cu o complexitate liniară.

Optimizări

Adaptarea zonei de căutare

În practică am observat că mâna utilizatorului se mișcă fluid și lent.

 

Obținem un timp mult mai bun restricționăm zona de căutare în funcție de locația mâinii din cadrul precedent.

Optimizări

Adaptarea zonei de căutare

Tehnologii utilizate

• Javascript ES5
• Librăria JSFeat
• HTML 5
• Web Workers

Tehnologii utilizate

Web Workers

Javascript este un limbaj single-threaded și asincron, deci procesările necesare detecției mâinii ar bloca interfața utilizatorului.

 

Web Worker, o modalitate de a rula cod Javascript independent de firul principal de execuție. Trimiterea imaginii și comunicarea rezultatelor se face printr-un sistem asincron de mesaje.

Tehnologii utilizate

Web Workers