Left gray trail in ofEnableBlendMode (OF_BLENDMODE_ALPHA) | alpha trail , alpha blending, Mac, openFrameworks

Hello!

I want to make “alpha trail” effect like the below link.

but I found “gray trail” which is not hidden after fading.
This is the capture image about it. . http://art21.photozou.jp/pub/259/2999259/photo/214537807_org.v1416342119.png

The color where the circle moved(the pixel which the cursor points in the capture image) is not black(in this case Red:6 Green:6 Blue:6).

I want background color to stay black after alpha trail effect.
How can I do that? Is there any advice?

This is the code I wrote…

★ofApp.h
ofPoint pos;

★ofApp.cpp

void ofApp::setup(){
ofBackground(0);
ofSetBackgroundAuto(false);
ofEnableBlendMode(OF_BLENDMODE_ALPHA);
}

//--------------------------------------------------------------
void ofApp::update(){
pos.x++;
if (pos.x > ofGetWidth()) pos.x = 0;
pos.y++;
if(pos.y > ofGetHeight()) pos.y = 0;
}

//--------------------------------------------------------------
void ofApp::draw(){
ofSetColor(0, 0, 0, 20);
ofRect(0, 0, ofGetWidth(), ofGetHeight());
ofSetColor(255);
ofCircle(pos, 42);
}


My environment is below
Mac OS 10.8.5
openFrameworks: of_v0.8.4_osx_release
Xcode: Version 5.1.1 (5B1008)

Thank you!

Best regards,
Yuta

1 Like

did you ever figure this out? having same problem…

Hey,
You can try changing the blend mode and function.
This very nice web API might help you understand what’s happening and lets you play around with different settings.

This piece of code subtracts the drawn RGBA pixels value from the current pixels of the frame until it’s completely blacked out.

		glEnable(GL_BLEND);
		glBlendEquation(GL_FUNC_REVERSE_SUBTRACT);
		glBlendFunc(GL_ONE, GL_ONE);
		
		float fClearAlwaysOpacity = 0.04f;
		ofSetColor(0.0f, fClearAlwaysOpacity*255.0f );
		ofFill();
		ofDrawRectangle(0,0, ofGetWidth(), ofGetHeight());
		
		glDisable(GL_BLEND); // restores normal draw mode

Hello Daan,

Thank you but I tried the code below but it does’t become blacked out, could you give me any advice?

MacOS: 10.11.3(15D21)
Xcode: Version 7.3 (7D175)
openFrameworks: of_v0.9.3_osx_release

ofApp.h

ofPoint pos;

ofApp.cpp

void ofApp::setup(){
    ofBackground(0);
    ofSetBackgroundAuto(false);
}
void ofApp::update(){
    pos.x++;
    if (pos.x > ofGetWidth()) pos.x = 0;
    pos.y++;
    if(pos.y > ofGetHeight()) pos.y = 0;
}

void ofApp::draw(){
    glEnable(GL_BLEND);
    glBlendEquation(GL_FUNC_REVERSE_SUBTRACT);
    glBlendFunc(GL_ONE, GL_ONE);
    
    float fClearAlwaysOpacity = 0.04f;
    ofSetColor(0.0f, fClearAlwaysOpacity*255.0f );
    ofFill();
    ofRectangle(0,0, ofGetWidth(), ofGetHeight());
    
    glDisable(GL_BLEND); // restores normal draw mode
    
    ofSetColor(255);
    ofDrawCircle(pos, 42);
}

Hey,
Indeed, it doesn’t work… probably because I used it in between ofFbo.begin() and end()

Here’s an improved code which runs fine on my computer :
(you might also want to ofEnableAlphaBlending(); in your setup())

	// Fade out overall alpha
	glEnable(GL_BLEND);
	glBlendFunc(GL_ONE, GL_ONE);
	glBlendEquation(GL_FUNC_REVERSE_SUBTRACT);
	float fClearOpacity = 0.04f;
	ofSetColor(255*fClearOpacity, 255*fClearOpacity);
	ofFill();
	ofDrawRectangle(0,0, ofGetWidth(), ofGetHeight());

	// restores normal draw mode
	glDisable(GL_BLEND);
	glBlendEquation(GL_FUNC_ADD);
	glBlendFunc(GL_SRC_COLOR, GL_DST_COLOR);

	// draw moving circle
	ofSetColor(255);
	ofDrawCircle(pos, 42);

	// Draw background comparison zone
	ofSetColor(0);
	ofDrawRectangle(0,0, ofGetWidth(), 50);
	ofNoFill();
	ofSetColor(255, 255);
	ofDrawBitmapString("This region is completely black for comparison with erased bg", 10, 30);

Also, I’ve often found it easier to do “trails” in an ofFbo.

Note: glBlendFunc(GL_ONE, GL_DST_ALPHA); doesn’t work so you also have to set the RGB channels of your clearing color.

1 Like

Whoops, that only blacks out the screen in fact…
To make it fade out only alpha, add ofFbo fbo; in ofApp.h and this in your setup():
(There should be another way to do this without using an fbo)

	fbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA);
	fbo.begin();
	ofClear(0);
	ofClearAlpha();
	fbo.end();

and

void ofApp::draw(){
	ofClear(0);
	fbo.begin();

	glEnable(GL_BLEND);
	glBlendFunc(GL_ONE, GL_ONE);
	glBlendEquation(GL_FUNC_REVERSE_SUBTRACT);
	
	float fClearOpacity = 0.04f;
	ofSetColor(0, 255*fClearOpacity);
	ofFill();
	ofDrawRectangle(0,0, ofGetWidth(), ofGetHeight());
	
	glDisable(GL_BLEND);
	glBlendEquation(GL_FUNC_ADD);
	glBlendFunc(GL_SRC_COLOR, GL_DST_COLOR);

	ofSetColor(255);
	ofDrawCircle(pos, 42);

	fbo.end();
	fbo.draw(0,0);
}
2 Likes

Hello Daan,
Your code works perfectly in my environment!

  • MacOS: 10.11.3(15D21)
  • Xcode: Version 7.3 (7D175)
  • openFrameworks: of_v0.9.3_osx_release

I uploaded the code here to check up the three ways to refresh the background.

  1. fade out with trails
  2. fade out properly without fbo
  3. fade out properly with fbo

Thank you a lot;)
Yuta

1 Like

Hello Daan,
Your code works perfectly in my environment!

I uploaded the code here to check up the three ways to refresh the background.

  1. fade out with trails
  2. fade out properly without fbo
  3. fade out properly with fbo

Thank you a lot;)
Yuta

1 Like