PGraphics

PGraphics objects are basically independent little Processing-sketches that you can place as an image in your main sketch. Think of layers in Adobe Photoshop: In Processing, “layers” can be implemented with PGraphics.

Creating a PGraphics-object

To create a PGraphics object, several steps are necessary. First of all, a variable must be declared. Obviously you have to give it a suitable name in this step. I always keep the variable name short at this point and simply call the object pg. That makes sense, because later this name must be written very often in the code, which is very tedious with longer variable names.

PGraphics pg;

The next step is to initialize the object with the createGraphics()-function. This should be done at the top, in the setup.

The createGraphics()-function takes two or three parameters. The first parameter defines the width, the second parameter defines the height.

void setup() {
  createGraphics(600, 600);
}

Optionally you can define a renderer (for example P3D) with the third parameter. This way you can set whether the layer should be two- or three-dimensional. In this case, however, you must note that you must also define a renderer for the main sketch, otherwise Processing will not be able to execute the sketch. If you want to stay with 2D in the main sketch, it is best to use the P2D renderer here.

void setup() {
  size(900, 900, P2D);
  createGraphics(600, 600, P3D);
}

Once you have done all these steps, you can start writing the code for the PGraphics layer.

P5.js

The equivalent in P5.js is the P5.graphics object, like PGraphics it lets you draw on a secondary canvas from your main sketch.

let pg;

function setup() {
  createCanvas(600, 600, P2D);
  createGraphics(400, 400, WEBGL); //the actual code is the same as in Processing
}

---

Related Links

• Creative Coding Essentials

Language Comparison

Processing	p5.js
createGraphics()	createGraphics()