How to use fade effect with an image

edited January 2016 in Questions about Code

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);

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) {

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


    if (setState ==1) {

      image (conceptPics[0], 0, 0);


  • edited January 2016 Answer ✓

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

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

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

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

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

Sign In or Register to comment.