Skip to content

Latest commit

 

History

History
486 lines (324 loc) · 28.2 KB

File metadata and controls

486 lines (324 loc) · 28.2 KB

構造定義によるモーショングラフィックス制作:After EffectsとPythonの連携手法

🗓️ 作成日:2025年5月8日
🖋️ 作成者:山口 陽介

1. はじめに(Introduction)

🔍 用語と基本概念の整理

以下に、本稿で頻出する専門用語の簡易定義を示す。詳細な技術的定義は各章にて適宜補足する。

  • 構造主導型(Structure-driven):GUI操作ではなく、コードで定義されたデータ構造に基づいて映像を生成する方式
  • ベジェパス:図形を滑らかに構成するための制御点付きの曲線データ。After EffectsのShape Layerで使われる基本形式。
  • JSON(JavaScript Object Notation):データ構造を記述するための軽量なテキストフォーマット。PythonとAE間の中間ファイル形式として使用。
  • JSX(ExtendScript):After Effectsでの自動制御に用いられるJavaScriptベースのスクリプト言語。
  • モーフィング:ある形状から別の形状へ連続的に変形させるアニメーション手法。本構想ではベジェ構造を介して制御する。
  • GUI(Graphical User Interface):ユーザーがマウス等で視覚的に操作するインターフェースの形式。AEはこの形式を採用している。

本稿では、Adobe After Effects(以下AE)とPythonという異なる性質のツールを連携させ、GUI主導型制作に代わる「構造主導型」のモーショングラフィック制作環境を提案する。

AEは高度な視覚表現に適した編集環境を提供する一方で、制御理論や数理的アプローチを取り入れた動作設計には根本的な制約が存在する。GUIによる直感的な操作は優れているが、複雑な構造を繰り返し制御したり、外部データと連動させたりといった応用においては限界が顕著になる。

AE内部のExpressionやExtendScriptといった仕組みも試みられてきたが、いずれもモダンな構造設計や抽象的制御には適しておらず、柔軟な拡張や再利用を行うには制約が大きかった。

こうした課題意識から導き出されたのが、「構造定義・制御はPython、描画はAEに任せる」という明確な役割分担である。

Pythonは数値処理、幾何演算、外部アプリ連携、データ可視化などに強く、本プロジェクトではすべての図形構造をベジェパスとしてPythonで定義・構築。AEにはその構造情報をJSONで受け渡し、描画のみを担当させる設計思想を採用した。

この方法により、GUI操作では実現困難な図形の動的生成や変形、構造ベースのモーフィングアニメーションが理論に基づいて構築可能になった。さらに、構造の抽象化や関数化、構成の再利用が可能となり、「描画装置としてのAE」「構造設計ツールとしてのPython」という新たな連携モデルが成立した。


以下に、従来のAE制作環境と本構想による構造的アプローチとの違いを比較する:

観点 従来(AE中心) 提案(AE + Python連携)
制作手法 GUI操作中心 コードによる構造生成と制御
言語環境 ExtendScript(Java 1.5相当) Python 3(最新構文・豊富なライブラリ)
構造の抽象化 困難(手動パス編集) 関数・データ構造で定義・再利用可能
外部連携 限定的(AE内完結) 他アプリ/外部信号とリアルタイム連携
モーション制御 タイムライン編集または簡易式 幾何演算や数理モデルで駆動

次章では、こうした発想に至る背景と、従来環境で直面した課題について詳述する。

2. 背景と課題意識(Background)

従来、映像制作における構造的制御はAE(Adobe After Effects)内部で完結する方法に依存してきた。AEはGUIによる視覚的操作に優れており、モーショングラフィックスの制作においても定評がある。
しかし、制御工学的な構造設計や複雑なアルゴリズム駆動型の動作を必要とする場合には、以下のような明確な限界が存在した:

  • 操作の属人性:GUIベースでは、同じ構造を再現するのに都度操作が必要で、再利用性や自動化に乏しい。
  • 記述力の限界:AE Expressionでは簡易的な数式制御は可能だが、複雑なロジックを構築するには不向き。
  • 開発環境の時代遅れ:ExtendScript(JavaScript 1.5相当)に基づくAEスクリプトは、現代的なプログラミングパラダイムやデバッグ機能に対応していない。

