iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0

今日Tutting作品分享~

WINNER | FLEX SOLO DANCE CHAMPIONSHIP | HITTESH PATEL


從骨架資料結構到畫布呈現

昨天我們完成了虛擬舞者的骨架資料結構,今天要讓這套資料「組裝起來」,使用 Canvas API 把它畫在畫布上,並依據關節關係表確保每個關節關係連接。

關節關係表如下:

關節名稱 連結關節
Head Neck
Neck center
center Waist
Waist Hip
Hip
leftShoulder center
rightShoulder center
leftElbow leftShoulder
leftWrist leftElbow
leftPalm leftWrist
rightElbow rightShoulder
rightWrist rightElbow
rightPalm rightWrist
leftknee Hip
leftAnkle leftknee
leftToe leftAnkle
rightknee Hip
rightAnkle rightknee
rightToe rightAnkle

依據關節關係圖繪製結果

Canvas 渲染火柴人骨架結果:
https://ithelp.ithome.com.tw/upload/images/20250809/20144288K7auQ63u8b.jpg

結論

完成骨架資料 → Canvas 繪圖流程,成功畫出 2D 火柴人虛擬舞者,
為了讓 Tutting 模擬器 更加貼近使用者,接下來會探討並實作 Tutting 的舞蹈規則,
明天見~~~
/images/emoticon/emoticon07.gif


上一篇
Day 4|打造模擬器火柴人舞者的關節資料結構
下一篇
Day 6 | Tutting 舞蹈規則
系列文
用 GenAI 創造虛擬 Tutting 舞者的 30 天冒險29
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言