Issues with transparency in an offscreen graphic

Programming Questions

slade1

Issues with transparency in an offscreen graphic

in Programming Questions • 6 months ago

Hey, I'm trying to make a paint program, but for some reason when I try to use the transparency it shows up as a darker shade of what I want. The code I attached shows the issue. the commented out section is the desired effect, and I need to have multiple PGraphics. Each PGraphic is a different layer, so the actual program with display them on top of each other. Any suggestions or things I didn't explain well?

void setup(){
size(400,400);
img=createGraphics(width,height,P2D);
noStroke();
}
PGraphics img;
void draw(){
if(mousePressed){
img.beginDraw();
img.noStroke();
img.fill(255,0,0,40);
img.ellipse(mouseX,mouseY,30,30);
img.endDraw();
}
image(img,0,0);
}
/*
void draw(){
if(mousePressed){
fill(255,0,0,40);
ellipse(mouseX,mouseY,30,30);
}
}
*/

Replies(10)

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

Perhaps both canvas & your PGraphics gotta have the same background() color?

Here are my experiments on your code:

PGraphics img;

final static color BG = 0300, COLOUR = #FF0000;
final static short TRANSPARENCY = 050, DIMENSION = 040;

void setup() {
  size(400, 400);
  noLoop();

  img = createGraphics(width, height, P2D);

  img.beginDraw();
  img.background(BG);
  img.noStroke();
  img.fill(COLOUR, TRANSPARENCY);
  img.endDraw();

  mouseX = mouseY = width<<1;
}

void draw() {
  img.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
  img.endDraw();

  background(img);
}

void mouseDragged() {
  redraw();
}

slade1

Re: Issues with transparency in an offscreen graphic

6 months ago

This idea works, but only if there is one layer. If I try to call background twice to show 2 layers, the second seems to overwrite the first. Here's what I did with your code:

PGraphics img, img2;
final static color BG = 0300, COLOUR = #FF0000;
final static short TRANSPARENCY = 050, DIMENSION = 040;
int layer=1;
void setup() {
size(400, 400);
img = createGraphics(width, height, P2D);
img.beginDraw();
img.background(BG);
img.noStroke();
img.fill(COLOUR, TRANSPARENCY);
img.endDraw();
//duplicated the first and made a second
img2 = createGraphics(width, height, P2D);
img2.beginDraw();
img2.background(BG);
img2.noStroke();
img2.fill(COLOUR, TRANSPARENCY);
img2.endDraw();
//not sure what this next line does
mouseX = mouseY = width<<1;
}
void draw() {
if (mousePressed&&layer==1) {
img.fill(COLOUR, TRANSPARENCY);
img.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
img.endDraw();
background(img);
}
if (mousePressed&&layer==2) {
img2.fill(0, 255, 0,40);
img2.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
img2.endDraw();
//this second call to background overwrites the first
background(img2);
}
}
//this lets you click in the upper left and right corners to alternate between layers
void mouseReleased() {
if (mouseX<=20&&mouseY<=20) {
layer=1;
}
if (mouseX>=width-20&&mouseY<=20) {
layer=2;
}
}

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

Oh, so sorry! I've used background(img); in my example b/c it was only 1 PGraphics!!!

Of course, if you have more than 1, the upper layers have to use image() instead!

P.S.: Actually, all of them have to use image(), lest background() clears everything! <-- Forget it!

P.S.#2: mouseX = mouseY = width<<1; is only needed when using noLoop();.
It is so to avoid an uncalled-for circle when draw() is run once after sketch starts!

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

final static color BG = 0300, COLOUR1 = #FF0000, COLOUR2 = #00FF00;
final static short TRANSPARENCY = 050, DIMENSION = 040;

boolean isOtherLayer;

PGraphics img1, img2;

void setup() {
  size(600, 400);
  noLoop();

  img1 = createGraphics(width, height, P2D);
  img1.beginDraw();
  img1.background(BG, 0);
  img1.noStroke();
  img1.fill(COLOUR1, TRANSPARENCY);
  img1.endDraw();

  img2 = createGraphics(width, height, P2D);
  img2.beginDraw();
  img2.background(BG, 0);
  img2.noStroke();
  img2.fill(COLOUR2, TRANSPARENCY);
  img2.endDraw();

  mouseX = mouseY = width<<1;
}

void draw() {
  if (isOtherLayer) {
    img2.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
    img2.endDraw();
  }

  else {
    img1.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
    img1.endDraw();
  }

  background(isOtherLayer? img2:img1);
}

void mousePressed() {
  if (mouseButton == CENTER)   isOtherLayer = !isOtherLayer;
  redraw();
}

void mouseDragged() {
  redraw();
}

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

An alternative draw() !

void draw() {
  PGraphics currentLayer = isOtherLayer? img2:img1;

  currentLayer.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
  currentLayer.endDraw();

  background(currentLayer);
}

slade1

Re: Issues with transparency in an offscreen graphic

6 months ago

It's closer to what my goal is for sure. There's no more blackness showing up.

