Christoph Reuter: Hand-Tracking mit ML5

Über ML5 kann P5 auf Machine-Learning-Modelle zugeifen, die im Bereich der Mustererkennung Dinge ermöglichen, die vor einigen Jahren für einfache Scriptsprachen wie Javascript oder P5 noch undenkbar waren. Einer dieser Hauptbereiche ist die Erkennung von menschlichen Posen und Bewegungen, so dass nun via Javascript/P5 Bewegungen und Posen erfasst und in Zahlen umgesetzt werden können, die dann mit anderen Zahlenwerten (z.B. aus physiologischen Messungen, Timbre Feature Analysen, EEG, Eye-Tracking etc.) in Verbindung gebracht werden können.

Um auf diese Möglichkeiten zugreifen zu können, muss im Header der HTML-Seite neben der P5-Library auch die ML5-Library eingebunden werden. Für das Tracking von beiden Händen benötigt man die neueste ML5 Library unter

Im Script wird nach der Deklarierung der für die Verbindung mit der Handerkennung via handPose und für die Bilddarstellung notwendigen Variablen ...

var handpose; // Array für das von handPose zurückgelieferte Ergebnis
var video; // Variable für das zu analysierende Video
var hands = []; // Array für die erfassten Handkonturen

... mit Hilfe der preload()-Funktion das Modell für die Erkennung mehrerer Hände geladen:

function preload() {
handpose = ml5.handpose(); // Einladen des Handpose-Modells für mehrere Hände.
}

Dann wird die setup-Funktion gestartet, in der sowohl der Canvas zur Darstellung von Video und Handerkennung erstellt wird als auch die Verbindung mit dem Modell für die Handerkennung gestartet wird Der Canvas sollte dabei mindestens so groß wie die Maße des Videos sein:

function setup() {
var container = createCanvas(640,480); // Canvas erstellen, in HD: 1280, 720
container.parent('p5container'); // an DIV-Container anhängen
video = createCapture(VIDEO); // Videoeingang für Webcam erstellen
video.size(640, 480); // Videogröße einstellen
video.hide(); // verstecke das Video (es würde sonst neben dem Canvas zusätzlich zum
// verarbeiteten Video erscheinen)
handpose.detectStart(video, gotHands);// Verbindung zu handPose
// herstellen, um Hände zu erkennen und das Ergebnis in der Variablen hands zu speichern.
}

Sobald die Verbindung zu handPose hergestellt ist, kann das Ergebnis der Erkennung der Hände pro Frame in das Array hands geschrieben werden.

function gotHands(results) {
hands = results; // Ergebnis der Handerkennung pro Frame in das Array hands schreiben.
}

In der draw-Funktion werden dann die einzelnen markanten Punkte der Hand ausgegeben, die dann beliebig weiter verarbeitet werden können, z.B.:

