ofxFade

Generic fade-in/out helper for openFrameworks

This addon is "immediate-mode" style (like ImGui). Draw functions are executed immediately at the place where you wrote.

This addon basically provides three functions:

• ofxFade::alpha()
• ofxFade::delta<T>()
• ofxFade::advanced()

And two fader (timer) classes for instances, which has the same method above in it:

• ofxFade::InteractiveFader
• ofxFade::NonInteractiveFader

( You can also create new fader classes by extending ofxFade::Fader or two above. )

Table of Contents

• Dependencies
• Examples
• example\_simple
• example\_delta
• example\_easing
• example\_interactive
• example\_non\_interactive
• Notes
• No fadeout
• No fadein
• How to get rateEasing/rateTime/phase in alpha(), delta()
• TODOs
• License

Dependencies

• ofxEasing

Examples

example_simple

#include "ofxFade.h"

// loop time: 2.5 (sec)
float t = std::fmodf(ofGetElapsedTimef(), 2.5f);

// fadein: 0.5, static: 1.0, fadeout: 0.5
ofxFade::alpha(t, 0.5f, 1.0f, 0.5f, [](float a){
    ofSetColor(255, 0, 0, a);
    ofDrawEllipse(100, 100, 100, 100);
});

Text and indicators (Advanced usage)

// fadein: 0.5, static: 1.0, fadeout: 0.5
ofxFade::advanced(t, 0.5f, 1.0f, 0.5f, [](float rateEasing, float rateTime, ofxFade::Phase phase){
    std::string s1 = "rateEasing: " + ofToString(rateEasing, 2);
    ofDrawBitmapString(s1, 200, 50);

    std::string s2 = "rateTime: " + ofToString(rateTime, 2);
    ofDrawBitmapString(s2, 200, 100);

    std::string s3 = ofxFade::phaseToString(phase);
    ofDrawBitmapStringHighlight(s3, 200, 150);
});

example_delta

#include "ofxFade.h"

// loop time: 2.5 (sec)
float t = std::fmodf(ofGetElapsedTimef(), 2.5f);

// fadein: 0.5, static: 1.0, fadeout: 0.5, delta: 100
ofxFade::delta<float>(t, 0.5f, 1.0f, 0.5f, 100.0f, [](float delta){
    ofSetColor(255, 0, 0);
    ofDrawEllipse(100, 100 + delta, 100, 100);
});

and more:

// fadein: 0.5, static: 1.0, fadeout: 0.5, delta: 100
ofxFade::delta<float>(t, 0.5f, 1.0f, 0.5f, 100.0f, [](float delta, float alpha){
    ofSetColor(255, 0, 0, alpha);
    ofDrawEllipse(220, 100 + delta, 100, 100);
});

// fadein: 0.5, static: 1.0, fadeout: 0.5, delta: (30, 100)
ofxFade::delta<ofVec2f>(t, 0.5f, 1.0f, 0.5f, ofVec2f(30, 100), [](ofVec2f delta, float alpha){
    ofSetColor(255, 0, 0, alpha);
    ofDrawEllipse(340 + delta.x, 100 + delta.y, 100, 100);
});

example_easing

#include "ofxFade.h"

// loop time: 2.5 (sec)
float t = std::fmodf(ofGetElapsedTimef(), 2.5f);

// fadein: 0.5, static: 1.0, fadeout: 0.5, delta: 100, cubic (out)
ofxFade::delta<float>(t, 0.5f, 1.0f, 0.5f, 100.0f, [](float delta){
    ofSetColor(255, 0, 0);
    ofDrawEllipse(100, 100 + delta, 100, 100);
}, ofxeasing::Function::Cubic);

and more:

// fadein: 0.5, static: 1.0, fadeout: 0.5, delta: 100, bounce in, linear out
ofxFade::delta<float>(t, 0.5f, 1.0f, 0.5f, 100.0f, [](float delta, float alpha){
    ofSetColor(255, 0, 0, alpha);
    ofDrawEllipse(220, 100 + delta, 100, 100);
}, ofxeasing::Function::Bounce, ofxeasing::Type::Out,
    ofxeasing::Function::Linear, ofxeasing::Type::In);

