PGraphics text is pixelated

Processing
1

Hi,

When I use PGraphics.text() the text is very pixelated and low quality, below is a comparison of PApplet.text() and PGraphics.text() using the same .ttf and same font size:

Click me

Why is this happening?

2

Can you please post a simple MCVE so we can see the problem?

3

OK

PFont font;
PGraphics pg;
int size = 14;

void setup() {
 size(800,800); 
 font = createFont("https://github.com/JotJunior/PHP-Boleto-ZF2/blob/master/public/assets/fonts/arial.ttf?raw=true",128);
 pg = createGraphics(800,800);
 textFont(font);
}

void draw() {
  background(0);
  textSize(size);
  text("TEST",20,100);
  pg.beginDraw();
  pg.textFont(font,size);
  pg.text("TEST",20,400);
  pg.endDraw();
  image(pg.get(0,0,800,800),0,0);
  pg.clear();
  text(size,600,40);
}

void mouseWheel(MouseEvent e) {
    size -= e.getCount();
}

Scroll to change the font size. My issue occurs at smaller font sizes (e.g 12 , 14). I included .get() because I used it in my original code to get part of the PGraphics image.

1 Like
4

I think the issue is that you are calling pg.clear(); outside the pg.beginDraw() and pg.endDraw() block. Try moving this line to directly after pg.beginDraw();.

1 Like
5

You seem to be using textSize() in one place and textFont() in the other. From recollection these don’t always behave the same. At least try with the same functions.

You should also use the version of image() that has 9 parameters to specify the region you want rather than using pg.get().

6

@colouredmirrorball did that and the problem still persists.

@neilcsmith in my original code I tried using either textFont for both or textSize for both but there seems to be no difference. using the image() with 9 parameters (with uv coordinates) didn’t work either. My temporary solution was to draw the text twice so it’s much more clearer, and adjusting the fill alpha if it’s too bright. Well it works :stuck_out_tongue:

7

Some related past discussions on the old forum: