AEはCC 2014よりExtensionのHTML5 Panelが導入され、HTML5で様々なことが出来るようになった。またProcessingもProcessing.jsとしてjavascriptに移植されている。
両者を組み合わせることによってAEとProcessingの統合を目指す。
Type: Panel
簡単なUIの説明。
+shiftはshift+clickの意。
リソースに、アクティブなコンポジションの現在のフレームの画像を追加する。
+shift: リソースに、アクティブなコンポジションのワークエリアのシークエンスを追加する。
リソースをファイル単位で追加する。リソースは、画像(loadImageで読み込む、拡張子は'.png', '.gif', '.jpg')、文字列(loadStringsで読み込む、拡張子は'.txt')、
シェイプ(loadShapeで読み込む、拡張子は'.svg')、バイト列(loadBytesで読み込む、拡張子は'.dat')に分類される。
読み込むとUI下部に表示される(画像は左側、それ以外は右側)。
+shift: リソースをフォルダ単位で追加する。
Import: コードを外部ファイルから読み込む(拡張子は'.pde'、'.txt')。
+shift(v1.1.0-): プロジェクトを読み込む(拡張性は'.json')。
Export: コードを外部ファイルに出力する。
+shift(v1.1.0-): プロジェクトを出力する。
Save: コードを保存する。
+shift: コードを上書き保存する。
Delete: コードを削除する。
Folder: 作業フォルダ。クリックするとダイアログが表示されるので、フォルダを指定する。
Subfolder: サブフォルダ(任意)。各シークエンスに対して一つのサブフォルダを割り当てれば管理がしやすい。
File: ファイル名。〇〇○[#####].pngの形で表記する。
任意。レイヤーを選択して、Pickをクリックするとそのレイヤーのコンポジションの名前、レイヤーの名前がComp、Layerに代入される。
レイヤーが指定された場合、フレームレートはそのコンポジションのフレームレートが(仮にsetup()内でframeRate関数を呼んでフレームレートを設定したとしてもその値はキャンバスの描写フレームレートにのみ影響を与える。
従って、マウス等を使用しないのであれば早めに設定しておくとよい)、
描写フレーム数はレイヤーのinPointからoutPointまでのフレーム数が、またそのレイヤーにエクスプレッション制御系のエフェクトが掛けられていた場合その値をコード内で取得できる(「拡張」項で詳細を示す)。
描写を始める。
+shift: 初期化を飛ばして描写を始める。例えば、エクスプレッション制御の値の読み込みには時間がかかる。従って、少しコードを弄ってまたDrawするといった試行錯誤の段階において、
いちいちその読み込みを待つのは時間の無駄である。よって最初に普通にDrawした後は初期化を飛ばしてDrawした方が時間の節約になる。
画はキャンバス内に描写される。Countで現フレームカウントを参照できる。
描写確定時に、マウス位置をポイント制御にベイクするかを決める。
レイヤー選択時に、そのレイヤーのエクスプレッション制御系の値をコードから参照することが出来る。
例えば、ある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}
となる。
上記のエクスプレッション制御と同様の方法で、レイヤー選択時にそのレイヤーのマスクパスを参照することが出来る。
返り値はオブジェクトの配列で、各オブジェクトは各々が一つの頂点を示し
{vertex: Array, inTangent: Array, outTangent: Array}
といった形になっている。ハンドルの接戦の値は、Processingのbezierのコントロールポイントの指定が絶対値なので、頂点からの相対値ではなく絶対値に変換してある。
全ピクセルのアルファにrateを乗ずる。
rate: 0-1
Processingで残像表現をする場合には、背景色を半透明にして上から塗るという方法がとられることが多い。
全体が不透明の場合はそれで良いのだが、半透明を扱っている場合は宜しくない。その場合はアルファ自体に操作を加えたほうが良い。
グリッチする。
type: 'jpg'(default) or 'png'
numberがwidth桁になるまで0で埋める。
例)zfill(13, 5) -> 00013
AE側に値を持っていく。どのエクスプレッション制御にベイクされるかはvalueによる。
Boolean: チェックボックス制御
Number: スライダー制御
[Number, Number]: ポイント制御
[Number, Number, Number]: 3Dポイント制御
[Number, Number, Number, Number]: カラー制御
テキストファイルを読み込む。ファイル名は、作業フォルダ以下にファイルを置いて相対パスで指定するか絶対パスで指定する。
戻り値は読み込めればそのテキストデータ、読み込めなければnull。
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されている。
カメラ情報をProcessing側に持っていくために、カメラ行列等の情報をエクスプレッション制御エフェクトにベイクするプラグイン。
"Create Controls"を実行すると、Field of Viewの値を与える"Camera_Fov"、アスペクト比を与える"Camera_Aspect"、カメラ行列の値を与える"Camera_Row1"、"Camera_Row2"、"Camera_Row3"、"Camera_Row4"が生成される。
単純な例。
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-1.0.0.zip
Win, Mac/ CS5.5-
v1.0.0 - 2014/09/27 初稿