照慣例，今日Tutting作品分享~~

JayFunk || Tutting || "I'M HOME"

這支作品的手部線條清晰且變化流暢，非常適合觀察 Tutting 在「角度」與「節點連接」上的運用，這正是我們今天要處理的主題：關節資料結構。

為什麼需要關節資料結構？

要讓Tutting模擬器能夠「跳舞」，我們需要一個清楚的骨架系統。
Tutting的動作特性是：

• 角度 — 關節之間的夾角必須精準
• 線條 — 身體部位之間連成的直線要穩定
• 節點關係 — 每個部位都是相對於其他部位而動作

如果沒有清楚的結構定義，後續的動畫、控制器甚至存檔系統都會變得混亂。

接下來將結合使用ChatGPT創造模擬器的虛擬舞者吧！

首先，藉由ChatGPT分析我們想要一個『2D 火柴人角色』

關節的資料結構：

透過與ChatGPT討論得出將火柴人舞者分成 6 大區域，

並使用一致的命名規則（左右對稱使用 left / right 前綴）：

接著我們需要記錄每個關節的(x, y)座標，之後將根據這些關節之間的連線畫出2D火柴人。

此外，每個關節位置也可以隨時間更新，這就是動畫的基礎。

關節資料JSON檔

以下為2D 火柴人關節資料JSON檔，我們先用最簡單的 (x, y) 來記錄每個關節位置。

let joints ={
            Head:{ x: 200, y: 80 },//頭部
            Neck:{ x: 200, y: 100},//脖子
            center:{ x: 200, y: 120},//中心點
            Waist:{x: 200, y: 180},//腰部
            Hip:{ x: 200, y: 220},//臀部

            leftShoulder:{ x: 180, y: 120},//左肩
            rightShoulder:{ x: 220, y: 120},//右肩

            leftElbow:{x: 130, y: 120},//左手肘
            leftWrist:{x: 90, y: 120},//左手腕
            leftPalm:{x: 70, y: 120},//左掌

            rightElbow:{x: 270, y: 120},//右手肘
            rightWrist:{x: 310, y: 120},//右手腕
            rightPalm:{x: 330, y: 120},//右掌

            leftknee:{ x: 170, y: 270},//左膝
            leftAnkle:{ x: 160, y: 320},//左腳踝
            leftToe:{ x: 140, y: 320},//左腳趾

            rightknee:{ x: 230, y: 270},//右膝
            rightAnkle:{ x: 240, y: 320},//右腳踝
            rightToe:{ x: 260, y: 320},//右腳趾
        }

結論

今天我們完成了Tutting模擬器的第一個核心基礎：關節資料結構，這個 joints 物件將是未來所有功能的基石：

• 動畫播放
• 手動關節控制
• 動作紀錄與回放
  -甚至 AI 自動生成舞蹈