概要
Processing for AEにおいては、HTML5 PanelでProcessing.jsを用いることによって、Processingのようなフォワード的なものとAEのようなランダムアクセス的なものを組み合わせることを試みた。 ただこれだと実行できることに制限があるので、Processing.jsの代わりにCinderを用いて同様のものを構築することを試みる(openFrameworksでもいいと思うが、Cinderの方が楽だったので)。
例
Particle
Camera
Compute Shader
AfterEffects-Cinder
AE側からCinderアプリケーションを制御するためのパネル。
Folder
連番ファイルを保存するフォルダを決める。
File
連番ファイルのプリフィクスを決める。
Comp
Setupした際に、選択レイヤーが存在するコンポジションの名前が代入される。
Layer
Setupした際に、選択レイヤーの名前が代入される。
Cache
レンダリングの際に、事前処理として対象レイヤーのエクスプレッション制御エフェクトの値がOSC経由でCinderアプリケーション側に送信されるわけであるが、毎回送信する必要性がない場合にキャッシュの値を使用するようにする。
Write
実際に連番ファイルに書き出す。
FBO
オフスクリーンでレンダリングする。Windowsの場合アプリケーションのスクリーンのサイズの上限がモニタの解像度に制限されるのでそれ用に。
Setup
対象レイヤーの選択及び、Cinderアプリケーションと交信し必要なエクスプレッション制御エフェクトを生成する。
Render
レンダリングを開始する。
Quit
レンダリングを中止する。
Cinder-AfterEffects
AEと連携するCinderアプリケーションを構築する(以下Cinder 0.9.0で説明)。
atarabi::AppAE
通常Cinderアプリケーションを構築する際はcinder::app::Appクラスを継承するわけであるが、その代わりにatarabi::AppAEクラスを継承する。 後は、通常とは違いサフィクスとしてAEがついた、setupAE()、drawAE()等々の関数をオーバーライドすれば良い。
| App | AppAE | 説明 |
|---|---|---|
| - | initializeAE | アプリケーション初期化後に一度だけ呼ばれる。通常のsetup()に同じ。 |
| setup | setupAE | レンダリング開始時に毎回呼ばれる。 |
| update | updateAE | 通常と同じ。 |
| draw | drawAE | 通常と同じ。 |
| mouseDown | mouseDownAE | 通常と同じ。 |
| mouseUp | mouseUpAE | 通常と同じ。 |
| mouseWheel | mouseWheelAE | 通常と同じ。 |
| mouseMove | mouseMoveAE | 通常と同じ。 |
| mouseDrag | mouseDragAE | 通常と同じ。 |
| timeline | timelineAE | 通常と同じ。 |
| getElapsedFrames | getCurrentFrame | 現在のフレーム数を取得する。 |
| getElapsedSeconds | getCurrentTime | 現在の時間を取得する。 |
| - | getFps | フレームレートを取得する。 |
| - | getDuration | デュレーションを取得する。 |
| - | getWidth | 幅を取得する。 |
| - | getHeight | 高さを取得する。 |
| - | getSize | サイズを取得する。 |
| - | getSourcePath | 対象レイヤーが静止画や映像だった場合にそのソースのパスを取得する。 |
| - | getSourceTime | 上記ソースの再生位置。 |
パラメータ
initializeAE()内でaddParameter()を呼び出すことでパラメータを追加できる。このパラメータの値はAEからエクスプレッション制御エフェクトを用いて制御することとなる。
| 型 | エクスプレッション制御 |
|---|---|
| bool | チェックボックス制御 |
| float | スライダー制御 |
| cinder::vec2 | ポイント制御 |
| cinder::vec3 | 3D ポイント制御 |
| cinder::Color | カラー制御 |
addParameter()
initializeAE()内で呼び出すことでパラメータを追加する。
//Onという名前のチェックボックス制御エフェクトを初期値オフで追加する。 addParameter("On", false); //Intensityという名前のスライダー制御エフェクトを初期値100で追加する。 addParameter("Intensity", 100.f); //Centerという名前のポイント制御エフェクトを初期値をレイヤーの中央の位置として追加する。 addParameter("Center", cinder::vec2{0.5f, 0.5f}); //Positionという名前のポイント制御エフェクトを初期値をレイヤーの左上の位置として追加する。 addParameter("Position", cinder::vec3{0.f, 0.f, 0.f}); //Fillという名前のカラー制御エフェクトを初期値を赤として追加する。 addParameter("Fill", cinder::Color{1.f, 0.f, 0.f});
gerParameter()
パラメータの値を取得する。
//現在のフレームにおけるOnの値を取得する。 bool on = getParameter("On"); //30フレーム目のFillの値を取得する。 cinder::Color fill = getParameter("Fill", 30);
setParameter()
Cinder側からAE側に値を送りたい場合に用いる。Writeがチェックされており、またレンダリングが中止されることなく終了した場合に実際にベイクされる。
setParameter("My Color", cinder::Color{1.f, 1.f, 0.f});
addCameraParameter()
カメラパラメータを追加することによってAE側のカメラの情報を取得出来るようにする(別途、CameraAEプラグインが必要)。
getCameraParameter()
カメラパラメータの値を取得する。カメラはatarabi::CameraAEクラスを用いる必要がある。
atarabi::CameraAE camera;
camera.setPerspective(60.f, static_cast
setCameraParameter()
Cinder側からAE側にカメラの情報を送りたい場合に用いる。Writeがチェックされており、またレンダリングが中止されることなく終了した場合に実際にカメラが生成される。
atarabi::AppAEdev
atarabi::AppAEの代わりにatarabi::AppAEdevを継承するとAEを起動する必要はなくまたパラメータ等もCinder上で色々弄ることが出来る。
基本
テンプレートを用意してあるのでTinderBoxから選択して利用。
ヘッダ関係。CinderAfterEffects.hをインクルードする。名前空間関連は適当に。
#include "CinderAfterEffects.h" #include "cinder/app/RendererGl.h" #include "cinder/gl/gl.h" using namespace ci; using namespace ci::app; using namespace std; using namespace atarabi;
必要な関数をオーバーライド。
class BasicAppAE : public AppAE { public: void initializeAE() override; void setupAE() override; void updateAE() override; void drawAE() override; private: Color color_; float radius_; vec2 center_; };
パラメータの追加はinitializeAE()内で行う。
void BasicAppAE::initializeAE() { addParameter("Color", Color{ 1.f, 0.f, 0.f }); addParameter("Radius", 10.0f); addParameter("Center", vec2{ 0.5f, 0.5f }); }
レンダリングごとの初期化はsetupAE()で行う。例えば、std::vectorを使用している際はclear()を呼ぶなど。
void BasicAppAE::setupAE() { //pass }
パラメータの取得。必ずしもupdateAE()内でやる必要はない。
void BasicAppAE::updateAE() { color_ = getParameter("Color"); radius_ = getParameter("Radius"); center_ = getParameter("Center"); }
パラメータに基いて描写。
void BasicAppAE::drawAE() { gl::clear(ColorA{ 0.f, 0.f, 0.f, 0.f }); gl::color(color_); gl::drawSolidCircle(center_, radius_); }
Cinderは0.9.0からアンチエイリアスがデフォルトでオフとなっており、またprepareSettings()も廃止されて以下のように渡すようになった。
CINDER_APP(BasicAppAE, RendererGl(RendererGl::Options().msaa(16)), [](App::Settings* settings) { settings->setWindowSize(1280, 720); settings->setFrameRate(30.0f); settings->setResizable(false); settings->setFullScreen(false); })
