TouchDesignerで作ったものをGIFアニメーションにする


はじめに

TouchDesignerで作ったものをGifアニメーションにしたい。と思ってもTouchDesignerには直接Gifアニメーションを書き出す機能はないのでその説明。Twitterで知人とちょっとだけやりとりがあったので書いておく。簡単。

何か作る

書き出したい何かをTouchDesignerで作ります。

普通に動画で書き出す

Export Movie Dialogを使って.movで書き出します。
Export Movie DialogでCodecを選べるけど、圧縮は低めのほうが良いのではないかと思う。『animation』がファイルサイズも大きくて圧縮率低そうな気がするので(非圧縮?)自分はこれにしているけど他のcodecでもffmpegが対応してさえすればどれでもよい。

書き出し方の参考↓
TouchDesignerでフレーム落ち無しの動画を書き出す - Qiita https://qiita.com/ikekou/items/a53910ea7195c5359f78

ffmpegをインストールするしてmovをgifにする

そのままの記事があったのでこちらを見る↓
macでffmpegを導入してmovファイルをgifファイルへ変換するところまで - Qiita https://qiita.com/Ryosuke-Hujisawa/items/6a1c47d31ac299dc1c46

以上できたはず。おわり。

作業を楽にする

上記まででgifにはできたのでこれはおまけ。

自分もよくmov→gifはやるけどいちいちコマンド入力するの面倒。なのでシェルを.commandファイルにしてダブルクリックで処理が走るようにしてます。

.commandの便利さ参考↓
Macでバッチ(command)ファイルを作る方法 - Qiita https://qiita.com/TatsuyaOGth/items/f15bfa9aeb68d8ecfc67

で自分のコード見たらその時にnode.jsのffmpeg-gifっていうちょっとだけ便利になるラッパーも入れてそれをシェルから叩いてます。が普通にffmpegを叩けば良い気がするのでどういう経緯か忘れたけど別にこれはいらない気がする。が一応参考。

ffmpeg-gif↓
Jam3/ffmpeg-gif: shell script to convert video to high quality GIF with ffmpeg https://github.com/Jam3/ffmpeg-gif

コマンド例↓

$ ffmpeg-gif export.mov export.gif -t 30 --scale=256:-1

.commandファイル参考↓
https://github.com/ikekou/touchdesigner-samples/blob/master/1-sop/mov2gif.command

ちょっとした作業でも繰り返すとターミナルを立ち上げて文字を打つのが面倒になるのでマウスだけでできる.commandにしちゃうというのはよくやります。