その後のその後

iOSエンジニア 堤 修一のブログ github.com/shu223

【oFセミナーメモ4】openFrameworksと映像制作ソフトの連携

デジタルアートセミナー#3 openFrameworksで学ぶ、クリエイティブ・コーディング』のライゾマ比嘉さんのセッション『openFrameworksと映像制作ソフトの連携』のメモ。

講師 : 比嘉了

AfterEffectsやCinema4Dなどの映像ソフトとopenFrameworksを連携させる映像制作手法の紹介を行います。


講義資料はこちらで公開されています。markdown形式。


過去のセッションのレポートはこちら。

事例紹介

(ダンスのやつ。動画メモし忘れました)

  • 手と頭につけてるマーカーで軌跡を書く
  • 他の部分は動的生成ではなく、CINEMA 4Dであらかじめ用意していたもの

Illustratorとの連携:ofxPDF

ベクタデータのうち、SVGよりPDFの方がロードが10倍ぐらい速いことがあったので、それからはPDFを使っている。そのPDFをoFで取り扱うアドオン。

普通に描画
ofxPDF pdf;
pdf.loadPDF("tiger.pdf");
pdf.draw();
テキストアニメーション


(アニメーションの途中の様子です)

void draw()
{
    float app_time = ofGetElapsedTimef();
    float animation_time = fmodf(app_time, 2) / 2.;
    
    cout << "app_time: = " << app_time << ", animation_time: " << animation_time << endl;
    
    ofSetColor(0);
    
    // PDFのパスを順番に取り出して ofPolyline で描画する
    for (int i = 0; i < pdf.getNumPath(); i++)
    {
        ofPath& path = pdf.getPathAt(i);
        
        vector<ofPolyline>& polys = path.getOutline();
        for (int k = 0; k < polys.size(); k++)
        {
            ofPolyline poly = polys[k];
            
            poly = poly.getResampledByCount(100);
            
            int target_size = poly.size() * animation_time;
            poly.resize(target_size);
            
            poly.draw();
        }
    }
}


順番に見ていくと、


1. パスを取り出す

ofPath& path = pdf.getPathAt(i);


2. パスのアウトラインを取り出す

vector<ofPolyline>& polys = path.getOutline();

ofPolyline がベクタで得られる


3. ofPolylineをリサイズしながら描画する

for (int k = 0; k < polys.size(); k++)
{
    ofPolyline poly = polys[k];

    poly = poly.getResampledByCount(100);

    int target_size = poly.size() * animation_time;
    poly.resize(target_size);

    poly.draw();
}

各アウトラインが、長さ0から元の長さに戻っていく。

After Effects との連携:ofxAfterEffectsKeyframeParser

サッカーのボールの軌跡を追う

AEにはそういう機能が入っている: tracker

  • > キーフレームとして入る
  • > ofxAfterEffectsKeyframeParser で読む



画像解析不要!

Cinema 4Dとの連携:ofxAlembic

https://github.com/perfume-dev/ofxAlembic

  • メッシュアニメーション
  • パーティクル
  • polyline
  • カメラワーク

などが読み書きできる


(それぞれ ofxAlembic に付属のサンプルを実行したもの。アニメーションします)