illustratorとProcessingでライブアニメーション

 

これは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

www.oreilly.co.jp

この書籍に記載してある、連番で画像を読み込んでアニメーションを作る、というコードを参考にした。

 

連番で読み込む → 表示 の流れ。クリックしたら更新する。

プロトタイプなので8フレームで書いたけど、フレームを増やすとか、フレームレートをいじるとか、コードを書き換えて色々と拡張できそう。

//フルスクリーンを使う場合は画像サイズを出力サイズに合わせましょう。

int numFrames = 8; //フレームの数
PImage[] images = new PImage[numFrames];  //画像の配列
int currentFrame = 1; //画像表示のインデックスに使う変数

void setup(){
  
size(700,700); //ウィンドウサイズ、画像と合わせる
//fullScreen(); //フルスクリーン

//noCursor();//カーソルを表示しない

//for文で読み込む
for (int i = 0; i < images.length; i++){
String imageName = nf(i,4)+".png" ;
images[i] = loadImage(imageName);
}

frameRate(24);  //フレームレートを24に設定
}

void draw(){

  //画像を表示してインデックスを更新
  image(images[currentFrame],0,0,width,height);
  currentFrame++;
  //規定値を超えたらインデックスをリセット
  if(currentFrame == images.length){
  currentFrame = 0; 
  }
}

//マウスクリックでフレームを読み込んで更新!
void mousePressed(){
for (int i = 0; i < images.length; i++){
String imageName =  nf(i,4)+".png" ;
images[i] = loadImage(imageName);
}
}

 

機会があったら使ってみたいけど、僕はライブもあまりしないし、絵も書かない。

絵が描ける人に使って試してみて欲しい。どんなパフォーマンスになるのか見てみたい。