たとえば、図形の自動配置、動的なベジェ変形、複数条件に応じた生成制御などを行う場合、AE単体では実現が困難である。Expressionの階層的構造も限られており、構造の動的切り替えや高度な再帰ロジックを実装することは難しい。


🧩 経緯:JavaScriptからPythonへ

開発当初はAEの標準機能を活かしつつ、ExpressionおよびExtendScriptをベースとした実装を模索した。特にベジェパスやトランスフォームの動作はAE内部で記述可能であり、試作段階では一定の成果も得られた。

しかし、以下の点で根本的な壁に突き当たる:

  • 言語自体が古く、オブジェクト指向関数の再利用性が貧弱
  • エラー時のトレースやログ出力が不十分
  • JSXエディタの補完や文法支援が弱い

これを受けて、構造設計そのものを外部環境に移す方針へ転換。制御設計や構造生成をより柔軟に扱うために、Pythonの導入が決定された。


🚀 Python導入の意義

Pythonは以下の理由で導入が決定された:

  • 演算処理に強い:ベクトル・行列処理、信号解析、補間処理などが簡潔に記述可能
  • 汎用的なデータ操作:JSON、CSV、画像、音声など多様なデータ形式にネイティブ対応
  • 豊富なライブラリ資源:NumPy、OpenCV、SciPy、Pillow、TensorFlow など
  • 他アプリとの連携性:BlenderやTouchDesignerなど、Python制御を前提とした設計

また、図形をベジェ構造(vertices / inTangents / outTangents)として構造体で定義できることにより、動的なパス生成やモーフィング処理も含めて全体構造を関数的に制御できるようになった。


🔁 GUIから構造へ:発想の転換

本構想の根底には、「GUI操作による手作業」から「構造定義による設計」への転換がある。

GUI的な操作手順:

  1. ペンツールで図形を描く
  2. タイムラインで動作を付ける
  3. キーフレームでアニメーションを制御

に対し、構造的設計では:

  1. Python関数で点群を生成
  2. ベジェ構造に変換し、モーフパスを構築
  3. JSON化してAEに送り、動作を描画させる

この発想の違いにより、映像制作が再利用可能な設計ベースのものとなり、複雑な変形・連携・再構成が可能になる。


Python導入の意義

また、図形をベジェ構造(vertices / inTangents / outTangents)として構造体で定義できることにより、動的なパス生成やモーフィング処理も含めて全体構造を関数的に制御できるようになった。

さらに、既存のPythonとAfter Effectsの連携手法は、主に「素材管理」や「一括レイヤー生成」など、作業効率化やツール的活用に留まることが多い。これに対し、本構想は「映像を構造として設計する」という視点に基づき、構造定義・制御・描画を明確に分離し、再利用可能なデータ構造として設計されている点で、従来アプローチとは本質的に異なる。制作手段ではなく制作思想のレベルでの転換を提示している点に、本提案の独自性がある。


次章では、これらの課題に対する具体的な解法として設計された、構造分離型の4フェーズ制御システムの全体像を紹介する。

3. 提案システムの概要(System Overview)

本稿で提案する「AE + Pythonによる構造的映像生成環境」は、構造定義・ロジック処理・描画制御の役割を明確に分離し、それぞれを最適な技術スタックで担わせるシステムである。

このシステムは、次の4つの明確なフェーズで構成されている:

[1] 生成(GEN)  ↓ Python: 図形点群生成(関数的構造)

[2] 構造化(BUILD)  ↓ Python: ベジェ → AEレイヤーデータ整形

[3] データ出力(EXPORT)  ↓ Python: JSON形式で保存(中間ファイル)

[4] 描画実行(DRAW)  ↓ After Effects: JSXでJSON読込 → レイヤー描画