However, the goal is to be able to see the layers through each other. It's a good way to get the layers to change order, but you can't see through each of them. What about this: each layer remains off-screen, but I load all of the bottom layer's pixels onto the screen as points, then the next layers pixels, and so on. You don't see any of the images, just the points that are the same color and location are being put together on screen (if this makes sense).

If I can show you what I mean, I'll edit this to include the code

P.S. I'd like to be able to call it without using noLoop(), if it's possible

Edit: Is there a way to GET (not fully sure on how to use 'get') the pixels of the individual graphics and then put them on the screen? its seems like I can only use get() to find the info of pixels that are being displayed only.

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

Perhaps that problem is related to the graphics engine used, both for main canvas surface & other PGraphics.

I'm still using v1.5.1 and I know that v2.x.x has only JAVA2D & OPENGL for screen rendering.
Just experiment on the graphics engine on this new quick tweaked version.

You can use get() on individual PImage / PGraphics images. Although it is faster manipulating them by array pixels[]!

P.S.: Still hasn't removed noLoop(). For that you need to check if mouse is pressed before rendering!

final static color   BG = 0300, COLOUR1 = #FF0000, COLOUR2 = #00FF00;
final static short   TRANSPARENCY = 010, DIMENSION = 040;

final static String  CANVAS = JAVA2D;  // JAVA2D, P2D, P3D, OPENGL
final static String  ENGINE = JAVA2D;  // JAVA2D, P2D, P3D, OPENGL

final static boolean SMOOTHNESS = true;

boolean isOtherLayer;

PGraphics img1, img2;

void setup() {
  size(600, 400, CANVAS);
  noLoop();

  img1 = createGraphics(width, height, ENGINE);
  img1.beginDraw();
  img1.background(BG, 0);
  img1.noStroke();
  img1.fill(COLOUR1, TRANSPARENCY);
  if (SMOOTHNESS)    img1.smooth();
  else             img1.noSmooth();
  img1.endDraw();

  img2 = createGraphics(width, height, ENGINE);
  img2.beginDraw();
  img2.background(BG, 0);
  img2.noStroke();
  img2.fill(COLOUR2, TRANSPARENCY);
  if (SMOOTHNESS)    img2.smooth();
  else             img2.noSmooth();
  img2.endDraw();

  mouseX = mouseY = width<<1;
}

void draw() {
  final PGraphics currentLayer = isOtherLayer? img2:img1;

  currentLayer.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
  currentLayer.endDraw();

  background(currentLayer);
}

void mousePressed() {
  if (mouseButton == CENTER)   isOtherLayer = !isOtherLayer;
  redraw();
}

void mouseDragged() {
  redraw();
}

slade1

Re: Issues with transparency in an offscreen graphic

6 months ago

I think I got it!! I used blend, but I'm not entirely sure how it works

final static color BG = 0300, COLOUR1 = #FF0000, COLOUR2 = #00FF00;
final static short TRANSPARENCY = 050, DIMENSION = 040;
boolean isOtherLayer;
PGraphics img1, img2;
void setup() {
size(600, 400);
img1 = createGraphics(width, height, P2D);
img1.beginDraw();
img1.background(BG, 0);
img1.noStroke();
img1.fill(COLOUR1, TRANSPARENCY);
img1.endDraw();
img2 = createGraphics(width, height, P2D);
img2.beginDraw();
img2.background(BG, 0);
img2.noStroke();
img2.fill(COLOUR2, TRANSPARENCY);
img2.endDraw();
mouseX = mouseY = width<<1;
}
void mouseReleased() {
if (mouseButton == CENTER) {
isOtherLayer = !isOtherLayer;
}
}
void draw() {
background(BG, 0);
if (mousePressed&&mouseButton!=CENTER) {
if (isOtherLayer) {
img1.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
img1.strokeWeight(DIMENSION);
img1.stroke(COLOUR1, TRANSPARENCY);
img1.line(mouseX, mouseY, pmouseX, pmouseY);
img1.noStroke();
img1.endDraw();
}
else {
img2.ellipse(mouseX, mouseY, DIMENSION, DIMENSION);
img2.strokeWeight(DIMENSION);
img2.stroke(COLOUR2, TRANSPARENCY);
img2.line(mouseX, mouseY, pmouseX, pmouseY);
img2.noStroke();
img2.endDraw();
}
}
image(img1, 0, 0);
blend(img2, 0, 0, width, height, 0, 0, width, height, LIGHTEST);
}

PhiLho

Re: Issues with transparency in an offscreen graphic

6 months ago

There is something strange in your code: color BG = 0300
Why are you using an octal number to define a color?

GoToLoop

Re: Issues with transparency in an offscreen graphic

6 months ago

T'was moi whom's implemented those constants!

Just to prove that transparency would work on other background colors different from 0 (black) & -1 (white),
I've decided to have a lighter gray.

Pure white is also 0400 - 1, so I've picked 0300!

The other constants are also using octal literals! And I don't see what is wrong w/ that!?

I put constants at the top of a code so it's very easy to change a program's behavior by altering them!
If some1 doesn't like some of them, just change their assigned values!

Top Reply