function draw() {
background(255,255,255, 125); // Hintergrund halb durchsichtig gestalten, damit mit der
// Maus zwischen Gesichtskontur und Video hin- und hergeblendet werden kann
cursor(HAND); // Mauszeiger in eine Hand umwandeln
image(video, 0, 0, 640, 480);// zeige das Video in seiner Höhe und
// Weite an

if (hands[0]){ // wenn eine Hand erkannt wird
l_handedness = hands[0].handedness; // ermittle ob linke oder rechte Hand
l_handgelenk = hands[0].wrist; // hole die Koordinaten des Handgelenks
l_daumen1 = hands[0].thumb_cmc; // hole die Koordinaten des Daumens 1
l_daumen2 = hands[0].thumb_mcp; // hole die Koordinaten des Daumens 2
l_daumen3 = hands[0].thumb_ip; // hole die Koordinaten des Daumens 3
l_daumen4 = hands[0].thumb_tip; // hole die Koordinaten des Daumens 4
l_zeigefinger1 = hands[0].index_finger_mcp; // hole die Koordinaten des
// Zeigefingers 1
l_zeigefinger2 = hands[0].index_finger_pip; // hole die Koordinaten des
// Zeigefingers 2
l_zeigefinger3 = hands[0].index_finger_dip; // hole die Koordinaten des
// Zeigefingers 3
l_zeigefinger4 = hands[0].index_finger_tip; // hole die Koordinaten des
// Zeigefingers 4
l_mittelfinger1 = hands[0].middle_finger_mcp; // hole die Koordinaten des
// Mittelfingers 1
l_mittelfinger2 = hands[0].middle_finger_pip; // hole die Koordinaten des
// Mittelfingers 2
l_mittelfinger3 = hands[0].middle_finger_dip; // hole die Koordinaten des
// Mittelfingers 3
l_mittelfinger4 = hands[0].middle_finger_tip; // hole die Koordinaten des
// Mittelfingers 4
l_ringfinger1 = hands[0].ring_finger_mcp; // hole die Koordinaten des
// Ringfingers 1
l_ringfinger2 = hands[0].ring_finger_pip; // hole die Koordinaten des
// Ringfingers 2
l_ringfinger3 = hands[0].ring_finger_dip; // hole die Koordinaten des
// Ringfingers 3
l_ringfinger4 = hands[0].ring_finger_tip; // hole die Koordinaten des
// Ringfingers 4
l_kleinerfinger1 = hands[0].pinky_finger_mcp; // hole die Koordinaten des kleinen
// Fingers 1
l_kleinerfinger2 = hands[0].pinky_finger_pip; // hole die Koordinaten des kleinen
// Fingers 2
l_kleinerfinger3 = hands[0].pinky_finger_dip; // hole die Koordinaten des kleinen
// Fingers 3
l_kleinerfinger4 = hands[0].pinky_finger_tip; // hole die Koordinaten des kleinen
// Fingers 4

// dann füge an den Fingerspitzen ausgefüllte Kreise hinzu
noStroke();fill(150, 50, 50); ellipse(l_daumen4.x, l_daumen4.y,15,15);
noStroke();fill(150, 150, 50); ellipse(l_zeigefinger4.x, l_zeigefinger4.y,15,15);
noStroke();fill(50, 150, 50); ellipse(l_mittelfinger4.x, l_mittelfinger4.y,15,15);
noStroke();fill(50, 150, 150); ellipse(l_ringfinger4.x, l_ringfinger4.y,15,15);
noStroke();fill(50, 50, 150); ellipse(l_kleinerfinger4.x, l_kleinerfinger4.y,15,15);
noStroke();fill(150, 150, 150); ellipse(l_handgelenk.x, l_handgelenk.y,15,15);

// dann verbinde die erkannten Punkte miteinander und zeige es als Skelett auf dem Bildschirm
noFill();
strokeWeight(2);
stroke(150, 50, 50);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_daumen1.x, l_daumen1.y);
vertex(l_daumen2.x, l_daumen2.y);
vertex(l_daumen3.x, l_daumen3.y);
vertex(l_daumen4.x, l_daumen4.y);
endShape();

stroke(150, 150, 50);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_zeigefinger1.x, l_zeigefinger1.y);
vertex(l_zeigefinger2.x, l_zeigefinger2.y);
vertex(l_zeigefinger3.x, l_zeigefinger3.y);
vertex(l_zeigefinger4.x, l_zeigefinger4.y);
endShape();

stroke(50, 150, 50);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_mittelfinger1.x, l_mittelfinger1.y);
vertex(l_mittelfinger2.x, l_mittelfinger2.y);
vertex(l_mittelfinger3.x, l_mittelfinger3.y);
vertex(l_mittelfinger4.x, l_mittelfinger4.y);
endShape();

stroke(50, 150, 150);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_ringfinger1.x, l_ringfinger1.y);
vertex(l_ringfinger2.x, l_ringfinger2.y);
vertex(l_ringfinger3.x, l_ringfinger3.y);
vertex(l_ringfinger4.x, l_ringfinger4.y);
endShape();

stroke(50, 50, 150);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_kleinerfinger1.x, l_kleinerfinger1.y);
vertex(l_kleinerfinger2.x, l_kleinerfinger2.y);
vertex(l_kleinerfinger3.x, l_kleinerfinger3.y);
vertex(l_kleinerfinger4.x, l_kleinerfinger4.y);
endShape();

stroke(150, 150, 150);
beginShape();
vertex(l_handgelenk.x, l_handgelenk.y);
vertex(l_daumen2.x, l_daumen2.y);
vertex(l_zeigefinger1.x, l_zeigefinger1.y);
vertex(l_mittelfinger1.x, l_mittelfinger1.y);
vertex(l_ringfinger1.x, l_ringfinger1.y);
vertex(l_kleinerfinger1.x, l_kleinerfinger1.y);
vertex(l_handgelenk.x, l_handgelenk.y);
endShape();

