search

k1105 / p5-handpose-sketch-template

p5.js で tensorflow が提供するhand-pose-detectionモデルを使用できるよう作成したフレームワーク.
https://p5-handpose-sketch-template.vercel.app
MIT License
3 stars 0 forks source link

readme

Overview

p5.js で tensorflow が提供するhand-pose-detectionモデルを使用できるよう作成したフレームワーク.プロジェクトファイル内に存在する sketch ファイルを編集することで容易に手指の動きを用いたインタラクティブなクリエイティブコーディングが可能なほか, 生のデータを平滑化した滑らかな手指の動きなどを使用できる関数群を提供する.
Try out the live DEMO!

keyshot

Getting Started

本フレームワークの動作には node.js が必要です。Next.js のインストール手順は
Mac: Mac に Node.js をインストール　
Windows: Node.js をインストールする

  1. github のリポジトリから最新版のプロジェクトをダウンロードする.安定版は releases 一覧から最新のものを選択, 最新のものは「Code > Download ZIP」を選択. ダウンロード後, zip ファイルを展開する.

releases から安定版をダウンロード:
　　

Code > Download ZIP から最新版をダウンロード:

  1. ターミナル（コマンドプロンプト）でダウンロードしてきたディレクトリに移動し,以下を実行.
npm install
# or
yarn install

実行について

同じくダウンロードしてきたディレクトリ内で, 以下を実行.

npm run dev
# or
yarn dev

http://localhost:3000にて実行結果を確認.

編集について

カンバス内を編集していく場合は, sketch/HandSketch.tsxを編集する.
p5.jsで記述できるが, p5 の関数や p5 特有の変数（カンバスサイズを有する width, height 変数や, textAlign を指定する際の CENTER といったオプションなど）を使用する際は, その先頭にp5をつける必要があることに注意.

Handpose landmarks

手指の各特徴点については次のような番号が割り当てられている.
（MediaPipe のドキュメントから転載.）

hand-landmarks

例えば人差し指の動きだけを取得したい場合は、番号 5~8 の特徴点を取得する.

型について

本テンプレートは p5js での描画に特化したテンプレートであるため、手指の情報については、① 保持する情報を描画に必要なキーポイントの情報のみに限定し、② 右手と左手が区別された手指の姿勢を直接呼び出すことが可能な型定義を独自に行なった。独自に行なった型Handpose, 並びにDevidedHandposeは以下のようになっている。

type Handpose = handPoseDetection.Keypoint[];
type DevidedHandpose = {
  wrist: Keypoint;
  thumb: Keypoint[];
  index: Keypoint[];
  middle: Keypoint[];
  ring: Keypoint[];
  pinky: Keypoint[];
};

関数について

描画に関連する関数は次のとおり：

convertHandToHandpose

const convertHandToHandpose: (hands: handPoseDetection.Hand[]) => {
  left: Handpose;
  right: Handpose;
};

getSmoothedHandpose

const getSmoothedHandpose: (
  rawHands{
  left: Handpose;
  right: Handpose;
},
  keyframes: {
    left: Handpose[];
    right: Handpose[];
  }
) => Handposes;

他の関数についての説明はDocsを参照。

構成

index.tsx上で Detector を作成（非同期）し, 作成完了と同時に sketch ファイルが読み込まれる. 手指の姿勢推定を行う処理が記述されているのも同じくindex.tsxであり, 更新されるたびにpredictionsRefに新規の姿勢が格納される. sketch/HandSketch.tsxではこの値を毎フレーム読みにいき, 読み込まれた最新の姿勢情報を用いて描画処理を行う.

timeline-diagram

注意事項としては,

Docs

notion