// fadein: 0.5, static: 1.0, fadeout: 0.5, cubic (in)
ofxFade::alpha(t, 0.5f, 1.0f, 0.5f, [](float alpha){
    ofSetColor(255, 0, 0, alpha);
    ofDrawEllipse(340, 100, 100, 100);
}, ofxeasing::Function::Cubic, ofxeasing::Type::In);

// fadein: 0.5, static: 1.0, fadeout: 0.5, cubic (out)
ofxFade::advanced(t, 0.5f, 1.0f, 0.5f, [](float r, float rt, ofxFade::Phase phase){
    const float x = 460;

    std::string s1 = "rateEasing: " + ofToString(r, 2);
    ofDrawBitmapString(s1, x, 50);

    std::string s2 = "rateTime: " + ofToString(rt, 2);
    ofDrawBitmapString(s2, x, 100);

    std::string s3 = ofxFade::phaseToString(phase);
    ofDrawBitmapStringHighlight(s3, x, 150);

}, ofxeasing::Function::Cubic);

example_interactive

#include "ofxFade.h"

ofxFade::InteractiveFader fader;

//--------------------------------------------------------------
void ofApp::setup(){
    // fadein = 1.0, fadeout = 1.0 (sec)
    fader = ofxFade::InteractiveFader(1.0f, 1.0f);
    fader.start();
}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){
    fader.alpha([](float a){
        ofSetColor(255, 0, 0, a);
        ofDrawEllipse(100, 100, 100, 100);
    });

    ofDrawBitmapString("click to toggle fade", 100, 100);
}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
    if(fader.isStarted() && !fader.isFadeOutStarted()){
        fader.fadeOut();
    }else if(fader.isFinished()){
        fader.start();
    }
}

example_non_interactive

#include "ofxFade.h"

ofxFade::NonInteractiveFader fader;

//--------------------------------------------------------------
void ofApp::setup(){
    // fadein = 1.0, static = 1.0, fadeout = 0.5 (sec)
    fader = ofxFade::NonInteractiveFader(1.0f, 1.0f, 0.5f);
    fader.start();
}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){
    fader.delta<float>(100, [](float delta, float alpha){
        ofSetColor(255, 0, 0, alpha);
        ofDrawEllipse(220, 100 + delta, 100, 100);
    }, ofxeasing::Function::Bounce, ofxeasing::Type::Out,
        ofxeasing::Function::Linear, ofxeasing::Type::In);

    // if(fader.isFinished()){
        ofDrawBitmapString("click to restart", 400, 100);
    // }
}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
    // if(fader.isFinished()){
        fader.start();
    // }
}

Notes

No fadeout

fadeout_sec is optional (ofxfade::optional [^1].)
So please set fadeout_sec to ofxfade::nullopt [^1] means no fadeout.

No fadein

Just set 0 to fadein_sec

How to get rateEasing/rateTime/phase in alpha(), delta()

• Additional args of function (callback):
• To get rateEasing, use:
• [](float alpha, float rateEasing){} for alpha()
• [](float delta, float alpha, float rateEasing) for delta()
• To get rateTime, phase, use:
• [](float alpha, float rateEasing, float rateTime, Phase phase){} for alpha()
• [](float delta, float alpha, float rateEasing, float rateTime, Phase phase) for delta()

Custom delta class

You can pass any custom class T for delta<T>(), if it can be multiplied () by rate (please implement operator (float).)

Other options

• You can set ofxFade::setFlag(ofxFade::OFXFADE_NO_PUSH_POP); to disable every push/pop before (and after) delta/alpha/advanced functions. (check #3 and #4 for detail.)
• for global, set it on setup() or somewhere you init.
• for temporal on/off (for specific scope), please use ofxFade::withFlag() function.

  ofxFade::withFlag(ofxFade::OFXFADE_NO_PUSH_POP, [&](){
      // something you want...
  });
  

TODOs

• Add advanced example
• Support tuple as T for delta<T>()

License

Dual licensed under WTFPL and/or 0BSD.

[^1]: If C++17 or later, ofxfade::optional is the same as std::optional .