Understanding void draw() in processing - processing

Question

I am tinkering with Processing and cannot figure out how to write text over an image I created using the image buffer (rotating squares)...when the square becomes smaller than the text, the changing digits wrote on top of each other. Cannot use resetting the bkg as a solution because that erases the overlapping images. Still having a hard time understanding this area...
Question: How to get the text to appear on top of the rotating squares without resetting the bkg and without the text writing over itself
Code below
Thank you!
float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;
void setup () {
size(640,480);
rectMode(CENTER);
}
void drawText() {
//translate(width/2,height/2);
textAlign(LEFT, CENTER);
fill(255, 255, 255);
textSize(32);
text("RED: " + boxColorR,width/2,height/2);
text("GREEN: " + boxColorG,width/2,height/2+30);
text("BLUE: " + boxColorB,width/2,height/2+60);
text("Box Width: " + boxW,width/2,height/2+90);
}
void drawBox() {
translate(width/2,height/2);
rotateAmount += 12;
if (boxColorR <= 0) {
boxColorG--;
}
if (boxColorG <= 0) {
boxColorB--;
}
boxColorR--;
boxW--;
rotateAmount += .05;
rotate(rotateAmount);
fill(boxColorR,boxColorG,boxColorB);
rect(0,0,boxW,boxW);
resetMatrix();
}
void draw() {
//rect(width/2,height/2,640,480); //this solves the text overlapping but erases the cool effect
drawBox();
drawText();
}

Answer 1

Most Processing sketches use a call to the background() function as the first line in the draw() function. This clears out anything drawn in previous frames.
However, you want to keep the stuff drawn in previous frames, so you don't want to clear them out. The problem with this is that since your text isn't cleared out either, your text ends up looking garbled.
The solution to this is to use the PGraphics class to create an off-screen buffer. You draw the squares to the buffer instead of to the screen. Then you draw the buffer to the screen, and finally, you draw the text on top of the buffer.
Since you draw the buffer to the screen each frame, it clears away the old text, but the squares you've previously drawn are maintained in the buffer.
Code speaks louder than words:
float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;
//create a buffer to draw boxes to
PGraphics buffer;
void setup () {
size(640, 480);
buffer = createGraphics(640, 480);
}
void drawText() {
//translate(width/2,height/2);
textAlign(LEFT, CENTER);
fill(255, 255, 255);
textSize(32);
text("RED: " + boxColorR, width/2, height/2);
text("GREEN: " + boxColorG, width/2, height/2+30);
text("BLUE: " + boxColorB, width/2, height/2+60);
text("Box Width: " + boxW, width/2, height/2+90);
}
//draw boxes to buffer
void drawBox() {
buffer.beginDraw();
buffer.rectMode(CENTER);
buffer.translate(width/2, height/2);
rotateAmount += 12;
if (boxColorR <= 0) {
boxColorG--;
}
if (boxColorG <= 0) {
boxColorB--;
}
boxColorR--;
boxW--;
rotateAmount += .05;
buffer.rotate(rotateAmount);
buffer.fill(boxColorR, boxColorG, boxColorB);
buffer.rect(0, 0, boxW, boxW);
buffer.resetMatrix();
buffer.endDraw();
}
void draw() {
//draw the boxes to the buffer
drawBox();
//draw the buffer to the screen
image(buffer, 0, 0);
//draw the text on top of the buffer
drawText();
}