Support shader-based filters after resizing/changing pixel density about p5.js

[davepagurek]

I believe changing the pixel density will also have similar effects, so I'm updating the title of the issue to include that too.

[aferriss]

Good catch! @wong-justin do you want to take a look at this?

[wong-justin]

Yes I'll have a look. Thanks @davepagurek for catching it

[davepagurek]

Currently, we create a new filter shader graphic if one does not yet exist here, matching the main canvas's size and density:

p5.js/src/webgl/p5.RendererGL.js

Lines 982 to 998 in 3d62084

	if (!this.filterGraphicsLayer) {
	// the real _pInst is buried when this is a secondary p5.Graphics
	const pInst =
	this._pInst instanceof p5.Graphics ? this._pInst._pInst : this._pInst;
	// create secondary layer
	this.filterGraphicsLayer =
	new p5.Graphics(
	this.width,
	this.height,
	constants.WEBGL,
	pInst
	);
	// geometries/borders on this layer should always be invisible
	this.filterGraphicsLayer.noStroke();
	}

However, once it has been made, we never check if it needs to be resized. I think to fix this, we can add an else branch to that if, and inside it, check if the width/height and pixel density still match, and if not, call this.filterGraphicsLayer.resizeCanvas(this.width, this.height) and this.filterGraphicsLayer.pixelDensity(this.pixelDensity()).

[Gaurav-1306]

@davepagurek

if (!this.filterGraphicsLayer) { 
   // the real _pInst is buried when this is a secondary p5.Graphics 
   const pInst = this._pInst instanceof p5.Graphics ? this._pInst._pInst : this._pInst; 
  
   // create secondary layer 
   this.filterGraphicsLayer = new p5.Graphics( 
       this.width, 
       this.height, 
       constants.WEBGL, 
       pInst 
   ); 
   // geometries/borders on this layer should always be invisible 
   this.filterGraphicsLayer.noStroke(); 
} else {
   // Check if dimensions or pixel density need to be resized
   if (
       this.filterGraphicsLayer.width !== this.width ||
       this.filterGraphicsLayer.height !== this.height ||
       this.filterGraphicsLayer.pixelDensity() !== this.pixelDensity()
   ) {
       // Resize the graphics layer
       this.filterGraphicsLayer.resizeCanvas(this.width, this.height);
       this.filterGraphicsLayer.pixelDensity(this.pixelDensity());
   }
}

do you think this looks good. I think we can have the else and if merged into one and using else if. what do you think?

[davepagurek]

Thanks, @Gaurav-1306, that looks good!

I think we can have the else and if merged into one and using else if.

Agreed, that works!