ofxTimelineは、openFrameworksでタイムラインエディタインターフェースを使用する事が出来るシンプルなアドオンです。このフレームワークを使用する事で、openFrameworksで作られたアプリケーションの中で時間軸に沿ったシーケンスを編集し、そのタイムシーケンスを使って変数のコントロールを行う事が可能になります。
もしもAfter EffectsやFinal Cut、Blenderなどのタイムライン編集に馴染みがあれば、ofxTimelineは快適に使用する事が出来るでしょう。ほんの数行のコードで、スムーズに補完されたカーブ、カラー、ビデオ、オシレーター、オーディオ、3D空間中のカメラなどのタイムラインシーケンスを作る、エディタを使用する事が可能です。
また、サポートされていないタイムベースのデータを編集する為にカスタムトラックを作成し、ofxTimelineを拡張する事も可能です。カスタムトラックをデザインするをご参照ください。
Copyright 2011-2012 James George Co-developed by YCAM InterLab
Licensed under the Apache License
ofxTimelineの開発は、クリエイティブコーディングの環境の中で、どのようにGUIベースのツールを作り、メディアを使って創造しインタラクションする新しい方法を切り開く事が出来るか、に対するリサーチの一環として制作されています。
タイムラインのインターフェースは一般的には、After EffectsやCinema4Dといった、高価なアプリケーションの中で見る事が出来ます。そしてそれらは時に非常に複雑で、またオープンソースではありません。 オープンなタイムラインインターフェースの実装も存在しますが、それらはBlender, VLMC and Audacityといった巨大なプロジェクトに組み込まれてしまっていて、非常に才能にめぐまれたプログラマー達にとってさえも、再利用して何かを作る為に、それらのアプリケーションから特定の部分を抽出するのは困難な作業です。 さらには、そういったプロジェクトのライセンス、GPL licensingは、商業利用には限定的なライセンスで、openFrameworksや、Processing、Cinderといったクリエイティブコーディングのプラットフォームに組み込むには難があります。
そういったクリエイティブコーディングのコミュニティが、直感的なアプリケーションを作り出す為の数多くの小さなコンポーネントを開発しようとしたら、どのような新しい可能性を切り開く事が出来るでしょうか。 クリエイティブコーダーと、デザイナーやアーティストとの間にどのようなコラボレーションが産まれるでしょうか。
- ほんの数行のコードでopenFrameworksのプロジェクトに組み込む事が可能
- ミリ秒単位のタイミング精度、時間のドリフトがない再生機能
- カーブ、カラー、サムネイル付きのビデオトラックといった、複数のタイプのトラックが初めから組み込まれています
- マルチセレクトや、コピー＆ペースト、ポイントへのスナップ、十字キーでの細かな操作など、効果的な編集を可能にする、使いやすい操作性
- 全体を見渡しながらの編集や、微細な時間を詳細に編集可能にするズーム機能
- XMLファイルへの保存と読み込み
- 複数ページをサポート
- BPMの表示機能と、それに連動したスナップ機能ップさせる事が可能
- 簡単に独自のタイプのトラックを追加する事が可能
まず初めに、ビデオチュートリアルを下記のURLからご覧になることが出来ます： https://vimeo.com/59653952
タイムラインをページごとに分ける事が出来ます。それぞれのページには、それぞれ別々のトラックのセットが入っています。
ヘッダーには、分、秒、ミリ秒の目盛りが表示されています。ヘッダーの中をクリックすると、再生ヘッドをスクラブする事が可能です。タイムラインを縦断している緑色のラインは現在の再生ヘッダの位置を、赤いラインはマウスカーソル上の位置を示しています。
この目盛りの下に配置されたバーでは、タイムライン上のイン点とアウト点をドラッグして設定する事が出来ます。このイン点とアウト点で設定されたエリアが、再生されるエリアになります。
このタイムラインの主要な部分である、複数の編集可能なトラックが表示された部分です。各トラックはサイズ変更する事も可能です。
トラック最下部のコントロールを用いてズームインすることで、時間をより厳密にコントロールする事が可能です。
Simple Curves shows how to use two keyframes and a switcher to animate and color a cube
Simple Curvesでは2つのキーフレームと1つのスイッチャーを使用し、キューブの色と動きをコントロールする例を紹介しています。
Audio Waveformでは、オーディオトラックの使い方を紹介しています。
Video Rendererでは、タイムラインとシェーダーを使用した、シンプルなビデオエフェクトアプリケーションの作り方を紹介しています。映像ファイルをアプリケーションにドラッグアンドドロップし、加工、編集されたフレームをイメージのシーケンスとして
書き出してみてください。
Multi-timelineでは、フラグを使用して同じアプリケーション内の他のタイムラインの再生を制御する方法を紹介しています。
ofxTimelineではいくつかのホットキーが設定されています。
OS Xでは、GLUTがCOMMAND+C、COMMAND+V、そしてCOMMAND+Sの操作を取得してしまいます。ofxTimelineには、このデフォルトの関連付けを解除し、ofxTimeline上で使えるようにする機能を備えています。下記のコードをsetupの中に加えてください。
ofxTimeline::removeCocoaMenusFromGlut("myAppName");
ノート：OS Xではコマンドキーを使用します。LinuxとWindowsではCTRLキーを使用します。
| 機能 | ショートカット |
| 選択範囲をカット | command+x |
| 選択範囲をコピー | command+c |
| 選択範囲にペースト | command+v |
| 元に戻る | command+z |
| やり直す | shift+command+z |
| フォーカスされたトラック上の全てのキーフレームを選択 | command+a |
| フォーカスされたトラック上の選択範囲に全てのキーフレームを加える | command+shift+a |
| 選択された全てのキーフレームを削除 | delete or backspace |
| 選択されたキーフレームを少し移動 | arrow keys |
| 選択されたキーフレームをもう少し移動 | shift+arrow keys |
| フォーカスされたトラックを開く | alt+e |
| 全てのトラックを畳む | alt+c |
| トラックのサイズを均等にする | alt+shift+c |
timelineをダウンロードするためには、まずターミナルを開き、下記の様に入力します。
$cd of_0073_osx_release/addons
$git clone https://github.com/YCAMInterlab/ofxTimeline.git
$cd ofxTimeline/
$./clone_addons.sh
これで、必要なアドオンをダウンロードする事が出来ます。もしもいくつかのアドオンが既にインストール済みであった場合は、そのアドオンが上書きされる事はありません。
of_0073_osx_release/projectGenerator/に入っているProjectGeneratorを開きます。
プロジェクトに名前をつけ、addonsタブから、下記のアドオンを選択します。
- ofxTimeline
- ofxTimecode
- ofxMSATimer
- ofxTextInputField
- ofxRange
- ofxTween
上記を選択し追えたら、BACKで一つ前の画面に戻り、Generate projectをクリックします。
Windows上のVC2010を使われている場合は、Properties -> Configuration Properties -> Build Events -> Post-Build events -> Command Lineの順に選択し、下記のbuild eventをコピー＆ペーストしてください。
xcopy /e /i /y "$(ProjectDir)......\export\vs2010*.dll" "$(ProjectDir)bin" & xcopy /e /i /y "$(ProjectDir)......\addons\ofxTimeline\libs\sndfile\redist*.dll" "$(ProjectDir)bin"
MacOSXでAudioTrackを使用する場合は、OpenAL.frameworkをプロジェクトに加える必要があります。
testApp.hファイルで下記を加えます：
#include "ofMain.h"
#include "ofxTimeline.h" //add timeline include
class testApp : public ofBaseApp{
public:
ofxTimeline timeline; //inside of the class add a timeline
testApp.cppのsetupの中で、タイムラインのセットアップを行います：
//--------------------------------------------------------------
void testApp::setup(){
timeline.setup(); //registers events
timeline.setDurationInSeconds(60); //sets time
timeline.setLoopType(OF_LOOP_NORMAL); //turns the timeline to loop
//add a track
timeline.addCurves("MyCircleRadius", ofRange(0, 200));
drawもしくはupdateの中で値を読み出します。
//--------------------------------------------------------------
void testApp::draw(){
//the value of changingRadius will be different depending on the timeline
float changingRadius = timeline.getValue("MyCircleRadius"),
//use the value for something amazing!
ofCircle(mouseX, mouseY, changingRadius);
//don't forget to draw your timeline so you can edit it.
timeline.draw();
}
ofxTimelineには、一般的なタイムラインで必要になる数種類のタイプのトラックが標準で組み込まれています。
bangはシンプルな時間のマーカーで、再生ヘッドがマーカーを通過する時にイベントを送る事ができます。bangトラックを使用するには、下記の様にしてbangイベントを取得するクラスを使う必要があります。
MyClass.h
ofxTimeline timeline;
void receivedBang(ofxTLBangEventArgs& bang);
MyClass.cpp
//--------------------------------------------------------------
void MyClass::setup(){
timeline.addBangs("trigger particles");
ofAddListener(timeline.events().bangFired, this, &testApp::receivedBang);
}
//--------------------------------------------------------------
void MyClass::receivedBang(ofxTLBangEventArgs& bang){
ofLogNotice("Bang fired from track " + bang->track.getName());
if(bang.track->getName() == "trigger particles"){
particleGenerator.start(); //some example response
}
}
.
継承関係：ofxTLTrack -> ofxTLKeyframes -> ofxTLBangs
Curvesを使うと、補完機能の付いたキーフレームを使い、タイムラインに沿って値を最小値と最大値の間でスムーズに変化させる事が出来ます。
タイムライン上のキーフレームを右クリックすると選択ウィンドウが表示され、補完の方法を変更する事が出来ます。補完の方法は、ofxCurvesの、Penner方程式をベースにしています。
継承関係: ofxTLTrack -> ofxTLKeyframes -> ofxTLCurves
Flagsはbangsに似ていますが、各フラグ（マーカー）に、テキストを入力する事が出来ます。値はイベントが発生するごとに読み出す事が可能です。
//--------------------------------------------------------------
void MyClass::receivedBang(ofxTLBangEventArgs& bang){
ofLogNotice("Bang fired from track " + bang.flag);
}
.
継承関係：ofxTLTrack -> ofxTLKeyframes -> ofxTLBangs -> ofxTLFlags
Switchesを使う事で、タイムライン上で、ON/OFFのシンプルなコントロールをすることが出来ます。
継承関係：ofxTLTrack -> ofxTLBangs -> ofxTLSwitches
VideoTracksでは、映像とそのエフェクトを同時にスクラブ再生する事が出来ます。videoトラックが追加されると、映像再生が全体のタイムラインの再生を制御する形になります。
ofxTLVideoTrack* videoTrack = timeline.addVideoTrack("Video", videoPath);
if(videoTrack != NULL){ //in the case the video load failed check against null
timeline.setFrameRate(videoTrack->getPlayer()->getTotalNumFrames()/videoTrack->getPlayer()->getDuration());
timeline.setDurationInFrames(videoTrack->getPlayer()->getTotalNumFrames());
timeline.setTimecontrolTrack(videoTrack); //video playback will control the time
}
.
継承関係：ofxTLTrack -> ofxTLImageTrack -> ofxTLVideoTrack
AudioTracksを使用すると、オーディオトラックとその他のシーケンスを同時にスクラブ再生する事が出来ます。
.cppファイルの中でトラックを追加し、ファイルを読み込みます。
//--------------------------------------------------------------
void testApp::keyPressed(int key){
//... setup stuff
timeline.addAudioTrack("Audio", "myAudioFile.wav");
}
//--------------------------------------------------------------
void testApp::update(){
//check the FFT data
if(key == ' '){
//calling play on the waveform controls the timeline playback
ofxTLAudioTrack* track = timeline.getAudioTrack("Audio");
for(int i = 0; i < track->getFFTSize(); i++){
track->getFFT()[i]; //FFT data
}
}
}
.
継承関係：ofxTLTrack -> ofxTLImageTrack -> ofxTLAudioTrack
colorトラックを使えば、シーケンスに沿ってスムーズに色を変化させる事が出来ます。色のサンプルパレットとして画像を使用し、各キーフレームではその画像パレットの中から、色をサンプルする位置を指定します。キーフレーム間では画像パレットの中で色をサンプルする位置が移動していくことで、滑らかに色が変化します。
LFOは、Low Frequency Oscillatorの略で、シンプルな繰り返しのパターンや、ノイズ関数を使用する事が出来ます。
ofxTimelineは他のアドオンやタイムベースのメディアを組み込んで使用する事ができます。下記はいくつかの例です。
https://github.com/obviousjim/ofxRGBDepth // RGBDToolkit
https://github.com/momo-the-monster/ofxTimelineTracks // ofxTLMidiNote
トラックは拡張しやすいようにデザインされています。ofxTimelineには下記の2つのトラックテンプレートがあり、オリジナルのトラックを作るには、ここから始めるのが良いでしょう。
タイムベースのメディアをビジュアライズしたり、オリジナルのインタラクティブトラックを作る場合は、このテンプレートを使用してください。
Use this template for creating a custom keyframe based track. It already has copy+paste, multiple selection, saving and loading. キーフレームベースのトラックを作る場合はこのテンプレートを使用してください。このテンプレートには、コピー＆ペースト、複数選択、セーブとロードの機能が組み込まれています。
ofxTimeline is codeveloped by YCAM InterLab during the Guest Research Projector v.2 at YCAM Interlab by James George at the YCAMInterLab
Playmodes who graciously funded and shaped the project in it's early stages for BlueBeams .
The Frank-Ratchye STUDIO for Creative Inquiry who have supported the RGBDToolkit project.
Eyebeam Who's community has prompted many of the thoughts provoking the development of ofxTimeline during my residency in Spring 2012.
Also a huge thank you to Creative Applications for publishing the initial experiment which brought a lot of interested people together to get this to where it is now.
This Document by James George and YCAMInterLab is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
