G4P text is blurred without background()

Processing Libraries
1

Using Processing 3.5.3 and G4P V4.2.1 on Windows 7.

Why does G4P control text get blurred when not clearing the display window at the beginning of each frame?
image vs. image

Here’s a simple example:

import g4p_controls.*;

boolean bgIsSelected = false; 
GCheckbox cb1; 

void setup() {
  createCheckboxGUI();
}

void draw() {
  if (bgIsSelected) background(200);
}

void createCheckboxGUI() {
  cb1 = new GCheckbox(this, 5, 40, 100, 20);
  cb1.setText("Background");
  cb1.addEventHandler(this, "cb1_clicked1");
}

void cb1_clicked1(GCheckbox source, GEvent event) {
  bgIsSelected = !bgIsSelected;  // toggle signal
}

Thanks.

2

It’s usual in processing, not to do with g4p

3 Likes
3

How very true. Thank you!

To demonstrate the phenomenon, I added two lines to my original code and got this:
image vs. image

Here’s the code:

import g4p_controls.*;

boolean bgIsSelected = false; 
GCheckbox cb1; 

void setup() {
  fill(0, 0, 255); // added
  createCheckboxGUI();
}

void draw() {
  if (bgIsSelected) background(200);
  text("text()", 10, 80); // added
}

void createCheckboxGUI() {
  cb1 = new GCheckbox(this, 5, 40, 100, 20);
  cb1.setText("Background");
  cb1.addEventHandler(this, "cb1_clicked1");
}

void cb1_clicked1(GCheckbox source, GEvent event) {
  bgIsSelected = !bgIsSelected;  // toggle signal
}
1 Like
4

Unless I’m misunderstanding, this has nothing to do with G4P. This is true of all text (and all antialiased images, which characters are) in Processing.

If you don’t clear the background, then anything with a soft edge will compound over multiple frame draws, blooming out and developing crackly edges.

Try it:

void setup(){
  background(0);
  frameRate(5);
}
void draw(){
  // background(0); // enable to fix 
  text("abcdefghijklmnopqrstuvwxyz", 5, 10, 80, 100);
}
1 Like
5

Both @Chrisir and @jeremydouglass are correct in that G4P expects the use of background() inside the draw() method and that repeated antialiasing will blur soft edges.

For G4P there is a possible solution but it might not give you the visual appearance you are looking for. If you have a G4P control then you can make its background opaque with
control.setOpaque(true)

This will work for all visible G4P controls. The reason for this is that all visual G4P controls use an offsreen buffer for its graphics, this buffer normally has a transparent background but using the statement above the buffer background is a solid colour. The buffer is copied to the screen every frame overwriting the previous one.

2 Likes