Загрузка и запуск Handpose

Для работы с ml5.js необходимо подключить библиотеку к проекту. Наиболее простой способ — использование CDN. В HTML-файле подключение выполняется следующим образом:

Важно подключать p5.js перед ml5.js, так как ml5.js зависит от функционала p5.js для работы с изображениями и видео.

После подключения библиотек создается базовая структура для работы с видео-потоком и моделью Handpose:

let video;
let handpose;
let predictions = [];

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

Инициализация модели Handpose

Модель Handpose позволяет детектировать руки и возвращает координаты ключевых точек кисти (21 точка на каждую руку). Инициализация модели выполняется с использованием метода ml5.handpose():

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();

  handpose = ml5.handpose(video, modelReady);

  handpose.on('predict', results => {
    predictions = results;
  });
}

Ключевые моменты:

  • video — объект видеопотока, используемый для анализа.
  • modelReady — callback-функция, вызываемая после успешной загрузки модели.
  • Событие 'predict' срабатывает каждый раз, когда модель возвращает результаты анализа текущего кадра.

Пример функции modelReady:

function modelReady() {
  console.log('Handpose модель загружена и готова к работе.');
}

Структура данных предсказаний

Каждое предсказание представляет собой объект с информацией о найденной руке:

[
  {
    landmarks: [
      [x0, y0, z0], [x1, y1, z1], ..., [x20, y20, z20]
    ],
    annotations: {
      thumb: [[x, y, z], ...],
      indexFinger: [[x, y, z], ...],
      middleFinger: [[x, y, z], ...],
      ringFinger: [[x, y, z], ...],
      pinky: [[x, y, z], ...],
      palmBase: [[x, y, z]]
    }
  }
]
  • landmarks — массив из 21 ключевой точки кисти, каждая точка содержит координаты [x, y, z].
  • annotations — структурированное представление точек по пальцам и основанию ладони. Удобно использовать для построения скелета руки и распознавания жестов.

Отображение рук на канвасе

Для визуализации точек кисти используется функция draw() в p5.js:

function draw() {
  image(video, 0, 0, width, height);

  for (let i = 0; i < predictions.length; i++) {
    const hand = predictions[i];
    drawKeypoints(hand.landmarks);
    drawSkeleton(hand.annotations);
  }
}

function drawKeypoints(landmarks) {
  fill(0, 255, 0);
  noStroke();
  for (let i = 0; i < landmarks.length; i++) {
    const [x, y, z] = landmarks[i];
    ellipse(x, y, 10, 10);
  }
}

function drawSkeleton(annotations) {
  stroke(255, 0, 0);
  strokeWeight(2);
  for (let finger in annotations) {
    const points = annotations[finger];
    for (let i = 0; i < points.length - 1; i++) {
      const [x1, y1] = points[i];
      const [x2, y2] = points[i + 1];
      line(x1, y1, x2, y2);
    }
  }
}

Особенности визуализации:

  • drawKeypoints отображает точки суставов кисти.
  • drawSkeleton соединяет точки, создавая скелет пальцев.
  • Использование annotations облегчает создание интерактивных жестов.

Управление производительностью

Handpose работает в реальном времени, но обработка каждого кадра может быть ресурсоемкой. Для оптимизации рекомендуется:

  1. Уменьшить разрешение видеопотока:
video = createCapture(VIDEO);
video.size(320, 240);
  1. Ограничить частоту предсказаний, например, с помощью таймера или frameRate():
frameRate(15); // 15 кадров в секунду
  1. Использовать только необходимые точки для анализа жестов, если полный набор из 21 точки не нужен.

Работа с событиями модели

Модель Handpose предоставляет события, которые упрощают интеграцию с анимациями и взаимодействиями:

  • 'predict' — возвращает массив предсказаний для текущего кадра.
  • 'load' — событие загрузки модели.

Пример использования события загрузки:

handpose.on('load', () => {
  console.log('Модель загружена, можно запускать предсказания.');
});

Расширенные возможности

  1. Распознавание жестов: На основе координат точек можно вычислять углы между суставами, расстояния между пальцами и определять сложные жесты.
  2. Взаимодействие с DOM: Координаты точек кисти можно использовать для управления элементами страницы, например, кнопками или слайдерами.
  3. Сочетание с другими ml5-моделями: Handpose легко интегрируется с PoseNet, BodyPix и другими моделями для расширенного анализа движений человека.

Примеры интеграции

  • Перетаскивание объектов: Использование координат ладони для перемещения графических элементов на канвасе.
  • Игра жестами: Преобразование жестов в события, например, поднятый большой палец для «лайка».
  • Визуальные эффекты: Создание динамических линий и фигур, привязанных к движению пальцев.
Оглавление