MediaPipe座標から親指と人差し指の距離を3Dで可視化するアプリ【Streamlit】

はじめに

手の動きを分析する際に、親指と人差し指の距離というのは非常に重要なパラメータになります。
例えばピンチ動作の解析や、把持の開始/終了判定、あるいは発達評価などにも応用できます。

今回は、前回の手指の座標取得のアプリの記事（記事URL:http://ktr-project.net/?p=164）を踏まえて、MediaPipeなどで取得された3D手指ランドマーク座標のCSVファイルを使って、親指と人差し指の距離を可視化＆数値出力するStreamlitアプリを紹介します。

このアプリでできること

MediaPipe形式（21点×x,y,z）のCSVを読み込み
手の形状を3Dプロットで可視化（親指と人差し指を結ぶベクトル付き）
二点間の3次元距離を自動計算
プロットは映像と同じ向きになるように軸を補正
修正後CSVのダウンロード可能

対象となるCSVファイル

このアプリは、MediaPipe Handsで出力された以下のようなCSVを前提としています：

x	y	z
0.51	0.63	-0.03
0.53	0.60	-0.02
…	…	…
（21行）

行数：21点（固定）
列：x, y, z の3列
座標系：MediaPipe基準（x: 左→右, y: 上→下, z: 奥行き）

前回記事で出力されるcsvファイルをそのままアップロードすれば使える形になっています。

🖥️ アプリ画面の使い方

「📄 Upload CSV」でCSVファイルをアップロード
自動で手の形状が3D表示され、ベクトルと距離が描画されます
⬇️ Download Processed CSV で補正済み座標も保存できます

🔻プロット表示例：

青い点：21のランドマーク
グレー線：骨格構造（MediaPipe準拠）
赤い矢印：親指と人差し指の先端を結ぶ距離ベクトル

🧮 距離の計算

distance = np.linalg.norm(index_tip - thumb_tip)

3次元のユークリッド距離をそのまま計算しており、**単位はMediaPipe準拠（0～1）**になります。

🧾 コードの要点

座標補正処理を入れて、実際の映像と同じ左右・上下・奥行になるように調整しています：

るdf['x'] = 1.0 - df['x']  # 左右反転
df['y'] = 1.0 - df['y']  # 上下反転
df['z'] = -df['z']       # 奥行き反転

骨格線はMediaPipeの構造を再現し、直感的な表示を維持
ダウンロード処理も標準搭載で、あとから別のアプリで活用しやすい

🤖 実際に使ってみた感想

ピンチ動作や把持動作の解析に役立つ
CSVだけで3D表示できるので軽量＆手軽
距離のベクトル表示が便利

特に物品にアプローチする際の指の距離の変化を追いかけたりする用途としては使えると思っています。

📎 応用アイデア

動画中の全フレーム距離推移の可視化
指先の接近検出システム
リハビリ・臨床現場での手指トラッキング評価

他に良い使い道があったら、ぜひＸやコメント欄で教えてください。