How to use ofxEasingGUI

Feature

このaddonはAfter EffectsのScript Flowからインスピーレションを得て制作を行いました。

Flowのように、openFrameworksで何かをアニメーションする際に決まった関数から得られるイージングではなく、 GUIで自らが作ったカーブでイージングアニメーションをコントロールできるようなaddonを目指し制作したものです。 openFrameworksで現在のあなたのプロジェクトのメインウィンドウとは別に、イージング用のウィンドウを作成し、ここにGUIを表示させて、アニメーションをコントロールさせていきます。縦軸がValue、変化量を、横軸がTime,時間を表すような二次元グラフです。

ofxJSONに依存しており、中でJSONファイルを利用しています。そのためこちらのaddonと共にofxJSONもダウンロードして、addonとして読み込んでください。ofxJSONは読み込むだけで大丈夫です。 GUIでアニメーションを調整したら、JSONファイルにイージングのデータを出力します。そうすることで、GUIのウィンドウがなくても、イージングを毎回手動で設定しなくても、いつでも同じイージングを適用することができます。現在のバージョンはv1.0 m0.0となっていて、初期段階のバージョンです。バグ・不具合等または追加したら便利な機能などがあった場合ぜひ連絡（Twitter,mail）お願いします。まずはexampleを触ってみてください。

Getting Started

ofxEasingGUI/exampleを参照してください。まずは、メインウィンドウとサブウィンドウを作成します。サブウィンドウ用のsetup、drawメソッドのも定義します。

main.cpp



              #include "ofMain.h"
              #include "ofApp.h"
              #include "ofAppGLFWWindow.h"

              int main(){
                ofGLFWWindowSettings settings;

                //mainWindow
                settings.setSize(1024, 768);
                settings.setPosition(ofVec2f(600,0));
                settings.resizable = true;
                shared_ptr mainWindow = ofCreateWindow(settings);

                //subWindow 1
                //if you want more window/panel, You can add window/panel like the following sentence
                settings.setSize(600, 600);
                settings.setPosition(ofVec2f(0,0));
                settings.resizable = false;
                shared_ptr guiWindow = ofCreateWindow(settings);
                guiWindow->setVerticalSync(false);

                shared_ptr mainApp(new ofApp);
                mainApp->setupGui();
                ofAddListener(guiWindow->events().draw,mainApp.get(),&ofApp::drawGui);


                ofRunApp(mainWindow, mainApp);
                ofRunMainLoop();
              }

サブウィンドウ用のsetup、draw、keyEventメソッド、mouseEventメソッドを定義します。基本的にはなんて名前でもいいです。

ofApp.h


              #include "ofMain.h"
              #include "ofxEasingGUI.hpp"
              #include "ofEvent.h"

              class ofApp : public ofBaseApp{
                public:
                void setup();
                void update();
                void draw();

                        ~~~~~~~~~
                        ~~~~~~~~~

                void dragEvent(ofDragInfo dragInfo);
                void gotMessage(ofMessage msg);

                void setupGui();
                void drawGui(ofEventArgs & args);

                void keyPressedGui(int &key);
                void keyReleasedGui(int &key);
                void mouseDraggedGui(ofVec2f &e);
                void mousePressedGui(ofVec2f &e);
                void mouseReleaseGui(ofVec2f &e);

                ofxEasingGUi easing;
              };

メインウィンドウのsetup、draw、イベント関数の定義と同じくサブウィンドウ用のメソッドを定義していきます。

ofAddListener(easing.イベント,this,&ofApp::定義したイベント関数);のようにサブウィンドウのsetup関数に記述してください。

