Overlay Transparent PGraphics

cameyo

I want overlay two PGraphics on white background.
I tried:
PGraphics.tint() --> do not work at all
PGraphics mask --> strange results and black background
Here is my code for test:

PGraphics pg0, pg1, mymask0, mymask1, whiteMask, white;
float t0 = 0;
float t1 = 0;
void setup() 
{
  size(200, 200);
  smooth();
  pg0 = createGraphics(200, 200);
  pg1 = createGraphics(200, 200);
  mymask0 = createGraphics(200, 200);  
  mymask1 = createGraphics(200, 200);  
  whiteMask = createGraphics(200, 200);  
  white = createGraphics(200, 200);  
  white.beginDraw();
  white.noStroke();
  white.fill(255);
  white.rect(0,0,200,200);
  white.endDraw();
  makepg0();
  makepg1();
}
void draw() 
{
  // white background;
  background(255);
  //image(white,0,0);  
  //updateMask1();    
  //image(pg1, 0, 0);      
  updateMask0();
  //pg0.tint(255,128);
  image(pg0, 0, 0);    
  //tint(255,128);
  updateMask1();  
  image(pg1, 0, 0);  
  //tint(255,128);
}

void whiteMask()
{
  whiteMask.beginDraw();
  whiteMask.background(255);
  whiteMask.endDraw();
  white.mask(whiteMask);
}
void updateMask1()
{
  mymask1.beginDraw();
  mymask1.background(t1);
  mymask1.endDraw();
  pg1.mask(mymask1);

}
void updateMask0()
{
  mymask0.beginDraw();
  mymask0.background(t0);
  //mymask0.background(255);
  mymask0.endDraw();
  pg0.mask(mymask0);
}
void makepg0() // yellow rect
{
  pg0.smooth();
  pg0.beginDraw();
  pg0.fill(255,255,0);
  pg0.rect(50, 50, 100, 100);
  pg0.endDraw(); 
}
void makepg1() // red rect
{
  pg1.smooth();
  pg1.beginDraw();
  pg1.fill(255,0,0);
  pg1.rect(30, 30, 100, 100);
  pg1.endDraw(); 
}
void mousePressed() 
{
  t0 = random(20, 255);
  t1 = random(20, 255);
  println(t0,t1);
}

Can you help me?

neilcsmith_net

One of the calls to tint() you have commented out is on pg0. Why?

Surely you want to call tint() on the primary graphics, not the PGraphics.

kfrajer

Don't call the background function inside your PGraphic objects. I think that will solve your issue... maybe. What are you using tint and mask for? Are you trying these out as to demonstrate their functionality?

Kf

cameyo

@neilcsmith_net: because pg0.tint() don't works (one of the many attempts).
I have tried almost all the combinations with or without the commented code... :(
@frajer: removing background does not change anything.

neilcsmith_net

@cameyo you missed my point! It should be just tint() not pg0.tint().

cameyo

@neilcsmith_net: tint() change the transparency of main canvas (i must change the transparency of PGraphics. See image:

Layer 1 and layer 2 are transparent.
All my tests give a dark background :(

Lord_of_the_Galaxy

Layer 1 and 2 are transparent? Then what's that whitemask?

cameyo

@Lord_of_the_Galaxy: the background of layer 1 and layer 2 is transparent.
whitemask is only a test...and does not change pg0 or pg1.

neilcsmith_net

tint() change the transparency of main canvas (i must change the transparency of PGraphics.

@cameyo no it doesn't! tint() changes the colouring / transparency of whatever image you draw onto the main canvas - it's like fill() for PImage / PGraphics.

See https://processing.org/reference/tint_.html

Lord_of_the_Galaxy

Use tint, as @neilcsmith_net tells you to.

neilcsmith_net

PGraphics pg0, pg1;
void setup() 
{
  size(200, 200);
  smooth();
  pg0 = createGraphics(200, 200);
  pg1 = createGraphics(200, 200);
  makepg0();
  makepg1();
}
void draw() 
{
  // white background;
  background(255);
  tint(255,128);
  image(pg0, 0, 0);    
  tint(255,128);
  image(pg1, 0, 0);  
}

void makepg0() // yellow rect
{
  pg0.smooth();
  pg0.beginDraw();
  pg0.fill(255,255,0);
  pg0.rect(50, 50, 100, 100);
  pg0.endDraw(); 
}
void makepg1() // red rect
{
  pg1.smooth();
  pg1.beginDraw();
  pg1.fill(255,0,0);
  pg1.rect(30, 30, 100, 100);
  pg1.endDraw(); 
}

Works for me!

Lord_of_the_Galaxy

And to have layer 2 at 75% change line 17 of @neilcsmith_net's code to tint(255, 192);.

quark

The second tint at line 17 is not needed because you are not changing the tint values.

neilcsmith_net

@quark - the original code does try to change the opacity in mousePressed() differently for each PGraphics so I left it like that, but yes you're correct in this case.

Lord_of_the_Galaxy

@quark But for what the OP's example said, you'd need it, used like I mentioned before..

cameyo

@neilcsmith_net: wow !!! =D> Thanks for correct infos on tint(). Grazie mille.
@Lord_of_the_Galaxy: tint(255, 192); match my example :)

Lord_of_the_Galaxy

Related - https://forum.processing.org/two/discussion/20761/set-part-of-pgraphics-transparent#latest
And this - https://forum.processing.org/two/discussion/20716/copy-pgraphics-by-value#latest