Equivalent to PGraphics g in p5.js?

[figraham]

Something I’ve done in Processing is create a function that has an optional PGraphics argument by utilizing the g PGraphics in PApplet. Like:

void showEllipse() {
  showEllipse(g); // when in PApplet
  // showEllipse(applet.g); // when different class
}

void showEllipse(PGraphics pg) {
  pg.beginDraw();
  pg.ellipse(100, 100, 50, 50);
  pg.endDraw();
}

I’d like to do something similar in p5.js but after digging through the source code for an hour or so I couldn’t find an equivalent to the g variable. Is there an equivalent in p5.js?

Here’s what I’d like to do:

function showEllipse(pg) {
  if (typeof pg === 'undefined') {
    pg = ;// this is the part I'm not sure about, something like p5.instance.g maybe
  }
  pg.ellipse(100, 100, 50, 50);
}

I can think of a few other less elegant ways ways to solve this problem but I was hoping someone is more familiar with p5.js and knows where to find the main p5.Graphics, if there is one.

[GoToLoop]

hint(DISABLE_DEPTH_TEST) in P5

Shortest way to reach the sketch’s canvas rendering context is via undocumented variable drawingContext: gl = drawingContext; The canvas itself is under undocumented variable canvas. And its wrapper is under both undocumented variables _renderer & _curElement.

[figraham]

That helps, but it doesn’t really work the way I’d like because when using methods on a renderer you have to pass arguments as an array and it bypasses all the checks that p5 normally does. And it seems a fair amount extra work to find a way to convert the the args to an array only if the render is used. Here’s my progress on that if someone wants to go into it.

function showEllipse(pg) {
	if (typeof pg === 'undefined') {
		pg = _renderer;
	}
	pg.ellipse([100, 100, 100, 100]); // only works for when using _renderer and for some reason is using ellipseMode(CORNER);
	// pg.ellipse(100, 100, 100, 100); // only works for when not using _renderer
}

Will probably just do the following despite a little extra overhead I prefer that to code duplication or the headache of dealing with the renderer.

function showEllipse(pg) {
	let noGraphicsPassed = typeof pg === 'undefined';
	if (noGraphicsPassed) {
		pg = createGraphics(width, height);
	}
	pg.ellipse(100, 100, 100, 100);
	if (noGraphicsPassed) {
		image(pg, 0, 0);
		pg.remove();
	}
}

If anyone is interested they can see it in action in this sketch.

[GoToLoop]

@figraham

… when using methods on a _renderer you have to pass arguments as an array and it bypasses all the checks that p5 normally does.

Unfortunately, createCanvas() instantiates a p5.Renderer object, while createGraphics() instantiates a p5.Graphics object, which is a wrapper for a p5.Renderer object, plus it acts as a p5 object too:

Working with mouseDragged() and other mouse events inside a class

Each instance of p5 got a <canvas> element (HTMLCanvasElement) attached to it. Just like a Processing Java Mode’s PApplet got a canvas (PGraphics) as well. When we call createCanvas(), it returns a p5.Renderer object; which is a subclass of p5.Element btW. Besides the main <canvas>, we can create additional offscreen canvases via createGraphics(). However, it returns a hackish wrapper p5.Graphics instead of an actual p5.Renderer! A p5.Graphics got all of the properties of a p5 instance, besides…

It’s very inconsistent & hard to study how the p5js API deals w/ those 2 classes across its source code!

There are other problematic patches to deal w/ p5.Image objects too.
For some reason, the class p5.Image doesn’t inherit from p5.Element!
And therefore, it’s not a parent class for neither p5.Renderer nor p5.Graphics!

BtW, I’ve always ranted & been against this hackish p5.Graphics class from the very beginning of the p5js project.

[Kevin]

This seems to work:

function showEllipse(pg) {
	if(!pg){
		pg = this;
	}
	pg.ellipse(100, 100, 100, 100);
}

You could also use instance mode so you have a sketch variable that you can use directly.