CrowlKit - Gezichtsbesturing

Met Faceparts kan je je webapp interactief besturen met je gezicht. Dat is bijzonder eenvoudig.  

Bekijk de demo:  https://cdn.publihub.media/demos/app/face.html?
Bekijk de broncode:  https://cdn.publihub.media/viewsource/?url=https://cdn.publihub.media/demos/app/face.html?

De library toevoegen

Om dit te laten werken heb je 4 libraries nodig die in de head van je pagina aanwezig moeten zijn. 

Opgelet: voeg ze slechts één keer toe aan je pagina. Als je ze al ziet staan, den moet je ze niet nog eens toevoegen. 

Voeg de onderstaande cdn-links toe aan je pagina. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
<script src="https://cdn.publihub.media/lib/app.js?v3"></script>
<script src="https://cdn.publihub.media/lib/crowl.faceparts.js?v2"></script>  

Gezicht(sonderdelen) detecteren en visualiseren

Je kan je ogen, neus, mond en gezicht laten herkennen door CrowlKit en daarmee interactief je webpagina of app gaan bedienen. De onderdelen voeg je op de onderstaande manier toe: 

<app-facepart type="lefteye"></app-facepart>
<app-facepart type="righteye"></app-facepart>
<app-facepart type="mouth"></app-facepart>
<app-facepart type="face"></app-facepart>
<app-facepart type="nose"></app-facepart>
Je gezicht wordt gevisualiseerd.

Als je je webapp start, dan zal je browser vragen om toestemming te geven om je webcam te gebruiken. De bovenstaande code zal enkel functioneren als je je toelating geeft. 

Eens gestart, zie je de geselecteerde elementen meteen zichtbaar in de pagina. Elk onderdeel krijgt een andere kleur. Als je je mond opent, zal dit eveneens zichtbaar zijn. 

Het is natuurlijk mogelijk om één van de onderdelen te activeren. Het is dus niet nodig om alles te activeren. Geef je bijvoorbeeld enkel aan dat je de nose wil zien, dan worden de andere "onderdelen" niet geactiveerd. 

Op de afbeelding zie je dat in dit geval de "neus" niet actief is. 

Activeren maar niet visualiseren

Als je een element het attribuut hide geeft, zal het wel actief zijn, maar niet worden "getoond" op de pagina. Je kan dan wel interactief met je app "bedienen" met het geactiveerde gezichtsonderdeel, maar het onderdeel zal niet zichtbaar zijn. Uiteraard hoef je ze niet allemaal onzichtbaar te maken. Je beslist zelf welke onderdelen zichtbaar zijn en welke niet. 

<app-facepart type="lefteye" hide></app-facepart>
<app-facepart type="righteye" hide></app-facepart>
<app-facepart type="mouth" hide></app-facepart>
<app-facepart type="face" hide></app-facepart>
<app-facepart type="nose" hide></app-facepart>

Interactie

Je kan met een onderdeel op een bedieningselement " klikken". 

uitleg volgt. 

Afstand tot het scherm 

Bij elke beweging van het gezicht geeft het element de afstand in centimeter tot de camera door. Hiervoor moet een element van het type "face" aanwezig zijn in de pagina. 

We voegen eerst een element toe waarin we de afstand tot het scherm willen tonen:

<app-part id="feedback"></app-part>

Daarna voegen we de volgende code toe aan de app-ready-functie van de pagina:

faceapp.after("screendistance").do(function(data){
   id("feedback").innerHTML = data.detail.screendistance;
});
Natuurlijk kan je de waarde data.detail.screendistance ook doorgeven aan andere functionaliteit met behulp van CrowlKit-code. 

Centrum volgen

Elke keer je gezicht beweegt, geeft het zijn eigen centrumpositie door aan je app. In de app-ready-functie van je app kan he hiervoor de volgende CrowlKit-code toevoegen;

De x en y variabele kan je vervolgens doorgeven aan een andere element op de pagina. 

faceapp.after("faceCenterMoved").do(function(data) {
   let x = data.detail.x;
   let y = data.detail.y;
});

Je merkt dat de functie data bevat. Je kan de gegevens over de positie van het gezicht opvragen in de details van de data. Het middenpunt van het gezicht heeft een horizontale x en een verticale y op het scherm, rekend van de bovenkant van het scherm. De linkerbovenhoek van het scherm heeft x= 0 en y=0.

  • horizontale positie gezicht: data.detail.x
  • verticale positie gezicht: data.detail.y

Je gezicht laten volgen door een afbeelding

Onderschrift

Je kan nu een afbeelding toevoegen aan je pagina en die je gezicht laten volgen. Hiervoor volgen we een app-followimage-element toe aan de HTML van de pagina. Bij id vul je een unieke identificatie toe. In het onderstaande voorbeeld noemen we dit "face". Bij het src-attribuut geef je de url van de afbeelding op. 

<app-followimage id="face" src="https://cdn.publihub.media/demos/app/face.png"></app-followimage>

In het onderstaande voorbeeld verzendenwe de data die we ontvangen naar de foto om er de positie van in te stellen. Voeg aan de app-ready-functie van je pagina de volgende code toe:. 

faceapp.after("faceCenterMoved").do(function(data) {
   id("face").after("setposition").send({ detail: { x: data.detail.x, y:data.detail.y  } });
});

Rotatie van het gezicht volgen

Je kan de horizontale rotatie van het hoofd volgen en die gegevens gebruiken om er wat anders mee te doen, bijvoorbeeld een 3D-object laten roteren. 

Voeg aan de app-ready-functie van je pagina de volgende code toe:.  

faceapp.after("rotationChange").do(function(data) {
   let rotation = data.detail.yaw;
});
Volgende pagina