if (hands[1]){ // wenn eine zweite Hand erkannt wird
r_handedness = hands[1].handedness; // ermittle ob linke oder rechte Hand
r_handgelenk = hands[1].wrist; // hole die Koordinaten des Handgekenks
r_daumen1 = hands[1].thumb_cmc; // hole die Koordinaten des Daumens 1
r_daumen2 = hands[1].thumb_mcp; // hole die Koordinaten des Daumens 2
r_daumen3 = hands[1].thumb_ip; // hole die Koordinaten des Daumens 3
r_daumen4 = hands[1].thumb_tip; // hole die Koordinaten des Daumens 4
r_zeigefinger1 = hands[1].index_finger_mcp; // hole die Koordinaten des
// Zeigefingers 1
r_zeigefinger2 = hands[1].index_finger_pip; // hole die Koordinaten des
// Zeigefingers 2
r_zeigefinger3 = hands[1].index_finger_dip; // hole die Koordinaten des
// Zeigefingers 3
r_zeigefinger4 = hands[1].index_finger_tip; // hole die Koordinaten des
// Zeigefingers 4
r_mittelfinger1 = hands[1].middle_finger_mcp; // hole die Koordinaten des
// Mittelfingers 1
r_mittelfinger2 = hands[1].middle_finger_pip; // hole die Koordinaten des
// Mittelfingers 2
r_mittelfinger3 = hands[1].middle_finger_dip; // hole die Koordinaten des
// Mittelfingers 3
r_mittelfinger4 = hands[1].middle_finger_tip; // hole die Koordinaten ddes
// Mittelfingers 4
r_ringfinger1 = hands[1].ring_finger_mcp; // hole die Koordinaten des
// Ringfingers 1
r_ringfinger2 = hands[1].ring_finger_pip; // hole die Koordinaten des
// Ringfingers 2
r_ringfinger3 = hands[1].ring_finger_dip; // hole die Koordinaten des
// Ringfingers 3
r_ringfinger4 = hands[1].ring_finger_tip; // hole die Koordinaten des
// Ringfingers 4
r_kleinerfinger1 = hands[1].pinky_finger_mcp; // hole die Koordinaten des kleinen
// Fingers 1
r_kleinerfinger2 = hands[1].pinky_finger_pip; // hole die Koordinaten des kleinen
// Fingers 2
r_kleinerfinger3 = hands[1].pinky_finger_dip; // hole die Koordinaten des kleinen
// Fingers 3
r_kleinerfinger4 = hands[1].pinky_finger_tip; // hole die Koordinaten des kleinen
// Fingers 4

// dann füge an den Fingerspitzen ausgefüllte Kreise hinzu
noStroke();fill(150, 50, 50); ellipse(r_daumen4.x, r_daumen4.y,15,15);
noStroke();fill(150, 150, 50); ellipse(r_zeigefinger4.x, r_zeigefinger4.y,15,15);
noStroke();fill(50, 150, 50); ellipse(r_mittelfinger4.x, r_mittelfinger4.y,15,15);
noStroke();fill(50, 150, 150); ellipse(r_ringfinger4.x, r_ringfinger4.y,15,15);
noStroke();fill(50, 50, 150); ellipse(r_kleinerfinger4.x, r_kleinerfinger4.y,15,15);
noStroke();fill(150, 150, 150); ellipse(r_handgelenk.x, r_handgelenk.y,15,15);

// dann verbinde die erkannten Punkte miteinander und zeige es als Skelett auf dem Bildschirm
noFill();
strokeWeight(2);
stroke(150, 50, 50);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_daumen1.x, r_daumen1.y);
vertex(r_daumen2.x, r_daumen2.y);
vertex(r_daumen3.x, r_daumen3.y);
vertex(r_daumen4.x, r_daumen4.y);
endShape();

stroke(150, 150, 50);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_zeigefinger1.x, r_zeigefinger1.y);
vertex(r_zeigefinger2.x, r_zeigefinger2.y);
vertex(r_zeigefinger3.x, r_zeigefinger3.y);
vertex(r_zeigefinger4.x, r_zeigefinger4.y);
endShape();

stroke(50, 150, 50);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_mittelfinger1.x, r_mittelfinger1.y);
vertex(r_mittelfinger2.x, r_mittelfinger2.y);
vertex(r_mittelfinger3.x, r_mittelfinger3.y);
vertex(r_mittelfinger4.x, r_mittelfinger4.y);
endShape();

stroke(50, 150, 150);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_ringfinger1.x, r_ringfinger1.y);
vertex(r_ringfinger2.x, r_ringfinger2.y);
vertex(r_ringfinger3.x, r_ringfinger3.y);
vertex(r_ringfinger4.x, r_ringfinger4.y);
endShape();

stroke(50, 50, 150);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_kleinerfinger1.x, r_kleinerfinger1.y);
vertex(r_kleinerfinger2.x, r_kleinerfinger2.y);
vertex(r_kleinerfinger3.x, r_kleinerfinger3.y);
vertex(r_kleinerfinger4.x, r_kleinerfinger4.y);
endShape();

stroke(150, 150, 150);
beginShape();
vertex(r_handgelenk.x, r_handgelenk.y);
vertex(r_daumen1.x, r_daumen1.y);
vertex(r_zeigefinger1.x, r_zeigefinger1.y);
vertex(r_mittelfinger1.x, r_mittelfinger1.y);
vertex(r_ringfinger1.x, r_ringfinger1.y);
vertex(r_kleinerfinger1.x, r_kleinerfinger1.y);
vertex(r_handgelenk.x, r_handgelenk.y);
endShape();
}

var handpose; // Array für das von handPose zurückgelieferte Ergebnis
var video; // Variable für das zu analysierende Video
var hands = []; // Array für die erfassten Handkonturen

function preload() {
handpose = ml5.handpose(); // Einladen des Handpose-Modells für mehrere Hände.
}

}

</script>