Change opacity of an image

I am trying to implement a button by having to images in the same position - one for “off” state and one for “on” state. When the user clicks (and holds) on the “off” state image, the “on” state image should slowly fade in from 0 opacity to 100% opacity.

But I cannot find any reference to how to do this in the official docs, can anyone give me a hand?

I think you can call ofSetColor(255,255,255, alpha); in draw() function before drawing the image, and make the alpha go from 0 to 255, something like:

  
  
bool holdingbutton;  
int oldalpha;  
int newalpha;  
ofImage offimage;  
ofImage onimage;  
  
offimage.draw(x,y);  
  
ofEnableAlphaBlending();  
if (holdingbutton) {  
newalpha = oldhalpha+1;  
if (newalpha > 255) {newalpha = 255;}  
ofSetColor(255,255,255,newalpha);  
oldalpha = newalpha;  
}  
else { ofSetColor(255,255,255,0);}  
onimage.draw(x,y);  
ofDisableAlphaBlending();  

1 Like

Nice, that works. Thank you!