Working with PGraphics

beginDraw() and endDraw()

The two functions beginDraw() and endDraw() open and close the draw loop for the PGraphics layer.

Since we want to reference a specific PGraphics object here, we need to target it using the so-called “Dot Syntax”.

Processing

PGraphics pg;

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

void draw() {

  pg.beginDraw();
  // This is the draw-loop of pg
  pg.endDraw();

}

P5.js

let pg;

function setup(){
  createCanvas(500,500);
  pg = createGraphics(300,300);
}

function draw() {
  image(pg, 10, 10);
}

---

Displaying the PGraphics-object with the image()-function

Processing

PGraphics pg;

void setup() {
  size(900, 900);
  pg = createGraphics(600, 600);
}

void draw() {
  background(#FFFF00);
  
  pg.beginDraw();
  pg.background(0);
  pg.endDraw();
  
  imageMode(CENTER);
  image(pg,width/2,height/2);
  
}

P5.js

let pg;

function setup() {
  createCanvas(500, 500);
  pg = createGraphics(300, 300);
}

function draw() {
  background('#FFFF00');

  pg.background(0);

  imageMode(CENTER);
  image(pg,width/2,height/2);

}

---

Language Comparison

Processing	p5.js
image()	image()
beginDraw() and endDraw()	–