offscreen PGraphics is ugly

janper

i'm using Processing 3 (and 2) on both, OSX and Windows. The linear graphics in offscreen PGraphics buffer is significantly uglier than directly drawn lines. It seems like the antialiasing on the edges of the shape doesn't work well.

Can you help me making the offscreen buffer graphics nicer?

exmple image ugly offscreen on the right, on-screen on the left

sample code

PGraphics pg;

void setup(){
  size (1024,768, P2D);
  pixelDensity(2);
  smooth();
  pg = createGraphics(width, height, P2D);
  noLoop();
}

void draw(){
  background (0);
  pushMatrix();
  translate (width/2-100, height/2);
  rotate (PI/6);
  stroke(255);
  noFill();
  strokeWeight(0.5);
  rect (0,0,100,100);
  popMatrix();

  pg.beginDraw();
  pg.smooth();
  pg.clear();
  pg.translate (width/2+100, height/2);
  pg.rotate (PI/6);
  pg.stroke(255);
  pg.noFill();
  pg.strokeWeight(0.5);
  pg.rect (0,0,100,100);
  pg.endDraw();

  image(pg,0,0, width, height);

  save("shot.png");
}

Thank you!

benja

Maybe this is because pg has a transparent background. Does it make a difference if you use an opaque background and draw the pgraphics first?

void draw() { 
  pg.beginDraw(); 
  pg.background (0); 
  pg.translate (width/2+100, height/2); 
  pg.rotate (PI/6); 
  pg.stroke(255); 
  pg.noFill(); 
  pg.strokeWeight(0.5); 
  pg.rect (0, 0, 100, 100); 
  pg.endDraw();

  image(pg, 0, 0, width, height);

  translate (width/2-100, height/2); 
  rotate (PI/6); 
  stroke(255); 
  noFill(); 
  strokeWeight(0.5); 
  rect (0, 0, 100, 100); 
}

clankill3r

https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest

KevinWorkman

Please link between crossposts: http://stackoverflow.com/questions/33468589/processing-3-offscreen-ugly

janper

benja, this doesn't help. i need to keep the pg transparent. this is indeed just a sample code - in reality my code is much more complex. simply - i don't want to avoid using the PGraphics buffer but rather to use it properly.

benja

The 'normal' drawing also uses a PGraphics-object in the background (but without transparency), so the transparency was the only difference that i knew off.
So this might not help you, but i guess this is the reason for the "ugliness".

KevinWorkman

@benja: You're half right, but please test your answers in your own code before posting them. Don't just guess.

The problem is caused by Processing enabling anti-aliasing by default. You enable it explicitly by calling the smooth() function, but note that this is extraneous since it's already enabled by default.

This causes your lines to be "blurred" between their own color and the background color. In the on-screen buffer, that background color is black. In the off-screen buffer, that background color is transparent. That's why your off-screen square looks more transparent- because it is.

To fix this, you either need to disable anti-aliasing by calling noSmooth(), or you need to make sure you're drawing to the same background color. Here is the noSmooth() approach:

PGraphics pg;

void setup(){
  size (1024,768, P2D);
  noSmooth();
  pg = createGraphics(width, height, P2D);
  noLoop();
}

void draw(){
  background (0);
  pushMatrix();
  translate (width/2-100, height/2);
  rotate (PI/6);
  stroke(255);
  noFill();
  strokeWeight(0.5);
  rect (0,0,100,100);
  popMatrix();

  pg.beginDraw();
  pg.noSmooth();
  pg.clear();
  pg.translate (width/2+100, height/2);
  pg.rotate (PI/6);
  pg.stroke(255);
  pg.noFill();
  pg.strokeWeight(0.5);
  pg.rect (0,0,100,100);
  pg.endDraw();

  image(pg,0,0, width, height);

}

I've also posted this as an answer here.

janper

thank you. but I don't understand, why cannot be the blurriness between my color and color(myColor.r,myColor.g,myColor.b,0.0).

KevinWorkman

I'm not sure what you're asking.

blindfish

@janper - it's a reasonable question. The closest comparion to what you're asking I can think of is in Photoshop's save to web dialogue. IIRC when you save to an image format that supports transparency you have the choice to have aliased edges or to select a colour against which anti-aliasing is applied to your edges: it doesn't simply anti-alias against 'transparent'. That can work well enough: if you know your transparent image will always be over light-coloured background you simply select a light colour to anti-alias against...

No idea whether that's possible in Processing; but have you tried simply increasing the strokeweight in your pgraphic to compensate for this effect?