Basic Alpha Fade

Hi All

I’m sure that it is quite simple, but where might I start with simple alpha fades? I’ve included some simple Processing code. How might I recreate this in OF, or is the approach different?

Any help or advice would be much appreciated.

Square square1;

void setup() {
  size(400, 400);
  square1 = new Square(100, 100, 200, 200, 0.5);

void draw() {

class Square {
  float x, y;
  float squareWidth;
  float squareHeight;
  float alpha = 0;
  float alphaSpeed;
  Square(float xpos, float ypos, float sWidth, float sHeight, float gSpeed) {
    x = xpos;
    y = ypos;
    squareWidth = sWidth;
    squareHeight = sHeight;
    alphaSpeed = gSpeed;
  void fade() {
    alpha = alpha + alphaSpeed;
    if (alpha >= 127 || alpha <= 0) {
      alphaSpeed = alphaSpeed * -1;
  void display() {
    fill(255, alpha);
    rect(x, y, squareWidth, squareHeight);


I think this will demonstrate the use of ofSetColor() and ofDrawRectangle():
Try this in ofApp.cpp:

void ofApp::draw(){
    ofSetColor(255, ofGetFrameNum() % 255);
    ofDrawRectangle(0, 0, ofGetWidth() * 0.5, ofGetHeight() * 0.5);

Good luck

Yes, definitely, ANYTHING that is meant to be drawn in some specific color mask or alpha is meant to have set the ofColor before drawing.

ofSetColor(…) takes integers R,G,B, and Alpha as optional 4th parameter, but it is a many times overloaded function for more versatility (e.g. you can use hex colors) you can check in documentation:!show_ofSetColor


// we are going to draw a red rectangle of size 100 x 100 px
ofSetColor(255,0,0,255); // first arg: red channel to maximum, green and blue zero, alpha to maximum
ofDrawRectangle(0,0, 100,100);

// everything that is gonna be drawn is being now drawn in semi-transparent
ofSetColor(255,255,255,127); // notice the 4th arg (alpha) - halfway between 0 and 255
someImage.draw(0,0); // draw some image that was previously loaded at 0,0 (left-top corner) should be rendered semi-transparent

// when you're done changing colors don't forget to restore it again to fully opaque white:
ofSetColor(255,255,255,255); // this is both the fully opaque white and the default full color mode for drawing the images; an alteration to this makes the image to be drawn thru such color filter...

// when you do the following, only the blue channel of the image will be displayed
ofSetColor(0,0,255,255); // we set only blue and alpha to maximum here
someImage.draw(0,0); // you should see this through the blue color filter

There is also a pair of ofPushStyle() and ofPopStyle() bracket functions that scope any styled-based function you do inside. ofPushStyle() is BEGIN and ofPopStyle() the END of such an operation you can make inside the draw loop.

for example:

// we have our default white opaque color

// bracketed style operation inside...
     ofSetColor(255,255,0,255); // we set the color to yellow inside the "style brackets"
     ofDrawBitmapString(20,20, "This is a yellow text."); // the text will be rendered in the color we have set up a line above
     ofSetColor(0,0,255, 100); // we have set the color to 100% green with the alpha value of 100
     ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, 150); // we have drawn something of a more transparent green circle from the center of the screen with radius of 150.

// don't worry, anything you draw post-popStyle, will not get the colors inside, it continues with the color prior to ofPushStyle()...

ofDrawBitmapString(100,100, "What color is this text?"); // of course the color should be white as was set at the beginning...

This is basically how the OF works. Before anything is drawn, you have to set the color via ofSetColor()… Try that and enjoy :wink:

Many thanks to you both. What you have said makes sense and I’ll give it a go. Cheers.

1 Like