How to use fade effect with an image

Ríbó

Hi all, I'm working on this. After the images load (it takes a minute) a button should appear in the bottom right. When you click the button, the image fades and another image appears. What's happening there is a white rectangle is being repeatedly drawn at 20% opacity, giving a fade-out effect to the images. That's what I want: but with a .png image; not a rect().

Can someone suggest how to achieve the same effect with a BackgroundImage.png instead of a white rectangle? I've read a bunch of entries on fade in/out with images but no luck (but I'd say this must have been answered somewhere already.) uploaded the full code here; but below is the relevant part:

    fill(255, 17);
      rect(0, 0, width, height);
      sceal.firstLoop(); 

and firstLoop() is a method of Storyboard.pde which says:

float time = 0;
float a = 0;
float b = 50;
int nowFrame = 0;
int numFrames = 55;
int numConceptPics = 12;
PImage[] story = new PImage[numFrames];
PImage[] conceptPics = new PImage[numConceptPics];
//PImage[] bgImg= new PImage[1];
PImage taunt;

boolean redraw = true;
boolean toFade = false;
boolean showTaunt = false;
boolean runFirstLoop = true;
int setState = 0;

class Storyboard {




  void firstLoop() {

    if (setState ==0) {

      pushMatrix();
      image(story[nowFrame], 0, 0);

      popMatrix();
    }


    if (setState ==1) {

      pushMatrix();
      imageMode(CORNER);
      image (conceptPics[0], 0, 0);
      popMatrix();
    }
  }
}

Ater

IDK if that is what you want, but see tint(). You can say then:

tint(255, a);
image(myImage, x, y);
a--;

Of course, you need to set states and conditions for change of alpha (a), but something like this.

Ríbó

Sorry for delay!
Thanks for that, I'll try it

Ríbó

Sorry for delay again - project went in a different direction. Will mark as answered.