Using PGraphics for Offscreen Rendering in Processing to Boost Performance

Why use PGraphics for offscreen rendering

When a sketch repeatedly draws the same static elements—such as a background texture, UI panel, or pre‑computed pattern—each frame wastes CPU cycles redrawing pixels that never change. PGraphics creates an offscreen buffer that you can draw to once, then reuse with image() every frame. This moves the expensive work out of the draw() loop and leaves only a cheap blit operation.

Worked example: static blue rectangle

PGraphics buf;

void setup() {
  size(600, 400, P2D);
  // Create an offscreen buffer the same size as the window
  buf = createGraphics(width, height, P2D);
  buf.beginDraw();
  buf.background(255); // clear buffer
  buf.fill(0, 0, 255);
  buf.rect(100, 100, 200, 150); // draw once
  buf.endDraw();
}

void draw() {
  background(30);
  // Composite the offscreen buffer each frame
  image(buf, 0, 0);
}

Running this sketch should show a blue rectangle on a dark gray background that remains steady without flicker. The rectangle is drawn only once during setup(); each draw() call merely copies the buffer to the screen.

When to size and dispose the buffer

Match the buffer dimensions to the area you actually need. A full‑window buffer is simplest, but if you only render a 200×200 icon, createGraphics(200,200, P2D) saves memory. When the buffer is no longer required—e.g., after a level change—call buf.dispose() to release its native memory; otherwise the buffer stays allocated until the sketch ends.

Limitations and common pitfalls

• Missing beginDraw()/endDraw(): Drawing calls placed outside this pair affect the main canvas or are ignored, leading to blank output or unexpected artifacts.
• Globals refer to the main canvas: Variables like mouseX, mouseY, and frameCount still report values from the primary window unless you pass them explicitly into the buffer’s drawing code.
• Memory usage: Each pixel consumes roughly 4 bytes (ARGB) in the buffer; a 1920×1080 buffer needs about 8 MB. Size buffers only as large as necessary and dispose them when done.
• Clearing the buffer: If you redraw into the same buffer each frame, call background() or clear() inside beginDraw()/endDraw() to avoid ghosting from previous frames.

Quick verification checklist

1. Confirm that createGraphics() matches the renderer used in size() (e.g., P2D, P3D, or default).
2. Wrap all buffer drawing between beginDraw() and endDraw().
3. Call image(buf, x, y) (or a scaled variant) inside draw() to composite.
4. When the buffer is no longer needed, invoke buf.dispose() and set the reference to null to aid garbage collection.