完成一半了

在我們進入正式內容之前，非常推薦先來欣賞這段超讚的 Tutting Combo 整理影片──

「50 Tutting Patterns for Poppers & Hip-Hop Dancers」

這支影片匯聚了 50 種經典 Tutting 組合，對未來數位化設計的思考與開發有著啟發的價值。

在第七天，我們簡單介紹了 Tutting 舞蹈的靈魂 —— Tutting Combo，
所謂 Combo，就是從單一圖形到圖形之間的流動組合，它決定了 Tutting 的結構感與音樂性。

如今走到第十五天，我們已經討論了：

• 正向與逆向運動學 (FK/IK) —— 解決關節如何驅動與追隨的問題。
• 音樂性 (Musicality) —— 動作如何與節拍、旋律、音色呼應。
• 緩動 (Easing) —— 讓數位化 Tutting 動作更貼近真實舞蹈的加速與減速。

接下來，我們把這些概念整合到一個可被程式讀取的 JSON 資料結構。

數位化設計流程

1. GUI 設計動作

• 使用者在畫布(Canvas)或骨架編輯器上拖曳手臂、手掌、手指。
• 可以即時套用 Easing 預覽（例如選擇 Ease Out，手會慢慢停下）。
• 透過滑桿/節點控制調整角度與路徑。

2.記錄至 JSON 資料結構

當使用者按下「儲存」或「記錄」按鈕，系統將動作轉換成 JSON：

stages {
    no // 動作序號
    kinematics       // 動作運動學
    part        // 身體部位
    startTime // 開始時間
    endTime  // 結束時間
    from        // 起始位置
    to            // 結束位置
    easing       // 緩動曲線
}

欄位解釋:

• no：動作的序號，決定 Combo 的播放順序。
• kinematics：運動學類型（FK: Forward Kinematics、IK: Inverse Kinematics）。
• part：動作的身體部位（rightArm, leftArm, bothArms,...）。
• startTime / endTime：時間軸上的區間（毫秒為單位，可對應 BPM）。
• from / to：起始與結束的姿態，可用座標/角度定義。
• easing：緩動曲線（easeIn, easeOut, easeInOut, bounce, elastic...）。

3.動畫播放

• 系統讀取 JSON，依序執行 stages。
• 依照 startTime / endTime 計算進度，套用對應 kinematics、easing 曲線。
• 驅動骨架模型 → 在畫布上渲染 Tutting 動作。

範例

接下來藉由實際 Tutting 舞蹈中的簡單範例，示範如何記錄到資料結構中。

情境：右手抬起 → 左手抬起 → 手肘向上轉90°

1. GUI 設計動作

• 使用者在畫布拖曳右手 → 從 0° 抬到 90°。
• 設定緩動曲線：easeOut。
• 紀錄
• 使用者在畫布拖曳左手 → 從 0° 抬到 90°。
• 設定緩動曲線：easeOut。
• 紀錄
• 使用者在畫布拖曳左右手肘 → 從 0° 抬到 90°。
• 設定緩動曲線：easeInOut
• 紀錄

2. JSON 資料結構

系統自動轉換成 JSON：

{
  "stages": [
    {
      "no": 1,
      "kinematics": "FK",
      "part": "rightArm",
      "startTime": 0,
      "endTime": 1000,
      "from": { "angle": 0 },
      "to": { "angle": 90 },
      "easing": "easeOut"
    },
    {
      "no": 2,
      "kinematics": "FK",
      "part": "leftArm",
      "startTime": 1000,
      "endTime": 2000,
      "from": { "angle": 0 },
      "to": { "angle": 90 },
      "easing": "easeOut"
    },
    {
      "no": 3,
      "kinematics": "FK",
      "part": "bothElbows",
      "startTime": 2000,
      "endTime": 3000,
      "from": { "rotation": 90 },
      "to": { "rotation": 180 },
      "easing": "easeInOut"
    }
  ]
}

3. 播放動畫

點選『播放』功能。

結論

Tutting combo 的數位化，不只是單純將舞蹈動作轉換成動畫，而是建立一套 「設計流 → 資料結構 → 播放引擎 → 資料庫」 的完整循環。

這樣的架構，將能奠定舞蹈資料庫與 AI 生成的技術基礎，推動 Tutting 進入一個真正可編輯、可分享、可重播的數位時代。