How do I get my saved pngs to match my screenshots?

zswatson

How do I get my saved pngs to match my screenshots?

in Integration and Hardware • 2 years ago

I'm drawing a bunch of almost transparent lines (well, beziers) on a black background. When I take a screenshot, I get what I want; where only one line is drawn, it's almost invisible, but where they overlap you get some nice contrasting light bits. Now I'm trying to do a bunch of these, but I can't figure out how to get the same look while saving out: I've tried save() and saveFrame(), and both are giving me less contrast. I'm completely stumped here - as far as I can tell, I should be getting the same thing from save() as if I take a screenshot, no? I'm using 1% alpha, if that's important, and I'm not drawing on images, it's all directly on the display window.

For reference, here's a screenshot, looking how I want:
Screenshot

and here's the exact same thing saved out:
Saved Image

Anyone have any ideas?

Replies(9)

calsign

Re: How do I get my saved pngs to match my screenshots?

2 years ago

I know that some filetypes support transparency more or less than others, but I'm not sure which ones support what. Try changing the filetype...

zswatson

Re: Re: How do I get my saved pngs to match my screenshots?

2 years ago

Hmmm, no luck. I don't THINK transparency should matter once I get to saving - I'm drawing my beziers on a black background, and the save() docs mention that the main drawing window doesn't support opacity. Figured that might be it, so I also just tried drawing everything onto a PGraphics - no dice. Came out exactly the same as the saved file from the display window. Bleh.

calsign

Re: How do I get my saved pngs to match my screenshots?

2 years ago

The main drawing window doesn't support transparency directly, but you can draw with a transparent color onto it. I had thought that certain image formats supported lower or higher color quality.
Another thought might be the renderer... I'm guessing that you're probably using JAVA2D? Sometimes they have weird quirky differences- either way, changing the renderer should have a different result... it would also depend on what you are using to view the screenshot. Not fully thought through yet, but just a suggestion.

zswatson

Re: Re: How do I get my saved pngs to match my screenshots?

2 years ago

Yeah, I'm using JAVA2D. I'm definitely using transparent strokes on the main display, I just meant it shouldn't matter if the format I'm writing to supports transparency, since Processing isn't writing an alpha channel from the main display. And that seems to be true, all the formats gave the same image.

At this point, I figure there's something going on between what Processing thinks is my in my display window, and what my computer is showing me. I'm viewing the processing directly (i.e., it's not running as an app), and it looks different than if I open up what Processing saves out. Maybe there's some kind of smoothing or filter applied to the main display window that isn't applied to the saved version? Not really sure.

PhiLho

Re: How do I get my saved pngs to match my screenshots?

2 years ago

Are you on a Mac?
I have read the Macs treat gamma differently than Windows. Maybe this difference is visible only on display. Although when the saved image is displayed, the same correction is applied. Unless the two corrections (on display of sketch, then on display of image) cumulates?

I opened the PNGs with TweakPNG, a great (Windows) tool to see the technical parts of the image, I saw the screenshot has an ICC profile from Photoshop (is that the tool you used to make your screenshot?) or some other Adobe tool (I don't remember precisely). But removing these color correction attributes didn't change the display on my Win7 computer, the screenshot is still slightly brighter.

zswatson

Re: Re: How do I get my saved pngs to match my screenshots?

2 years ago

Yep, Mac. I am using Photoshop to save the screenshot, but what I see in the Processing display matches what's saved out, so I don't think it's anything to do with Photoshop. I'll have to try booting into Windows and see if that changes anything...

amnon.owed

Re: How do I get my saved pngs to match my screenshots?

2 years ago

Could you provide a simple code example reproducing this issue. That way we can see if it's specific to your computer or not. And also it may be easier to see where the problem is and/or find a solution.

zswatson

Re: Re: How do I get my saved pngs to match my screenshots?

2 years ago

Sure. Here's a bit where I've reworked it to random points, instead of loading from files. I'm getting the same effect - try taking a screenshot when it's done, and compare to the file I'm saving out at the end.

float[][] pointlist = {};

void setup() {
size(900, 450, JAVA2D);

background(0);
stroke(255);
frameRate(24);
randomSeed(10);

for(int i = 0; i < 48; i++){
    float[] p = {50 + random(800), 50 + random(350)};
    pointlist = (float[][]) append(pointlist, p);
}

testBeziers(10000);
}

void drawBezier(float x1, float y1, float x2, float y2, float eccentricity) {
float xm = (x2 + x1) / 2;
float ym = (y2 + y1) / 2;
float angle1 = atan((y1 - ym)/(x1 - xm));
float angle2 = atan((y2 - ym)/(x2 - xm));

float distance = sqrt(pow(x1 - x2, 2) + pow(y1 - y2, 2));
float offset = distance * eccentricity * random(.8, 1.2);
float controlx = xm + offset * cos(angle1 - HALF_PI);
float controly = ym + offset * sin(angle1 - HALF_PI);

float c1x = (controlx + x1) / 2;
float c1y = (controly + y1) / 2;
float c2x = (controlx + x2) / 2;
float c2y = (controly + y2) / 2;

bezier(x1, y1, c1x, c1y, c2x, c2y, x2, y2);
}

void testBeziers(int bezierCount) {
for(int i = 0; i < bezierCount; i++) {
    float[] point1 = pointlist[int(random(pointlist.length))];
    float[] point2 = pointlist[int(random(pointlist.length))];
    //print(str(point1[0]) + '\t' + str(point1[1]) + '\n');

    colorMode(HSB, 100);
    noFill();
    stroke(66, 15, 100, 1);
    drawBezier(10 + point1[0], 10 + point1[1], 10 + point2[0], 10 + point2[1], .2);
}

save("beziertest1.png");
}

PhiLho

Re: How do I get my saved pngs to match my screenshots?

2 years ago

On Windows 7, taking the screenshot with MWSnap, the images are identical (visually).

Top Reply