當你無聊時,可以玩玩 GitHub 上這個開源項目
據說,無聊是創造力的源泉。
最近,一個名爲「Pose Animator」的項目人氣暴增,打開以後,我們發現這又是一個能讓人自娛自樂,並且絲毫察覺不到時間流逝的神奇工具。
短短三天內,這個項目就在 GitHub 上獲得了 1.9k 的 Star 量,在推特上也獲得了 3.4k 的點贊。
除了這個偏分劉海的紅衣少女,你還可以選擇把自己變成小浣熊或者貓頭鷹:
當然,性別也是可以選擇的,在這一欄選擇「boy」就能切換到精神小夥了。
或許是在家無聊,一些網友也開始了瘋狂的演示(如何換裝本文第二部分有介紹):
倒不失爲一個放鬆身心的好方法。
有人說,不如把這個與 v2loopback 結合一下,用在 Zoom 裏,想必那些冗長的會議也沒有那麼難熬了……
項目地址:https://github.com/yemount/pose-animator/
Pose Animator 是什麼?
項目作者是一位叫做 Shan Huang 的小姐姐,她畢業於 CMU,現在是谷歌的 Creative Technologist。
簡單來說 Pose Animator 會使用拍攝的 2D 矢量圖,並基於 PoseNet 和 FaceMesh 的識別結果,實時對結果及包含的曲線進行動畫處理。Pose Animator 從計算機圖形學中借鑑了「基於骨骼」的動畫思想,並將其應用於矢量字符。
在此骨骼動畫裏,通常展現的任務角色由兩部分組成:
-
用於繪製該角色的曲面
-
一組分層且相互連接的「骨頭」,其用途是使得曲面能夠移動,同時也可活躍起來。
在 Pose Animator 中,曲面是由 SVG 文件中的 2D 矢量路徑所定義。對於「骨骼」結構而言,Pose Animator 提供了預設定的骨骼層次表示形式,該表現形式同時也是基於 PoseNet 和 FaceMesh 的關鍵點而進行設計的。在輸入的 SVG 文件中以及字符插圖中指定了此骨骼結構的初始姿勢,同時通過 ML 模型的識別結果來更新實時骨骼位置。
感興趣的讀者可以通過以下兩個一靜一動的 Demo 進行體驗:
-
動態:https://pose-animator-demo.firebaseapp.com/camera.html
-
靜態:https://pose-animator-demo.firebaseapp.com/static_image.html
如何運行?
安裝依賴項同時準備構建目錄:
yarn
查看文件更改,並啓動開發服務器:
yarn watch
值得一提的是,Chrome 以及 IOS Safari 都支持上述 Demos,Android 上的 Chrome 雖然還未測試過,但項目開發者表示應該也同樣支持。
如何使得自己的設計具有動畫效果?
所需工作並不複雜,下列新人教程可以說是非常友好,短短几步即可完成。首先,你需要下載示例骨架 SVG 工具,同時需要在矢量圖形編輯器中創建一個新文件,並將上述下載中名爲「骨架」(skeleton)複製進你所創建的文件中。
不建議在此文件組上有添加、移除或是重命名等修改,PoseAnimator 會依賴這些原始命名路徑從而讀取「skeleton」的初始位置,修改會很容易導致報錯。
接下來,在「skeleton」文件組旁創建新的文件組,並將其命名爲「illustration」,可以在此文件組中放置任一插圖的完整路徑。展開所有子文件組,確認「illustration」中僅包含路徑元素,但目前並不支持複合路徑。其文件結構圖應該如下圖所示:
[Layer 1]
|---- skeleton
|---- illustration
|---- path 1
|---- path 2
|---- path 3
通過移動節點將「skeleton」組中的示例「skeleton」嵌入至「illustration」中,進而導出 SVG 文件。之後打開 Pose Animator 相機 Demo(上述 Demo 鏈接),將 SVG 文件拖放至瀏覽器選項中就能順利實現。詳情可參照 GitHub 項目地址。
來源 公衆號:機器之心
好文章,我在看