processing 3 offscreen ugly

Question

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?

Example 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!

This question has also been crossposted in the Processing forum here.

Please link between crossposts: https://forum.processing.org/two/discussion/13355/offscreen-pgraphics-is-ugly — Kevin Workman, Nov 02 '15 at 13:10

score 1 · Answer 1 · answered Nov 03 '15 at 13:15

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);

}

processing 3 offscreen ugly

1 Answers1