Boost Processing Sketch Speed with Off‑Screen PGraphics Buffers

Why static drawing hurts frame rate

When every frame redraws the same detailed background, the CPU and GPU spend time repeating work that never changes. In a Processing sketch this shows up as a drop in frames per second, especially on modest hardware or when the background involves gradients, textures, or complex shapes.

Using PGraphics as an off‑screen cache

PGraphics creates an off‑screen graphics buffer that you can draw into once and then reuse with image(). The buffer lives in GPU memory (or RAM when using the default renderer) and is composited onto the screen each frame, eliminating the per‑frame cost of the static part.

Creating the buffer

PGraphics bg;

void setup() {
  size(800, 600, P2D);
  bg = createGraphics(width, height, P2D);
  bg.beginDraw();
  for (int y = 0; y < height; y++) {
    float inter = map(y, 0, height, 0, 1);
    int c = lerpColor(#003366, #0099CC, inter);
    bg.stroke(c);
    bg.line(0, y, width, y);
  }
  bg.endDraw();
}

void draw() {
  background(0);
  image(bg, 0, 0);
  fill(255, 100);
  noStroke();
  float x = width * 0.5 + 100 * sin(frameCount * 0.05);
  float y = height * 0.5 + 100 * cos(frameCount * 0.03);
  ellipse(x, y, 80, 80);
}

Trade‑off and verification

The buffer consumes memory proportional to its size: width × height × 4 bytes for a 32‑bit pixel format. Very large canvases or many layered PGraphics objects can exceed available RAM and cause slowdowns. Additionally, if the sketch window is resized the buffer must be recreated; otherwise the cached image will be clipped or stretched.

You can check the memory impact by printing the JVM heap usage before and after creating the buffer:

println(\"Before:\" + (Runtime.getRuntime().totalMemory() - Runtime.getRuntime().freeMemory()));
// create PGraphics here
println(\"After:  \" + (Runtime.getRuntime().totalMemory() - Runtime.getRuntime().freeMemory()));

Run the sketch and watch the console; the difference should approximate the buffer size. To confirm correct behavior after a resize, call surface.setSize(newW, newH) and then recreate the PGraphics with the new dimensions; verify that the background fills the window without distortion.

Closing thoughts

Off‑screen rendering with PGraphics is a straightforward way to separate static and dynamic drawing in Processing. By caching unchanging elements you gain higher, more stable frame rates, while keeping the code easy to read. Remember to size the buffer to your actual needs, recreate it on window changes, and monitor memory usage to avoid unexpected slowdowns.