Processing for AE

概要

AEはCC 2014よりExtensionのHTML5 Panelが導入され、HTML5で様々なことが出来るようになった。またProcessingもProcessing.jsとしてjavascriptに移植されている。 両者を組み合わせることによってAEとProcessingの統合を目指す。
Type: Panel

UI

簡単なUIの説明。
+shiftはshift+clickの意。

Add Image

リソースに、アクティブなコンポジションの現在のフレームの画像を追加する。
+shift: リソースに、アクティブなコンポジションのワークエリアのシークエンスを追加する。

追加された画像は、_temp1.png、_temp2.png、…といった形で保存される。
シークエンスで保存する場合は、まず保存するサブフォルダを聞かれる。コンポ名_[#####].pngという形式で保存されるので読み込む際は後述のzfill関数を用いて、コンポ名 + "_" + zfill(frmaeCount, 5) + ".png"といった形で指定すればよい。

Load Resources

リソースをファイル単位で追加する。リソースは、画像(loadImageで読み込む、拡張子は'.png', '.gif', '.jpg')、文字列(loadStringsで読み込む、拡張子は'.txt')、 シェイプ(loadShapeで読み込む、拡張子は'.svg')、バイト列(loadBytesで読み込む、拡張子は'.dat')に分類される。 読み込むとUI下部に表示される(画像は左側、それ以外は右側)。
+shift: リソースをフォルダ単位で追加する。

フォルダ単位で読み込むと、フォルダ直下の該当する拡張子のリソースを読み込む。

Import, Export

Import: コードを外部ファイルから読み込む(拡張子は'.pde'、'.txt')。
+shift(v1.1.0-): プロジェクトを読み込む(拡張性は'.json')。
Export: コードを外部ファイルに出力する。
+shift(v1.1.0-): プロジェクトを出力する。

Save, Delete

Save: コードを保存する。
+shift: コードを上書き保存する。
Delete: コードを削除する。

Code

実際のコードを書き込む。

Folder, Subfolder, File

Folder: 作業フォルダ。クリックするとダイアログが表示されるので、フォルダを指定する。
Subfolder: サブフォルダ(任意)。各シークエンスに対して一つのサブフォルダを割り当てれば管理がしやすい。
File: ファイル名。〇〇○[#####].pngの形で表記する。

Comp, Layer, ✕, Pick

任意。レイヤーを選択して、Pickをクリックするとそのレイヤーのコンポジションの名前、レイヤーの名前がComp、Layerに代入される。 レイヤーが指定された場合、フレームレートはそのコンポジションのフレームレートが(仮にsetup()内でframeRate関数を呼んでフレームレートを設定したとしてもその値はキャンバスの描写フレームレートにのみ影響を与える。 従って、マウス等を使用しないのであれば早めに設定しておくとよい)、 描写フレーム数はレイヤーのinPointからoutPointまでのフレーム数が、またそのレイヤーにエクスプレッション制御系のエフェクトが掛けられていた場合その値をコード内で取得できる(「拡張」項で詳細を示す)。

Draw

描写を始める。
+shift: 初期化を飛ばして描写を始める。例えば、エクスプレッション制御の値の読み込みには時間がかかる。従って、少しコードを弄ってまたDrawするといった試行錯誤の段階において、 いちいちその読み込みを待つのは時間の無駄である。よって最初に普通にDrawした後は初期化を飛ばしてDrawした方が時間の節約になる。

Canvas, Count

画はキャンバス内に描写される。Countで現フレームカウントを参照できる。

Redraw

始めから描写をし直す。

Quit

描写をやめる。

Mouse

描写確定時に、マウス位置をポイント制御にベイクするかを決める。

当然フレームごとにキーフレームを打っていくのでやや時間がかかる。

OK

描写を確定する。

拡張

エクスプレッション制御

レイヤー選択時に、そのレイヤーのエクスプレッション制御系の値をコードから参照することが出来る。 例えば、あるmypointという名前のポイント制御エフェクトがあったとすると、単純にmypoint()とすることで値を取得することが出来る。 すなわち、エフェクトの名前の関数を呼び出せば取得できる。ただし、エフェクトの名前に空白が含まれていた場合は自動的にアンダーバーに変換される。エフェクト名が英数字でない場合は、$p["エフェクト名"]のようにして取得すればよい。 引数は省略すると現在のフレームに対応する値が返る。frameCount - 1のようにフレームナンバーを引数として与えれば(フレームナンバーはinPointからの値で、コンポジションのフレームナンバーとは当然異なる) 当然そのフレームナンバーに対応する値が返ってくる。

レイヤー制御(v1.1.1-)
レイヤー制御では、指定したレイヤーのトランスフォームの値が取得できる。戻り値はオブジェクトで、
レイヤーが2Dのときは
{width: Number, height: Number, position: Array, scale: Array, rotation: Number, opacity: Number}
3Dの時は
{width: Number, height: Number, position: Array, scale: Array, orientation: Array, rotation: Array, opacity: Number}
となる。

このコードの場合、colorにmycolor()を代入して塗りの色に、positionにはmypoint()を代入し円の中心位置とし、円を描いている。 従って動画のようにブラシストロークっぽく描写される。

マスクパス(v1.1.0-)

上記のエクスプレッション制御と同様の方法で、レイヤー選択時にそのレイヤーのマスクパスを参照することが出来る。
返り値はオブジェクトの配列で、各オブジェクトは各々が一つの頂点を示し
{vertex: Array, inTangent: Array, outTangent: Array}
といった形になっている。ハンドルの接戦の値は、Processingのbezierのコントロールポイントの指定が絶対値なので、頂点からの相対値ではなく絶対値に変換してある。

マスクパスの名前が"ら"なので"$p["ら"]()"のようにしてパスを取得している。例では単純にベジェ曲線を描いているだけ。

multAlpha(rate)

全ピクセルのアルファにrateを乗ずる。
rate: 0-1

Processingで残像表現をする場合には、背景色を半透明にして上から塗るという方法がとられることが多い。 全体が不透明の場合はそれで良いのだが、半透明を扱っている場合は宜しくない。その場合はアルファ自体に操作を加えたほうが良い。

glitch(type)

グリッチする。
type: 'jpg'(default) or 'png'

zfill(number, width)

numberがwidth桁になるまで0で埋める。
例)zfill(13, 5) -> 00013

toAE(key, value) (v1.1.0-)

AE側に値を持っていく。どのエクスプレッション制御にベイクされるかはvalueによる。
Boolean: チェックボックス制御
Number: スライダー制御
[Number, Number]: ポイント制御
[Number, Number, Number]: 3Dポイント制御
[Number, Number, Number, Number]: カラー制御

Circleクラスのwriteメソッド内でtoAEを用いて円の位置を出力している。

loadFile(filename)(v1.1.0-)

テキストファイルを読み込む。ファイル名は、作業フォルダ以下にファイルを置いて相対パスで指定するか絶対パスで指定する。
戻り値は読み込めればそのテキストデータ、読み込めなければnull。

loadObj(filename)(v1.1.0-)

objファイルを読み込む。ファイル名は、作業フォルダ以下にファイルを置いて相対パスで指定するか絶対パスで指定する。
戻り値はオブジェクトで、
{vertices: Array, faces: Array}(v1.1.0)
{vertices: Array, textures: Array, normals: Array, faces: [{vertices: Array, textures: Array, normals: Array}]} となっている。facesは面データの配列で、各々の面データはオブジェクトで
{vertices: Array, textures: Array, normals: Array}
といった構造になっており各々頂点、テクスチャ、法線データのインデックスを示す。objファイルのインデックスは1から始まるが、配列の構造に合わせて0から始まるようにするため-1されている。

Plugin

AE2Processing(v1.1.0-)

カメラ情報をProcessing側に持っていくために、カメラ行列等の情報をエクスプレッション制御エフェクトにベイクするプラグイン。
"Create Controls"を実行すると、Field of Viewの値を与える"Camera_Fov"、アスペクト比を与える"Camera_Aspect"、カメラ行列の値を与える"Camera_Row1"、"Camera_Row2"、"Camera_Row3"、"Camera_Row4"が生成される。

基本的にカメラに関する情報は、
perspective(Camera_Fov(), Camera_Aspect(), 10, 50000); beginCamera(); resetMatrix(); float[] row1 = Camera_Row1() , row2 = Camera_Row2() , row3 = Camera_Row3() , row4 = Camera_Row4(); applyMatrix(row1[0], row2[0], row3[0], row4[0], row1[1], row2[1], row3[1], row4[1], row1[2], row2[2], row3[2], row4[2], 0, 0, 0, 1 ); endCamera();
のようにして与えればよい。

単純な例。

上のエクスプレッション制御の例の応用編。今回はカラー制御をmycolor_1からmycolor_10の10個、ポイント制御も同様にmyposition_1からmyposition_10までの10個を用意してあり各々は適当にwiggleで変動させてある。 いちいち、mycolor_1()、mycolor_2()、…と書いていくのは面倒なので上記コードでは楽をしてある。エクスプレッション制御の値取得用の関数やglitch関数は元より、backgroundといった関数はProcessingオブジェクトのメソッドとして定義してある。 そして上のProcessingのコードは当然一度Javascriptのコードにコンパイルされるわけであるが、その際にそういったグローバル関数は、size(1280, 720) -> $p.size(1280, 720)のように変換される。 つまり、$pがProcessingオブジェクトを指しているわけである。従ってそれを利用している。
D3.jsも一応入れてあるので、気軽にドロネー図が描ける。結局はJavascriptのコードに変換されるので、Javascript的に書いても問題はない。
参考: http://bl.ocks.org/mbostock/4341156
単純なパーティクルシステム。エクスプレッション制御を大量に使ってるので、アニメーションプリセットをご利用ください。

Download

Processing

Processing-1.1.1.zxp
AEはExtension Managerにまだ対応していないので各自解凍して、
Winの場合は、
C:\<username>\AppData\Roaming\Adobe\CEP\extensions
Macの場合は、
~/Library/Application Support/Adobe/CEP/extensions
に入れてください。

v1.1.1 - 2014/10/04 loadObjの仕様変更、Layer Controlの対応
v1.1.0 - 2014/09/27 プロジェクト、マスクパス、toAE、loadFile、loadObjの実装、座標系の変更
v1.0.0 - 2014/07/26 初稿

AE2Processing

AE2Processing-1.0.0.zip
Win, Mac/ CS5.5-

v1.0.0 - 2014/09/27 初稿