【Processing】illustratorとProcessingでライブアニメーション
#illustrator と #Processing でライブアニメーション(絵は残念ですが) pic.twitter.com/mfU3qX1MX7
— 94 (@_94_94) 2017年12月31日
これはProcessing Advent Calendar 2017 - Qiitaの25日目の記事です。(大晦日にインチキしました)
リアルタイムで絵を動かして制御をする、ライブアニメーションとかできたらいいなと思った。プログラムが苦手なアニメーターやイラストレーター向け(絵が描ける人)。
そういうアプリはあるみたいだけど、絵描きにとってフレームの編集って慣れたソフトが良いのではと思い、フレームの編集をillustratorで、読み込みと出力をProcessingでできるようにしてみた。
この動画では一つのウィンドウでやってるけど、イラレでの編集をメインディスプレイ、Processingでの出力をサブディスプレイにすることで全画面パフォーマンスできる(はず)。
少し触って見た感想としては、この方法のためイラレ使いが必要で、上手く動かせない。楽器とかと同じで練習が必要だなあと思った。
- 仕組み
随時フレームの編集と更新を繰り返すことでライブアニメーションを成立させる。
illustratorで絵を作成。1つのレイヤーを1つのフレームとして作成・シーケンスを組み、連番でPNGで出力。(イラレでなくてもいいかも)
Processingでは連番のPNGを読み込んで表示。リアルタイム編集するので、クリックしたら更新するように組んだ。
ループするフレーム数と、ファイル名はあらかじめ決めていた方が良い。
イラレは保存はai,PDF,svgなどがある。その形式だとPrecessingで読み込むのがややこしいのでPNGを使うことにした。だが、web用に書き出し〜とかでPNGをちくちく保存してくのはめんどいし、パフォーマンスも悪いので、スクリプトを使うことにした。
以下のURLから、レイヤーごとに書き出すスクリプトを参考にした。
https://www.ipentec.com/document/document.aspx?page=illustrator-write-image-on-each-layer
レイヤー名 + .png というファイル名になるので、Precessing側で読み込みやすいようにレイヤー名も番号をふって管理しやすくしておく必要がある。もちろん保存先のディレクトリはProcessingのコードファイルの中のdataフォルダにする。
- Processing
この書籍に記載してある、連番で画像を読み込んでアニメーションを作る、というコードを参考にした。
連番で読み込む → 表示 の流れ。クリックしたら更新する。
プロトタイプなので8フレームで書いたけど、フレームを増やすとか、フレームレートをいじるとか、コードを書き換えて色々と拡張できそう。
機会があったら使ってみたいけど、僕はライブもあまりしないし、絵も書かない。
絵が描ける人に使って試してみて欲しい。どんなパフォーマンスになるのか見てみたい。