Transparency / Fading of ofImage or ofTexture

Hi all,

let me first say thank you to the creators of OF for the obviously huge amount of work that has gone into this great framework. I’m finding it real easy to learn and it’s a great way of finally getting to know c++.

My question is the following. Is there a way of controlling a kind of overall alpha value if drawing an ofTexture to the screen? I’ve found out about rotating and scaling my textures, but it would be real nice to be able to fade them in and out. I know I could manipulate the pixel-array of the texture, but that would mean updating the texture on the graphicscard every frame the alpha changes, and that is not acceptable for the amount of objects that are being drawn in my application. I thought there might be a way of doing this with glu commands, similar to the way one can rotate the texture with glRotateMatrix.

I hope somebody can give me a hint.

Thanks in advance

Dave

can you try:

  
  
  
ofEnableAlphaBlending();  
ofSetColor(255,255,255,100);  
myTexture->draw();  
ofDisableAlphaBlending();  
  
  

color in OF with a texture works as a modulation, ie, imagine each value as a pct, such as:

  
ofSetColor(255,255,255,127)  

is similar to (and in fact, converted for the opengl call) to:

  
color (1.0,1.0,1.0, 0.5)  

then, every pixel in the texture is multiplied by the value of the color. So, in the above example, the 0.5 has the effect of scaling every alpha value in half. if you alter the alpha of the color command, you alter the over alpha of your texture. the same is true with r/g/b so you can tint your texture the same way.

I hope that helps !

take care,
zach

1 Like

zach, thanks a lot. Keep up the good work!

Hi

I have a similar question so I am adding it here.

I have a Image (black text on white background). I am using ofEnableAlphaBlending(); to only have the black text visible, so that the main background of the stage is visible.

I would like to tint only the black text, make it blue or something.

How would i do that?

Also I would be great if someone could give me a short example on how to assign an image to become a texture.

Thanks.

the problem, is that you can’t tint black – think of the colors like 0-1, 0 = black, 1 = white. anything times black is black.

you can make a png that has white pixels instead of black, with transparency, and tint the white pixels to be blue, or any color for that matter (including black).

ie,

  
white (1,1,1) * blue (0,0,1) = (0,0,1) blue  

but

  
black (0,0,0) * blue (0,0,1) = (0,0,0) black  

does that make sense?

take care!
zach

Using a paint program such as Photoshop, you can create PNG images containing alpha information. In your case, create a transparent image with only **white **text.

Next, draw the image with alpha blending enabled and specify the desired color. The color white (red: 100%, green: 100%, blue: 100%) will be multiplied by your color values (e.g. red: 50%, green: 0%, blue: 0%), yielding exactly that color. See the following example:

  
  
ofEnableAlphaBlending();  
ofSetColor(127, 0, 0); // a dark red  
myImage.draw(0, 0);  
ofDisableAlphaBlending();  
  

For your convenience, I have added a sample picture you can use to try it out. It shows as white in this window, but once drawn using a different color, the text will reveal itself :stuck_out_tongue:

How does one change the transparency of an image itself? I have an array of .png’s that I want to blend together as they move about. I’ve tried ofEnableAlphaBlending and saving the images at various degrees of transparency, but no luck.

@jarednielsen do you mean that you’re trying to render multiple images to the screen and then save them out as a composited image? Try looking at how ofGrabScreen works, otherwise you’ll need to actually change the bitmap data itself to write a .png with a different alpha value, check here for more info on doing that:

http://forum.openframeworks.cc/t/learning-from-app-examples/2778/0