Floating Above Paint

Processing Coding Questions
1

Hi all,

How do you arrange text to float above everything else on the canvas.

Even above the mouse painting.

S

2

You’ll have to put the text last in the draw() loop. This is because when stepping through the program whatever is last will be on top. Like:

void setup() {
  size(400, 400);
  background(51);
}

void draw() {
  fill(0);
  ellipse(mouseX, mouseY, 10, 10);
  fill(255);
  text("Hello world!", width/2, height/2);
}

You may notice that the text doesn’t look super great this is because it’s being redrawn every time through draw. You can solve this by using PGraphics. Which can be used like layers in photoshop. Here’s an example:

PGraphics painting;
PGraphics txt;

void setup() {
  size(400, 400);
  // setup graphics
  painting = createGraphics(width, height);
  txt = createGraphics(width, height);
  // draw text on txt graphics
  txt.beginDraw();
  txt.fill(255);
  txt.text("Hello World!", width/2, height/2);
  txt.endDraw();
}

void draw() {
  background(51);
  // use mouse position to paint on painting graphics
  painting.beginDraw();
  painting.fill(0);
  painting.ellipse(mouseX, mouseY, 10, 10);
  painting.endDraw();
  // the PGraphics are invisable unless you draw them using image()
  image(painting, 0, 0);
  image(txt, 0, 0);
}

Hope that helps and best of luck!

1 Like