arraysprocessingtransparentpgraphics

Processing:Transparent Image Array

I'm new to processing and I got stuck on this:

Aim: I want to make an array of transparent images, shown one at a time after each mousePressed ()

Problem: What happens is due to the fact that there is an alpha transparency on all images, they overlap and there is a cumulative effect. What I want to do, ideally is to clear it and then show another image. 

PGraphics pg;
PImage[] 
myImageArray = new PImage[12];

void setup() {
  //background (255,0);
  size(1024, 1024,P2D);

 for (int i=0; i<myImageArray.length; i++) {
    myImageArray[i] = loadImage( "A-0" + i + ".png");
    pg = createGraphics (1000,1000);
  }
}

void draw() {
 pg.beginDraw (); 
 pg.image(myImageArray[(int)random(12)], 0, 0, 1000, 1000);
 pg.endDraw ();

 image(pg,0,0); 
 noLoop ();
}
void mousePressed() {

  pg = createGraphics(1000,1000);
 if (frameCount > 1) {
  pg.beginDraw ();
  pg.clear();
  pg.endDraw ();
loop ();

  }

}

Any advice would be greatly appreciated!

Solution

  • It sounds like you're just looking for the background() function. The background() function clears out old frames by drawing a solid color as the background.

    You can find more info in the reference.