📐 フェーズ構成の概要

① GEN:構造の生成

  • Python側で任意の図形(円、星、多角形、画像ベースの形など)を関数的に生成
  • 生成された図形は、ベジェ構造(vertices, inTangents, outTangents)として記述
  • モーフィング対応のため、頂点数や頂点順序の整合性を考慮

② BUILD:AE用構造化

  • ベジェ構造をもとに、AEが理解できるレイヤー形式の辞書構造に変換
  • レイヤー名、塗り設定、位置指定、スタイルなども含めたデータに組み上げ
  • build_shape_layer() 関数などにより一元化

③ EXPORT:中間形式として出力

  • 最終的な構造データをJSONとして保存
  • このJSONがAEへの描画指示の「設計図」として機能
  • ファイル構造を意識した出力(例:/s04_export_json/ae_data.json

④ DRAW:AEでの視覚描画

  • JSXスクリプト(load_json_ae.jsx)により、AEがJSONを読み込みレイヤーを生成
  • ShapeLayerとしてベジェ構造を復元し、ビジュアルとして具現化
  • 描画処理そのものはAE標準の仕組みを利用(スクリプト自動実行)

この構造的分離により、After Effectsのタイムライン編集だけでは困難だった動的構造生成や外部データとの連携が、関数とデータ定義を通じて柔軟に設計可能になった。視覚化の手段としてのAEと、構造設計エンジンとしてのPythonの明確な役割分担が、再利用性と拡張性を大幅に高めている。 この構造により、AEへの依存を最小限にとどめながら、構造設計と表現構築の自由度が飛躍的に高まった。例えば、AE上では手動で困難なランダム配置、動的な点数制御、複雑なモーフィング制御などがPythonコードとして柔軟に定義可能である。


📋 補足:フェーズ対応表(全体まとめ)

フェーズ 主担当 主な内容
GEN Python 図形の設計・生成(ベジェ構造)
BUILD Python AE構造への整形(スタイル・位置含む)
EXPORT Python JSONとして中間出力(AE連携の共通形式)
DRAW After Effects JSON読み込み・レイヤー描画(視覚表現の最終段)

🧠 「構造 → 描画」への転換思想

この方式は、「AE内部で操作しながら映像を作る」のではなく、「Pythonで構造を設計し、それをAEに描かせる」という逆転の発想である。

たとえば以下のような思考フローが成立する:

数学的に定義した正12角形 → 色・位置付き構造に変換 → JSON出力 → AEで描画
音データをスペクトルに変換 → 点群を生成 → アニメーション構造 → AEで動作表示

構造と表現を明確に分けることで、制御の自由度、連携の柔軟性、再利用性がすべて飛躍的に高まったと言える。


次章では、提案システムを構成する各フェーズの設計方針や、モジュール構造について詳しく掘り下げていく。

4. 設計指針と構造的特徴(Design Principles)

本システムの設計は、「表現のための構造」「制御可能なデータ設計」「拡張可能なシステム分離性」の3点を主軸として構築された。

従来の映像制作は「結果(映像)」に向けて操作するプロセスであったのに対し、本構想では「構造(データ)を設計し、描画装置に渡す」という逆転のアプローチを採っている。


🧱 構造定義の基本単位:ベジェパス

すべての図形データは、After Effects と互換性のあるベジェ曲線構造を核に一元管理されている:

  • vertices:頂点の座標リスト
  • inTangents:各点への内側制御点
  • outTangents:各点からの外側制御点
  • closed:パスが閉じているかどうかのフラグ(省略可)

このデータ構造に統一することで、以下のような利点を実現している:

  • 多様な図形を同一構造で管理(円、多角形、星型、自由曲線)
  • 頂点数と順序を固定すれば形状モーフィングが可能
  • JSON形式への変換が容易 → AE連携がシンプルに

🧩 モジュール構成と責務分離

設計上、Python側のコード群は機能別にフォルダとモジュールに分離され、明確な責務を持っている:

モジュール 役割
shape_gen.py 点群(ベジェ形式)を生成(円・多角形・星など)
build_layer.py ベジェ構造をAEレイヤー構造(辞書)へ変換
write_ae_json.py AE用データをJSON形式で出力
load_json_ae.jsx AE側でJSONを読み取り、レイヤーとして描画
run_aefx_json.py AfterFXをCLIで起動し、自動描画スクリプトを実行

この分離により、各処理のデバッグ性/再利用性/拡張性が大きく向上し、後述のような応用展開にも耐えうる柔軟な基盤となっている。


📄 JSONによる中間形式の利点

AEとの連携は、最終的にJSONファイルとして出力される構造データによって行われる。
この中間形式の採用は、設計上以下のような利点を生んでいる:

  • AEをブラックボックス化可能:設計側と描画側を完全に分離
  • 人間が読める構造:デバッグ、整形表示、ログ出力に便利
  • 他ソフトでも扱える:TouchDesignerやUnityなどJSON対応アプリとの互換がある

以下は、実際に出力されるAE用JSONデータの一例である:

{
  "name": "Circle_A",
  "type": "bezier",
  "path": {
    "vertices": [[0, -100], [100, 0], [0, 100], [-100, 0]],
    "inTangents": [[30, 0], [0, -30], [-30, 0], [0, 30]],
    "outTangents": [[-30, 0], [0, 30], [30, 0], [0, -30]]
  },
  "style": {
    "fill": true,
    "color": [1, 0.2, 0.2],
    "opacity": 100
  },
  "transform": {
    "position": [960, 540]
  }
}

このように、構造と描画情報が明確に分離された形式で定義されており、AE以外の環境への応用も視野に入る。


🧠 データ主導の再利用性

「GUIで作る」から「構造を設計する」へと発想を転換したことで、各データはロジックで再利用・再構築可能な形式となった。

例えば:

  • 同じ点群をスケーリングして複数サイズを自動生成
  • 色・透明度・位置をパラメータ化し、ランダム配置可能
  • GUIや外部信号によって再構築・再出力もできる設計
  • この設計は、自動生成/構造モーション/学術応用/教育/演出テンプレート化など多様な応用にも発展可能である。

次章では、これらの設計を土台として展開できる応用表現と、他ツールとの連携可能性について具体的に示していく。

5. 構造表現の応用とシステム拡張(Applications and System Integration)

本章では、本構想の技術基盤と応用可能性を総合的に整理する。
実装済みのアニメーション手法から、GUIやAIによる拡張、さらに他アプリケーションとの連携までを段階的に示すことで、構造設計主導の映像制作の柔軟性と将来性を明らかにする。


5.1 実装ベースの応用例

🌀 ベジェモーフィングアニメーション

  • 同一頂点数・順序で定義された図形間を lerp_points() で補間
  • AE側で path.setValueAtTime() を用いて滑らかな時系列変化を描画
  • 構造ベースの動的変形が、理論に基づいて実装可能

🔊 信号解析・音響応答表現

  • NumPy、SciPy、librosa等により音声スペクトルを抽出し、構造変化にマッピング
  • センサー入力(MIDI、加速度、環境音)を構造制御に活用
  • Pythonを介してAEに反映することで、音と映像の同期演出を実現

🖼️ 画像入力ベースの構造生成

  • OpenCV等を使い、輪郭抽出→点群→ベジェ変換のパイプラインを構築
  • 明度や色相を構造変形や塗りスタイルに反映させ、画像駆動の図形生成が可能

5.2 発展的構想と将来的展開

🎛️ GUI操作による設計支援

  • TkinterやPyQtでインタラクティブな構造設計ツールを開発可能
  • 色・サイズ・形状・配置などのパラメータを視覚的に操作し、そのままAE用JSONへ変換

🧠 高度な解析処理・AI統合

  • 周波数解析、統計解析、クラスタリングを応用し、構造を自動分類・変形
  • TensorFlowやPyTorchと連携すれば、生成モデルによる形状設計や、構造の動作予測も可能
  • Mediapipeなどを使えば、映像からのジェスチャ検出による構造制御も視野に入る

5.3 他ツールとの統合と連携可能性

本構想は、構造定義をJSON形式で記述し、制御をPythonで実行するため、様々なアプリケーションと連携可能である。以下に主な連携先を分類して示す:

🎥 映像・アニメーション系

ツール 連携内容
After Effects JSX + JSON による構造描画制御。本構想の主出力先。
Blender Python API により3D構造生成・アニメ制御が可能。双方向連携も対応。
TouchDesigner Python + OSC によるリアルタイム構造注入・ビジュアル同期が可能。
Nuke(Foundry) ノード構造にPythonスクリプトで構造情報を注入可能。AEとの併用にも適応。

🎧 音響・センサー・信号系

ツール 連携内容
Ableton Live + Max for Live 音響信号の解析結果を構造パラメータへフィードバック。
Pure Data / MaxMSP OSC経由でセンサー値をリアルタイムに構造制御に適用可能。
Open Sound Control(OSC) 双方向通信により、任意の信号から構造への変換が可能。

🛠 CAD・設計・モデリング系

ツール 連携内容
Fusion 360 スクリプトベースの構造設計からAEパスへの変換が可能(制限あり)。
FreeCAD Pythonスクリプトでの構造設計からAEデータへの応用が可能。
Rhino / Grasshopper 幾何構造データをモーショングラフィックスへ変換するブリッジツールとして機能。

🧠 AI・解析ライブラリ

ライブラリ 連携内容
OpenCV / Mediapipe 映像・ジェスチャ検出から構造生成や制御へ応用。
TensorFlow / PyTorch 生成モデルや構造分類による自動設計・動作予測が可能。
scikit-learn / statsmodels 統計的手法による構造の抽象化・構成パターン分析が可能。

5.4 技術的中核と設計思想

このような連携や応用が可能である理由は、本構想が以下の設計思想を採用しているためである:

  • 構造情報をJSONで記述:AE以外のソフトでも読めるデータフォーマットを標準化
  • 制御・演算をPythonで記述:構造生成、信号処理、外部通信、GUIまで全てを網羅できる拡張性
  • 描画装置としてAEを用いる一方、設計と制御は独立して外部管理

これにより、After Effectsに依存しすぎず、構造主導・制御主導の映像制作環境として発展可能な柔軟さが確保されている。


最終章では、本研究の成果を総括し、今後の拡張方針や実装の方向性について展望を述べる。

6. おわりに・今後の展望(Conclusion & Future Works)

本稿では、After Effects(AE)とPythonを連携させることで、従来のGUI中心の映像制作環境では困難だった「構造定義型」のモーショングラフィック生成を実現するシステム構想を提案・実装・検証してきた。

Pythonによって図形構造を論理的に設計し、それを中間形式(JSON)でAEに渡すという発想は、映像制作における制御性・再利用性・拡張性を飛躍的に向上させるものである。GUI手動操作に依存せず、アルゴリズムに基づく形状生成、構造変形、動作制御が可能になったことは、本研究の核心的成果といえる。


✨ 成果の要点

  • AEとPythonを明確に役割分担(AE=描画装置、Python=構造エンジン)
  • 全構造をベジェ形式で一元管理し、モーフィングや多形状生成が容易に
  • JSONによる中間形式で、他アプリとの相互運用性を確保
  • モジュール設計により機能拡張・再利用が容易
  • 信号・画像・音声・AI・センサーなど、外部データとの統合的な構造制御の道筋を構築

🚧 今後の展望

今後は、本構想をさらに発展させ、以下の方向性を目指す。

1. GUI層の実装

  • Pythonでの図形構造設計を、ノンプログラマでも扱えるようなGUI操作ツールへと昇華
  • 直感的なレイヤー配置、形状変形、色・動作パラメータ設定などを可能に

2. リアルタイム連携の強化

  • OSCやWebSocketなどを活用した即時構造変更とAE反映
  • センサー/音声/インタラクティブデバイスとの双方向システム化

3. AI統合

  • ジェネレーティブAI(例:構造予測、形状提案、動作自動生成)との連動
  • 解析AIによるパターン分類や表現最適化

4. 教育・研究分野での活用

  • 数理造形や構造工学、ビジュアルプログラミングの教材としての活用
  • 表現・設計・プログラムが融合した統合的な創作学習環境の構築

5. 出力形式の多様化

  • AE以外の3D・ノードベース・Webベース環境への拡張(Blender, Unity, WebGLなど)
  • PDF/SVG/映像ファイルなど、構造→ビジュアル変換系のマルチ対応

💬 結語

本研究は、「表現は構造から生まれる」「構造は定義可能である」という思想のもと、映像制作における新しいアプローチを提示したものである。構造を中心とした映像制作という視点は、制御・アルゴリズム・解析・演出のあらゆる領域を横断し得る汎用性と拡張性を持っている。

AEという映像描画環境と、Pythonという構造設計環境が交わることで生まれたこのシステムは、従来の制約を越えた、新しい“構造主導の創作環境”の出発点となり得るだろう。

今後も本構想の深化と応用を通じて、創造的な表現技術の進化に貢献できることを期待する。

なお、制作に関する体制や筆者の技術背景については、付録A・Bにて補足する。

A. 開発体制と制作プロセス

本構想は、筆者個人による独自設計・実装により構築された。
以下に、開発背景と環境構築のプロセスを簡潔に記録する。

考案者スキル

  • C言語、VB等の汎用的言語の基礎
  • LabVIEWによる要素部品製造自動化システムの構築経験
  • 制御・電気系の工学的知識を背景とした実装指向の発想

開発スケジュール(2025年)

  • 4/27:AE ExtendScript(JSX)による初期制御の検証開始
  • 5/05:Pythonベースの構造生成エンジンの実装開始(習得を並行)
  • 5/08:AE + Python 連携型ベジェ描画システムのコア構成が完成

AI支援の活用

開発の過程では、構造設計・スクリプト構文・整形アルゴリズムの検証にChatGPTを積極的に活用。
非GUIな表現環境の構築において、試行錯誤の高速化と設計整合性の担保に大きな効果をもたらした。

B. 筆者略歴と技術実績

氏名:山口 陽介

筆者は元・株式会社安川電機にて、エンコーダー要素技術研究開発部に所属。
技術者として15年以上の経験を有する。
在職中に以下の技術実績を有する:

その後、映像クリエイターとして独立し、工学的背景を活かした表現研究と開発に従事。

専門分野・実績概要

  • 専門分野:電気/機械/波動光学/幾何光学/制御工学/信号処理/プログラミング言語(C, C++, VB, LabVIEW)

  • 主な業務経験

    • 高効率工場設備設計・開発
    • 光学式エンコーダー高精度調整器の設計
    • 周波数解析を応用した補正値生成拡張ソフトの設計
    • 光ディスク(CD/DVD/Blu-ray)関連の光学系要素技術
    • ハードウェア環境試験・評価の設計と運用

📅 近年のスキル習得履歴(2024〜2025)

本構想に関連するソフトウェア/スクリプト言語の学習は、すべて構想立案・実装と並行して実施されたものである。以下に、主な習得履歴を記す。

  • 2024年12月15日:After Effects の操作・基礎的な編集手法の習得を開始。
  • 2025年4月17日:AE拡張制御への関心から、ExtendScript(JSX)の学習を開始。
  • 2025年4月27日:初の自作JSXスクリプトを試作(JavaScript/Javaについては未経験レベルからの導入)。
  • 2025年5月4日:本構想の実装開始と並行して Python を初めて使用。
  • 2025年5月8日現在:Python使用歴は実質4日ながら、構造的システムを用いたモーショングラフィック制作環境の試作を完了。

このように、キャリア中盤以降のスキル転換として、本研究は既存の工学的経験と新たな表現技術の融合を目指す取り組みである。