Transparency in save() function

Processing Coding Questions
1

So I made this code where you can draw and create an image. This works just fine but is it possible to get an image with a transparant background? Is there like a function to remove everything with RGB code white in a certain area?

Code:

float oldX;
float oldY;
PImage test;
void setup(){
  fullScreen();
  background(255);
  rect(40, 150, 200 ,100);
  test = loadImage("test.jpg");
}
void draw(){
 if(mousePressed){
   line(mouseX, mouseY, oldX, oldY);
 }
 oldX = mouseX;
 oldY = mouseY;
 
 if(keyPressed && key == 's'){
  test = get(40, 150, 200, 100);
  test.save("test.jpg");
 }
 if(keyPressed && key == 'i'){
   background(0);
   image(test, width/2,height/2);
 }
}
1 Like
2

Hi,

Yes you need to use PGraphics to draw your stroke on a separate “buffer” then save it.

So you would only draw the stroke on that buffer and the background on the main canvas because you want transparency.

Since you are talking about transparency, you don’t want to save a .jpg image because it doesn’t support alpha but rather in .png.

1 Like
3

I read the information on the processing website and after begindraw() they made a background. Are you supposed to make one and remove it later or later or can you draw without that background? How does this function make it transparant?

4

The PGraphics is transparent in itself.
You just write in draw():

pg.beginDraw();
pg.line(mouseX, mouseY, oldX, oldY);
pg.endDraw();

then you save with pg.save(…);
An eventual background on the canvas will not be saved.
Only if you draw it on the PGraphics with pg.background(…);

2 Likes
5

Hello,

createGraphics() / Reference / Processing.org < See the description for discussion of transparency

PGraphics / Reference / Processing.org < Try it with and without a background and also with alpha different values.

background() / Reference / Processing.org

background(v1, v2, v3, alpha)

Another hint:
pmouseX / Reference / Processing.org

UPDATE Modified pg.background() to be semi-transparent.

Example from references with some tweaks:

PGraphics pg;

void setup() 
  {
  size(100, 100);
  pg = createGraphics(40, 40);
  }

void draw() 
  {
  background(0, 255, 0);
  
  pg.beginDraw();
  pg.background(255, 128, 0, 64); // Semi-transparent background
  pg.stroke(0);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
  }

I encourage you to tinker with the examples. Much to learn there is.

:)

6

Thanks for the reply the background is indeed transparent. But my code broke… I can’t make a drawing and I can’t figer out why it isn’t working.

float oldX;
float oldY;
PImage test;
PGraphics pg;
void setup(){
  fullScreen();
  background(255);
  rect(40, 150, 200 ,100);
  test = loadImage("test.png");
  pg = createGraphics(200,100);
}
void draw(){
 if(mousePressed){
   pg.beginDraw();
   pg.background(0,0,0,0);
   pg.stroke(255);
   pg.line(mouseX, mouseY, oldX, oldY);
   pg.endDraw();
   pg.image(pg, 40,150);
}
 oldX = mouseX;
 oldY = mouseY;
 
 if(keyPressed && key == 's'){
  pg.get(40, 150, 200, 100);
  pg.save("test.png");
 }
 if(keyPressed && key == 'i'){
   background(100,100 ,0);
   image(test, width/2,height/2);
 }
}
7

Hello,

Your stroke is white and your background is white.

Try this:

image(pg, 40,150);

:)

8

But if my stroke is white and I press “s” and “i” in my program, which changes the background color, than I would see the white drawing… But I dont see it…

9

Hi,

If you want to draw in the PGraphics buffer, you need to place all the drawing operations between pg.beginDraw() and pg.endDraw().

Here you are drawing pg inside pg itself which makes no sense, you need to draw pg outside in the draw() function.

10

“Place all the drawing operations between pg.beginDraw() and pg.endDraw() .”

“you need to draw pg outside in the draw() function.”

What do you mean?

Should it be like this:

void draw(){
   pg.beginDraw();
   pg.background(0,0,0,0);
   pg.stroke(255);
   pg.endDraw();
   pg.image(pg, 40,150);
 if(mousePressed){
   Pg.line(mouseX,mouseY,oldX,oldY);
}
11

Try this:

   test = loadImage("test.png");
   image(test, 40, 0);

:)

12

Read and try examples in the references again; you are straying from the examples and suggestions.

Updated example from the references:

PGraphics pg;

void setup() 
  {
  size(100, 100);
  pg = createGraphics(40, 40);
  }

void draw() 
  {
  background(0);
  pg.beginDraw();
  pg.background(128, 64); //Semi-transparent
  pg.stroke(255);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
  }
  
void keyPressed()
  {
  pg.save("test.png");
  }

I had the sketch window open to view the saved file:
image

:)

13

Thanks for all your help on my question. I got it working, the mistake wasn’t where you said it was… What I was doing inthe draw() was right but I had “pg = createGraphics(200,100);” which was messing the program up, when I changed it to: “pg = createGraphics(width,height);” it suddenly worked… probably because I wans’t using size() but fullScreen().

1 Like
14

Can you post your final solution?

:)

15

Sure. I have already expanded on it a bit for the use it will have in the future but this works. You can make 3 drawings in the squares and they will be saved with a transparant background. It is working now because the whole screen now has the buffer.

float oldX;
float oldY;
PImage test;
PImage test2;
PImage test3;
PGraphics pg;
boolean drawscreen = true;
void setup(){
  fullScreen();
  noFill();
  background(255);
  rect(40, 150, 200 ,100);
  rect(40, 300, 200, 100);
  rect(40, 450, 200, 100);
  test = loadImage("test.png");
  pg = createGraphics(width,height);
}
void draw(){
   if (drawscreen == true) {  //background(0);
  if (mousePressed) {
    pg.beginDraw();
   // pg.background(0, 0); //Semi-transparent
      pg.stroke(0);
      pg.strokeWeight(5);
      pg.line(mouseX, mouseY, oldX, oldY);
    
    pg.endDraw();
     image(pg,0,0,width,height);
  }
    oldX = mouseX;
    oldY = mouseY;
  }
 
 
}
void keyPressed(){
  if(keyPressed && key == 's'){
    test = pg.get(40,150,200,100);
    test2 = pg.get(40,300,200,100);
    test3 = pg.get(40,450,200,100);
    //pg.save("test.png");
 }
 if(keyPressed && key == 'i'){
   drawscreen = false;
  background(100, 255, 0); 
  image(test, 1000, 150);
  image(test2, 1000, 300);
  image(test3, 1000, 450);
 }
  
}