Processing:Transparent Image Array

Question

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!

score 1 · Accepted Answer · answered May 01 '18 at 16:40

1

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.

answered May 01 '18 at 16:40

Kevin Workman

41,537
9
68
107

Hey, thanks for the reply! As you said, the background () function fills it with a solid color, which I am trying to avoid so as to preserve the alpha transparency. That's why I'm using PGraphics, as opposed to just PImage. – K___S May 01 '18 at 16:44
@K___S The window itself isn't transparent, is it? Call the `background()` function inside the `draw()` function to redraw the window background to clear out old frames. – Kevin Workman May 01 '18 at 16:47
Hey Kevin, thanks so much! My confusion came from the fact that I thought if I call background (); in draw() it would save with the background, but it didn't. – K___S May 01 '18 at 16:57
@K___S What do you mean by saving with the background? – Kevin Workman May 01 '18 at 16:59
I thought if I called `background (255);` in `draw();` and call `pg.save ();` it would save the .png with the called background color. Does that make sense? – K___S May 01 '18 at 17:12
@K___S Ohh I see. That makes sense, but that's not what will happen. As long as you're calling `pg.save()`, only what you drew to `pg` will be saved. If you wanted to save what's shown on the screen, then you could call `save()` or `saveFrame()` without the `pg` variable. – Kevin Workman May 01 '18 at 17:27
@K__S please do not forget to give the green mark if Kevin Workman answered your question. – mourad May 01 '18 at 17:58

Processing:Transparent Image Array

1 Answers1