PGraphics and Image problem

Processing Coding Questions
1

Hi everyone!

I’m struggling with a problem which i cant seem to solve.
I’m using PGraphics to sequentially save “layers” of my drawing as pngs with alpha channel.
Once i’ve drawn my elements and saved each of them as pngs, i want to blend all this elements together into a single png with alpha channel, as well as draw this composed image in the canvas.

I managed to accomplish all this -not without some botch trickery-, at the price of my sketch not updating anymore when a new frame is redrawn.

Why is this happening?

if i just comment the lines of code which draw the images of the layers to a new pgraphics context the problem disappears… but i don’t have my image with the blended layers saved any more… what can i do?

PGraphics pg;
PGraphics rtm;
PGraphics harm;
PGraphics full;

void setup() {
  size(800, 600);
  pg = createGraphics(width, height);
  rtm = createGraphics(width, height);
  harm = createGraphics(width, height);
  full = createGraphics(width, height);
  initAll(); 
}

void draw() {  
  background(0); 
  

  drawFunc1();  //draw this function
  copyGraphics(pg, rtm); //copy to the rtm context
  rtm.save("rtm.png"); //save png
  pg.clear(); //clear pg context
  

  drawFunc2();
  copyGraphics(pg, harm);  
  harm.save("harm.png");
  pg.clear();
  
  //draw the 2 previous contexts on a third context, and save a png
  full.beginDraw();
  full.image(harm,0,0); //commenting this line and the next one makes the
  full.image(rtm,0,0); //sketch run. Why does the sketch not work if this lines are executed? 
  full.endDraw();
  full.save("full.png"); 
  
  //draw the 2 contexts on the canvas and save a png
  image(harm, 0, 0); 
  image(rtm, 0, 0);
  save("canvas.png"); 
  
  //clear all
  harm.clear();
  rtm.clear(); 
  full.clear();   
}

void drawFunc1(){
  pg.beginDraw();
  pg.stroke(255);
  pg.fill(255,0,0);
  pg.ellipse(random(width),random(height),100,100);
  pg.endDraw();
}

void drawFunc2(){
  pg.beginDraw();
  pg.stroke(255);
  pg.fill(0,0,255);
  pg.rect(random(width),random(height),100,100);
  pg.endDraw();
}

void initAll(){
  
  pg.beginDraw();
  pg.background(0);
  pg.endDraw();
  
  rtm.beginDraw();
  rtm.background(0);
  rtm.endDraw();
  
  harm.beginDraw();
  harm.background(0);
  harm.endDraw();
  
  full.beginDraw();
  full.background(0);
  full.endDraw();
  
  pg.clear();
  harm.clear();
  rtm.clear();
  full.clear();
}


PGraphics copyGraphics(PGraphics src, PGraphics dest) {

  src.loadPixels();
  dest.loadPixels();
  arrayCopy(src.pixels, 0, dest.pixels, 0, src.pixels.length);
  dest.updatePixels();
  return dest;
}
3

Hi @eltrem,

No chance to test currently, but the clear() function calls should imo be called between beginDraw()/endDraw() to take effect.

Also on initAll it doesn’t makes much sense to set background(0) and call clear().
So, either you want black or you want transparent. :slight_smile:

Cheers
— mnse

2 Likes