We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › PNG from screen with transparent background
Page Index Toggle Pages: 1
PNG from screen with transparent background (Read 3484 times)
PNG from screen with transparent background
Jan 13th, 2009, 9:52pm
 
Hi, I'm wondering is it possible to create a png from the screen with the background transparent. I've tried specifying the alpha option on the background() but it appears to have no affect.
Code:

void setup() {
colorMode(HSB,256);
size(600,400);
background(0,0,0,0);
smooth(); noStroke();
} // end setup()

void draw() {
drawcluster();
save("filetest.png");
exit();
} // end draw


The above creates a png with a black background.

Thanks for your help.
Re: PNG from screen with transparent background
Reply #1 - Jan 13th, 2009, 10:07pm
 
Ah, not from screen (ie. not screen capture), but from displayed sketch.
See save() reference: "To save images without a background, use createGraphics()."
Re: PNG from screen with transparent background
Reply #2 - Jan 13th, 2009, 10:28pm
 
Hi,

Is this only for the newest version because the reference files I have installed with my version (0135) do not have that information.

Thanks.

Re: PNG from screen with transparent background
Reply #3 - Jan 13th, 2009, 11:22pm
 
Ah, indeed. But I think it already worked with this version.
Re: PNG from screen with transparent background
Reply #4 - Jan 14th, 2009, 2:09am
 
Hi,

PhiLho  wrote on Jan 13th, 2009, 11:22pm:
Ah, indeed. But I think it already worked with this version.


According to the doc for the 0135 version, createGraphics() is only available when working in 3D with a note that 2D is yet to be implemented.

Looks like it's time to upgrade.

Thanks for your help.
Re: PNG from screen with transparent background
Reply #5 - Jan 15th, 2009, 4:30am
 
Hi,

I've installed the latest version of Processing but still can not create a png file that has a transparent background. FYI, I no longer get the black background I was getting but rather wind up with a pale gray background.

Can someone here please provide me with a pde that does produce a png with a transparent background so that I can see if it will work on my system.

Thanks.
Re: PNG from screen with transparent background
Reply #6 - Jan 15th, 2009, 11:12am
 
OK, I recycled a sketch to illustrate this:
Code:
PGraphics frameToSave;
boolean bSaveToFile = true;

void setup()
{
size(500, 500);
int hw = width/2, hh = height/2;
noLoop();

if (bSaveToFile)
{
frameToSave = createGraphics(width, height, JAVA2D);
frameToSave.beginDraw();
frameToSave.noFill();
}
background(222);
translate(hw, hh);
frameToSave.translate(hw, hh);
SetParams(0x8800EE00, 0xAA00CC00, 1);
DrawIrregularCircle(235, 245, PI/877, PI/617);
SetParams(0x880000EE, 0xAA0000CC, 3);
DrawIrregularCircle(200, 230, PI/43, PI/31);
SetParams(0x88EE0000, 0xAACC0000, 5);
DrawIrregularCircle(100, 200, PI/17, PI/11);
if (bSaveToFile)
{
frameToSave.endDraw();
frameToSave.save("NiceImage.png");
}
}

void SetParams(color fColor, color sColor, int sw)
{
fill(fColor);
stroke(sColor);
strokeWeight(sw);
if (bSaveToFile)
{
// No fill, to show transparency
frameToSave.stroke(sColor);
frameToSave.strokeWeight(sw * 2);
}
}
void DrawIrregularCircle(
int radiusMin, int radiusMax,
float angleIncrementMin, float angleIncrementMax
)
{
float angle = 0;
beginShape();
if (bSaveToFile) frameToSave.beginShape();
do
{
angle += random(angleIncrementMin, angleIncrementMax);
float radius = random(radiusMin, radiusMax);
float x = radius * cos(angle);
float y = radius * sin(angle);
vertex(x, y);
if (bSaveToFile) frameToSave.vertex(x, y);
} while (angle < TWO_PI);
endShape(CLOSE);
if (bSaveToFile) frameToSave.endShape(CLOSE);
}
Re: PNG from screen with transparent background
Reply #7 - Jan 15th, 2009, 4:01pm
 
Hi PhiLho,

I am most indebted to you. Unfortunately I have to confess that within about 1 minute of seeing your code I realized the big DOH I had made. My save was of the screen area and not of the PGraphics object! The save that I was doing yielded results because I was also writing the PGraphics object to the screen as a way of confirming that my code had created the desired graphic.  

Changing the save(fileid) to pg.save(fileid) (pg being the name of my PGraphics object) fixed the problem.

Thank you for taking the time to help out.



Re: PNG from screen with transparent background
Reply #8 - Dec 30th, 2009, 7:18am
 
hi. does anyone know when this technique is going to support antialiasing? as in proper transparency?
thanks.x
Re: PNG from screen with transparent background
Reply #9 - Dec 30th, 2009, 7:23am
 
also, wouldnt it be cool if you could save a frame with a transparent background just with plain old, no "frameToSave.save()", easy-peasy save("filename");.
the only workaround ive got is rendering it to pdf and then importing into photoshop, which is less than ideal...
Re: PNG from screen with transparent background
Reply #10 - Dec 30th, 2009, 10:03am
 
Can you show a simple sample sketch illustrating the lack of anti-aliasing?

Quote:
save a frame with a transparent background

Well, I see no major issue with the pg.save() method. Not so convenient if you also want so feedback on screen, and slightly longer to write, but not a major issue. Beside, somebody shown a trick to draw on a PGraphics by making Processing think it draws in g, the default sketch's PGraphics, playing with references.
Re: PNG from screen with transparent background
Reply #11 - Dec 30th, 2009, 11:17pm
 
hi. yeah i see your point with the PGraphics technique, i just thought it would be convenient.
as for antialiasing, i was referring to the fact that pngs saved with the pgraphics technique only have binary transparency(no partial transparency). ive just had a look at the reference for it and it does seem that they've noticed this problem. fingers crossed it gets sorted soon.x
Re: PNG from screen with transparent background
Reply #12 - Dec 31st, 2009, 3:03am
 
Code:
PGraphics pg;

void setup()
{
size(400, 400);
// smooth();

pg = createGraphics(width, height, JAVA2D);
// pg.smooth();
noLoop();
}

void draw()
{
pg.beginDraw();
// Kind of reference shape...
stroke(25);
pg.fill(#FF8844);
pg.ellipse(width / 2, height / 2, width - 100, height - 100);

pg.noStroke();
for (int i = 0; i < 10; i++)
{
pg.fill(0xAA, 0xAA, 0xFF, i * 20 + 50);
pg.rect(i * width / 10, 0, width / 10, height);
}

pg.endDraw();
pg.save(savePath("PGraphics3.png"));

background(140);
image(pg, 0, 0, width, height);
}

I can see progressive transparency in the generated image.
AFAIK, transparency works only in Java2D mode.
Re: PNG from screen with transparent background
Reply #13 - Dec 31st, 2009, 7:33am
 
still no smoothness, even with all of the smooth(); calls turned on.
im talking about smooth outlines and shapes.
the bug tracker says its been assigned tho...
Page Index Toggle Pages: 1