Set part of PGraphics transparent

cameyo

I have a transparent PGraphics with some ellipses on it. Is there a way to draw a transparent ellipse (or any shape) on this PGraphics ? In other words, can i set to transparent some pixels of a PGraphics ?
Thanks :)

kfrajer

A simple example below. If you don't have a camera, then remove all references to it.

Kf

//INSTRUCTIONS: Modify camera settings. Mouse your mouse over sketch. Press
//              any key to toggle transparency effect.

    import processing.video.*;

Capture cam;

int keyhits;
PImage img;
boolean transparentON=false;

PGraphics pg;

void setup() {
  size(640, 480);
  cam = new Capture(this, 640, 480);
  cam.start();
  //loadPixels();

  pg=createGraphics(width>>2, height>>2);
  generatePG();
}

void captureEvent(Capture cam) {
  cam.read();
}
void draw() {
  image(cam, 0, 0);
  image(pg, mouseX-pg.width/2, mouseY-pg.height/2);
}

void keyPressed() {

  transparentON=!transparentON;
  println("Status:"+transparentON);

  if (transparentON==false) {
    generatePG();
  } else {
    pg.beginDraw();
    pg.loadPixels();
    //Loop through half of the image making those pixs transparent
    for(int i=0;i<pg.width*pg.height/2;i++){
      pg.pixels[i]=0x0;      
    }
    pg.updatePixels();
    pg.endDraw();

  }  
}

void generatePG() {
  pg.beginDraw();
  pg.noStroke();
  pg.fill(25, 25, 250);
  pg.rect(pg.width/2, 0, pg.width/2, pg.height);
  pg.fill(250, 145, 25);
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);  
  pg.endDraw();
}

cameyo

Thanks. Then pg.pixels[i]=0x0; set the pixel transparent :)
But can i draw a transparent shape ?
Can i set fill color and stroke color to transparent ? :-?

kfrajer

Try the reference: https://processing.org/reference/fill_.html

When I do pg.pixels[i]=0x0;, I change all the color attributes and set them to zero. You could try just changing the alpha component. An advantage of this approach is that you could set the alpha back to one to recover your shape(s) instead of redrawing the whole object again, as I am doing in the above example. Check the link and give it a try.

Kf

Lord_of_the_Galaxy

Uh, doesn't noFill() work better than using fill(transparent)?

cameyo

@kfrajer Don't work for me. I can't find a way to set fill parameter to transparent. :(
@Lord_of_the_Galaxy: noFill() does... nothing (PGraphics is unchanged).

cameyo

My question is unanswered...
I pressed "yes" by mistake :-S

kfrajer

can i set to transparent some pixels of a PGraphics

My example sets some pixels transparent. What is the purpose of drawing a transparent shape? You can do:

  pg.fill(25, 200, 25,150);  //RGBA values
  pg.rect(pg.width/4, pg.height/2, pg.width/2, pg.height/2);

Kf

cameyo

Yes, i have learned how to set transparent some pixels :)
Now i can use the for..loop to change the pixels directly.
But it's hard erase a shape (ie. ellipse) from a PGraphics with this method :-/

kfrajer

I see. It is very hard indeed. It is probably better to keep track of the actual calls. For example, if you draw three ellipses, four lines and a rectangle, in that order, then store them in an array list. If you want to erase (undo) them, you will remove the last one inserted and redraw the whole list of shapes left. If you are suing layers, then each layer should be a PGraphics object.

So you set the alpha to zero to erase them. Is that correct? Are you thinking in changing the alpha back to 255 to display them back again later on?

Kf

cameyo

@kfrajer: i'm trying to erase a painted PGraphics...no object, but paintstrokes.
I have solved with a for..loop, but it's a bit slow.
Thanks.

neilcsmith_net

You could use fill(0,0,0,0) and blendMode(REPLACE)?

GoToLoop

pg.pixels[i] = 0; can be replaced w/ clear(): 3:-O
https://Processing.org/reference/clear_.html

cameyo

@GoToLoop: This function clears everything in a PGraphics object to make all of the pixels 100% transparent. I want clear only selected pixels :)
@neilcsmith_net: i'll try your hint this afternoon B-)

Lord_of_the_Galaxy

Oh, so that's what you're trying to do. Now I understand. @neilcsmith_net's idea should work then.

