Canvas becomes strange when using translate() and filter function in 2D mode

[inaridarkfox4231]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.8.0

Web browser and version

Chrome

Operating System

Windows11

Steps to reproduce this

Steps:

1. createCanvas(600, 600); background(255); noStroke(); fill(0); translate(300, 300); circle(0, 0, 300);
2. and then, apply filter(BLUR, 5);
3. become looks strange.

Snippet:

function setup() {
  createCanvas(600, 600);
  background(255);
  noStroke();
  fill(0);
  translate(300, 300);
  circle(0, 0, 300);
  filter(BLUR, 5);
}

2D_BLUR_BUG

version 1.7.0

version 1.8.0

[inaridarkfox4231]

sorry. This happens with any filter function. So I changed the title.

case INVERT: (version 1.8.0)

[inaridarkfox4231]

In addition, the behavior when drawing with lower opacity seems to be different from that in 1.7.0.

APPLY_FILTER_TO_ALPHA

snipet

let img;

function preload(){
  img = loadImage("https://inaridarkfox4231.github.io/assets/season/summer_small.png");
}
function setup(){
  createCanvas(img.width, img.height);
  background(img, 64);
  filter(~~~);
}

version 1.7.0

version 1.8.0

However, if "this" is the future behavior of 2D filter(), this is not considered a bug, so there is no problem.

[davepagurek]

It looks like all of the bug behaviour happens here:

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

Lines 1129 to 1133 in 611941a

	this._pInst.push();
	this._pInst.noStroke();
	this._pInst.image(pg, -this.width/2, -this.height/2,
	this.width, this.height);
	this._pInst.pop();

• We probably shouldn't assume an image mode and should explicitly add imageMode(CORNER)
• We probably should clear the canvas first so that we don't blend with the earlier canvas
• Speaking of blending, we should probably not assume a blend mode and explicitly add blendMode(BLEND)

[Garima3110]

Hey @davepagurek , I am interested in working on this issue. Could you please add some more context to what you are trying to say through this:

• We probably shouldn't assume an image mode and should explicitly add imageMode(CORNER)
• We probably should clear the canvas first so that we don't blend with the earlier canvas
• Speaking of blending, we should probably not assume a blend mode and explicitly add blendMode(BLEND)

ThankYou!

[perminder-17]

It looks like all of the bug behaviour happens here:

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

Lines 1129 to 1133 in 611941a

	this._pInst.push();
	this._pInst.noStroke();
	this._pInst.image(pg, -this.width/2, -this.height/2,
	this.width, this.height);
	this._pInst.pop();

• We probably shouldn't assume an image mode and should explicitly add imageMode(CORNER)
• We probably should clear the canvas first so that we don't blend with the earlier canvas
• Speaking of blending, we should probably not assume a blend mode and explicitly add blendMode(BLEND)

Thankyou for your suggestion @davepagurek

[inaridarkfox4231]

For reference, here is an example:
Transparency becomes an issue when pasting transparent images. There may not be many examples like this, but if the background is transparent and INVERT is applied, it seems that with the current specifications, it will be colored.

function setup() {
  createCanvas(400, 400);
  let gr=createGraphics(100,100);
  gr.textAlign(CENTER,CENTER);
  gr.textSize(80);
  gr.text("🦊",50,50);
  gr.filter(INVERT);

  background(128);
  image(gr,100,100);
}

version 1.7.0

version 1.8.0

[inaridarkfox4231]

Finally, this is not a bug report, just a chat, but there seems to be a slight difference in the behavior of BLUR when the background is transparent in 2D and webgl.

function setup(){
  createCanvas(400, 400);
  clear();
  textAlign(CENTER, CENTER);
  textSize(180);
  text("🐬",200,200);
  filter(BLUR, 10, true/false);
}

use webglFilter

not use webglFilter

These are the points that I was concerned about about the filter function that was implemented this time. I'll leave it to you to decide what to do with these. In the p5.js community to which I belong, even the first thing I raised is not considered a bug. So I can't determine whether these are bugs or not. So I'll leave everything to you regarding to handle these.

[SableRaf]

Hey @inaridarkfox4231 thanks for your reports. I'd suggest filing separate issues for each unexpected behavior you noticed as they most likely have different causes. This will make it easier to track the issues and possible solutions.

[inaridarkfox4231]

I got it. Let's separate the transform issue and transparency issue.
It appears that the problem with the transform operation is on the verge of being resolved.
Therefore, let's have this resolved in the relevant pull request (#6503).
The transparency issue has nothing to do with that, so let's raise a separate issue.
Thanks,

[inaridarkfox4231]

Regarding "blur", I think this is a subjective issue as it is a question of how to define "blur". I can't decide whether or not it should be treated as a bug, so I'll leave everything up to the person who created the specifications.