ofApp.cpp


              #include "ofApp.h"

              void ofApp::setup(){
                  ~~~~~~~~~
              }

              void ofApp::setupGui(){
                  easing.setup(100, 100, 400, 400);

                  ofAddListener(easing.evKeyPressed,this,&ofApp::keyPressedGui);
                  ofAddListener(easing.evKeyReleased,this,&ofApp::keyReleasedGui);

                  ofAddListener(easing.evMouseDragged,this,&ofApp::mouseDraggedGui);
                  ofAddListener(easing.evMousePressed,this,&ofApp::mousePressedGui);
                  ofAddListener(easing.evMouseReleased,this,&ofApp::mouseReleaseGui);
              }

              ~~~~~~~~~
              ~~~~~~~~~
              ~~~~~~~~~

              void ofApp::drawGui(ofEventArgs &args){

                  easing.adjustEasing(1000, 2.0f, ofGetElapsedTimef());
              }

              void ofApp::keyPressedGui(int &key){

                  if(key == 'c'){
                      easing.clear();
                  }
                  if(key == 'p'){
                      if(!(easing.getPreview())){
                          easing.enablePreview();
                      }
                      else{
                          easing2.disablePreview();
                      }
                  }
                  else if(key == 'j'){
                      easing.printJsonEasingBezier("test1");
                      //        easing.printJsonEasingBezierTime("test2");
                      //        easing.printJsonEasingFloat("test3");
                      //        easing.printJsonEasingFloatTime("test4");
                  }
              }

              void ofApp::mouseDraggedGui(ofVec2f &e){
                  easing.mouseDraggedBezier(e);

              }
              void ofApp::mousePressedGui(ofVec2f &e){
                  easing.mousePressedBezier(e);
              }
              void ofApp::mouseReleaseGui(ofVec2f &e){
                  easing.mouseReleasedBezier();
              }

これでビルドしてくみてください。イージンググラフをいじれるようになっていると思います。 easingは基本的に0 ~ 1の間の正規化された数値が帰ってきて、それと積をとることによってイージングがかかるような仕組みです。

Version

latest version

v01m03 :
Jsonファイルを出力・入力に対応させました。
exampleファイルを追加しました

previous version

v01m00 : テストアップロード
v01m01 : イージングの挙動を正しくしました。
v01m02 : 補助便利関数を追加しました。、example_basicを追加しました。

development environment

of_v0.10.1_osx_release

macOS 10.14.6

About Class

ofxEasingGUI classについての関数の説明を記述しておきます。細かく全体の関数について知りたい方は以下より参照してください。

ofxEasingGUI class

adjustEasing()

この関数はグラフの表示、グラフによる調整が主な機能になっています。基本的にはサブウィンドウのdraw関数で呼び出すのでいいと思います。

adjustEasingにはオーバーロードでいくつかのパターンが用意されています。

void adjustEasing(int precision, float setTime,float currentTime);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

void adjustEasing(ofVec2f (&bezierArray)[4] , float setTime,float currentTime);

(&bezierArray)[4] : GUIで現在設定しているグラフの設定を参照の要素4の配列を渡すことで、受け取ることができます

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

void adjustEasing(ofVec2f (&bezierArray)[4] , int precision, float setTime,float currentTime);

(&bezierArray)[4] : GUIで現在設定しているグラフの設定を参照の要素4の配列を渡すことで、受け取ることができます

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

(&bezierArray)[4]に関してで、こちらで受け取った要素4の配列は描きで説明するapplyEasingにそのまま使用することができます。そうすることで次に紹介するjsonファイルを使用せずともイージングを他のアニメーションに適用させることができます。ただ、これは製作中に使用する関数として設計されているため最終的にはjsonファイルに出力しておかないとプログラムを終了させた時に設定が消えてしまいます。

exportJSonEasing~

この関数は二種類のjsonデータを出力することができます。adjustEasingでイージングを決定してそのデータをjsonファイルに出力することができます。サブウィンドウのkeyPressed()等で呼び出す形で設定しておくと便利かもしれません。timeと書いてある関数は、出力されるファイルネームに日付時間がつけられます。連続でjsonファイル名を変えずに出力させたい時に便利です。JSONファイルはbin/dataに生成されます。

※現在このTimeの入った関数はうまく動作していません。もし、連続でjsonファイルを生成させたい場合は、Timeと書いてない方の関数に引数として、fileNameに"fileName" + ofGetTimestampString()のように渡してください。

void exportJsonEasingBezier(string fileName);