kfrajer

@cameyo, I would def like to see your code using blendMode(REPLACE).

Kf

cameyo

@neilcsmith_net: fill(0,0,0,0) and blendMode(REPLACE) works (smoother than pixels[i] = 0x0;). Thank you so much ^:)^
@kfrajer: here is the code: forum
It's a long code...with a lot of bugs :(
Some infos:
Press 'k' to switch between Pencil and Eraser.
Ctrl + drag mouse on canvas --> change brush size
'u' for undo
'x' and 'y' for symmetry
Press 1..9 to select relative layer (or click on layer)
Ctrl-click layer --> change layer name
'UP and DOWN arrows' to change layer position
'SPACE' to toggle current layer visibility
'LEFT and RIGHT arrows' to change palette color'
Press 'SHIFT' to pick color anywhere
'z' for zoom
'TAB' to hide/show menu
'g' (toggle) allow to draw on transparent layer without glitch (try with a color with low saturation to see the difference. Note: it's sloooow on large canvas :()
Thanks for the help...but i have many other questions to you :)

Lord_of_the_Galaxy

Any sketch will be slow on large canvas.

cameyo

@Lord_of_the_Galaxy: please, try it without 'g' on..it's fast enough for me :)
p.s. sorry for bad english... i'm italian . :x

Lord_of_the_Galaxy

@cameyo It was a general comment - any sketch will be slower on larger canvas. Not specific to your sketch.

cameyo

@Lord_of_the_Galaxy: yes, you right (I have not taken as a criticism). ;;)

Lord_of_the_Galaxy

Ok. Good sketch otherwise, at least from the looks of it. I checked the code, but couldn't run it.

cameyo

@Lord_of_the_Galaxy: i have downloaded it and run normally (windows 10 and processing 3.2.4)
I'd like to known if other users have problems to run it.

Lord_of_the_Galaxy

O, you're having a misunderstanding- I never even got a chance to try. Sorry for not explaining properly, I'm not native English either.

Lord_of_the_Galaxy

I'm using tablet, so can't run any sort of code.

cameyo

@kfrajer: have you seen the code ?

kfrajer

@cameyo sorry not yet. In my to do list! Thxs... That is a solution using blending mode right?

Kf

cameyo

@kfrajer: both are solutions. blendMode is smoother :)

kfrajer

@cameyo Really good work. In the reference, for blendmode replace it says:

REPLACE - the pixels entirely replace the others and don't utilize alpha (transparency) values

Does it work for you while using colors with alpha values? Or it doesn't matter in your case because you are only using it for the erase function. And for this function, your alpha values are always maximum aka. full values?

Kf

Lord_of_the_Galaxy

@kfrajer I guess completely means that the alpha values are also copied.

neilcsmith_net

@kfrajer - hmm, that's a confusing reference for this blend mode! :-\

REPLACE - the pixels entirely replace the others without blending

might be more accurate? Anyway, it's the one blend mode that completely ignores the destination colour, so you get the source pixel colour only, alpha channel included.

Lord_of_the_Galaxy

So I was right. Strange reference.

cameyo

@kfrajer: i am working to draw and delete with alpha... :)
@neilcsmith_net: i have not tried other than erase with blendMode REPLACE

koogs

There are two long threads about this, can we close one and stop the duplicated effort and references to code in other places?

Lord_of_the_Galaxy

@koogs if you mean https://forum.processing.org/two/discussion/20797/overlay-transparent-pgraphics#latest then I think that both have slightly different topics. So it may be right enough to leave them as different.
But I'll link this there since they're related topics.

Lord_of_the_Galaxy

And I'd say the same for https://forum.processing.org/two/discussion/20716/copy-pgraphics-by-value#latest also.

neilcsmith_net

@koogs if you mean the thread @Lord_of_the_Galaxy first linked to, then they're actually completely different questions with completely different answers.

Lord_of_the_Galaxy

( @neilcsmith_net's comments have appeared thrice, so pls delete two of them)

neilcsmith_net

@Lord_of_the_Galaxy wtf?! :-S Sorry about that. Not sure what happened there - forum started behaving funny on Android. Can we not delete?

Lord_of_the_Galaxy

Members can't delete. Moderators can. So we wait.