今天分享一部越南Tutting 舞者GUMBALL，於2022年Tutting Battle上的 Judge solo！

Tutting舞蹈在越南也相當盛行喔！

SÀI GÒN XẾP 2022 | JUDGE SHOWCASE | GUMBALL

接續Day26，今天的目標要把MediaPipe Pose偵測到的偵測人體地標整合進Tutting模擬器之中，

讓Tutting模擬器的2D火柴人骨架能即時跟著使用者動作同步。

整合流程

[攝影機影像]
        │
        ▼
[MediaPipe Pose 偵測]
        │
        ▼
[獲取 33 個人體地標座標 (x, y, z)]
        │
        ▼
[關鍵點對應 Mapping]  
        │
        ▼
[更新火柴人骨架資料結構]
        │
        ▼
[重新繪製火柴人骨架]
        │
        ▼
[火柴人骨架隨使用者動作同步]

1. 引入 MediaPipe API

在網頁中載入 Pose 模組：

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>

2. 影像處理

啟動攝影機，把每一幀影像傳進Pose模型：

await pose.send({ image: videoElement });

取得 33 個關鍵點（每個點包含 x, y, z, visibility）：

 const landmarks = results.poseLandmarks.map((landmark, index) => ({
  index,
  x: landmark.x,
  y: landmark.y,
  z: landmark.z,
  visibility: landmark.visibility
}));
console.log("Pose Landmarks:", landmarks);

3. 資料轉換

對 Tutting模擬器而言，不需要全身，只要 上半身 + 手部即可。
我們選取：

// MediaPipe → 模擬器
{
  0: "head",        // Nose
  11: "leftShoulder",
  13: "leftElbow",
  15: "leftWrist",
  12: "rightShoulder",
  14: "rightElbow",
  16: "rightWrist",
  23: "leftHip",
  25: "leftKnee",
  27: "leftAnkle",
  24: "rightHip",
  26: "rightKnee",
  28: "rightAnkle"
}

把這些座標轉換成模擬器骨架的關節位置。

4. 骨架映射

將取得關節座標映射至模擬器，每個關節可以用 .set(x, y) 更新位置：

const lm = results.poseLandmarks;

stickman.leftShoulder.set(lm[11].x, lm[11].y);
stickman.leftElbow.set(lm[13].x, lm[13].y);
stickman.leftWrist.set(lm[15].x, lm[15].y);

stickman.rightShoulder.set(lm[12].x, lm[12].y);
stickman.rightElbow.set(lm[14].x, lm[14].y);
stickman.rightWrist.set(lm[16].x, lm[16].y);

這樣，攝影機中的動作就能即時對應到模擬器的火柴人骨架。

5.繪製火柴人骨架

持續取得座標關節座標並不斷繪製每一幀，顯示在畫布上。

結論

MediaPipe Pose 提供即時的 33 個人體關鍵點。
Tutting 模擬器只需要部分關節（肩膀、手肘、手腕），即可重建手部框架動作。
透過關節映射就能把真實舞蹈動作轉換成虛擬火柴人的動態骨架。