fileName : 設定したいファイルネームをstring型で渡します。

void exportJsonEasingBezierTime(string fileName);

fileName : 設定したいファイルネームをstring型で渡します。

void exportJsonEasingFloat(string fileName);

fileName : 設定したいファイルネームをstring型で渡します。

void exportJsonEasingFloatTime(string fileName);

fileName : 設定したいファイルネームをstring型で渡します。

これらのJsonファイルにはBezierタイプとFloatタイプがあります。
この後に紹介される。applyEasingでjsonファイルを使う場合は、それぞれにあった関数をコールしてください。具体的な中身の違いはbezierの方は、グラフを構成するベジェ曲線の四つのポイントの座標が格納されます。それを後のapplyEasingでそのベジェの座標を使って計算につ書います。 Floatタイプの方では、イージングの計算された値が格納されます。そのため、apply時に計算する必要がなくなります。ですが、こちらの方がファイルデータは大きくなります。あまり大きなサイズになると Jsonファイルの読み込みに時間がかかるので、bezierの方が向いているかもしれませんん。その時に軽い方など、お好きな方を使ってみてください。

applyEasing~

この関数でイージング関数を適用させます。引数にjsonファイルを入れることができて、adjustEasingやサブウィンドウがなくても、イージングをかけることができます。なので、こちらは最終的な完成系に適応させるためのものです。最終的な完成時にはもちろんサブウィンドウやグラフエディタはいらないと思うので消しても大丈夫です。こちらもオーバーロードで色々な形で適用させるようになっています。これらの関数は floatのリターンで設計されていて、 0 ~ 1の間で返ってきます。これを好きなものとの積を取ることでイージングアニメーションを得られます。具体的な使い方はexamapleを参照してください。

float applyEasing(float setTime, float currentTime);

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasing(int precision, float setTime, float currentTime);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasing(int precision, float setTime, float currentTime, float latency);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

float applyEasing(int precision, float setTime, float currentTime, float latency,floatwaitTime);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

waitTime : setTimeからwaitTime秒だけ遅れて終わります。

float applyEasing(ofVec2f (&bezierArray)[4], int precision, float setTime, float currentTime);

(&bezierArray)[4] : adjustEasing(ofVec2f (&bezierArray)[4], float setTime,float currentTime)等で手に入った要素数4の配列を渡します。この情報を使ってイージングを生成します。

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasing(ofVec2f (&bezierArray)[4], int precision, float setTime, float currentTime, float latency);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

float applyEasing(ofVec2f (&bezierArray)[4], int precision, float setTime, float currentTime, float latency,float waitTime);

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

waitTime : setTimeからwaitTime秒だけ遅れて終わります。

float applyEasingJsonBezier(string filePath, float setTime, float currentTime);

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasingJsonBezier(string filePath, int precision,float setTime, float currentTime);

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasingJsonBezier(string filePath, int precision,float setTime, float currentTime, float latency);

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

float applyEasingJsonBezier(string filePath, int precision,float setTime, float currentTime, float latency,float waitTime));

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

precision : グラフの描画精度を調整します100,1000のようなint型で渡します

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

waitTime : setTimeからwaitTime秒だけ遅れて終わります。

float applyEasingJsonFloat(string filePath, float setTime, float currentTime);

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

float applyEasingJsonBezier(string filePath,float setTime, float currentTime, float latency);

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

float applyEasingJsonBezier(string filePath, float setTime, float currentTime, float latency,float waitTime));

filePath : bin/dataの中に生成した、bezierタイプのjsonファイルのパスを渡します。

setTime : アニメーションさせる時間を設定します。float型で例えば1秒なら1.0fのように渡します。

currentTime : 何秒間たったか認識するために現在の時刻を渡します。ofGetElapsedTimef()。

latency : currentTimeからlatency秒だけ遅れてスタートします

waitTime : setTimeからwaitTime秒だけ遅れて終わります。

Contact

何か不具合・バグまたは、追加機能の要望等がありましたら連絡ください。

mail:masuomakazuki@gmail.com

twitter:@kazuomasu1913