From 4e4cd0e54e6231870fc1a4ee56747733ac5b5e3a Mon Sep 17 00:00:00 2001 From: Reshma R Date: Sat, 20 Dec 2025 20:41:33 +0900 Subject: [PATCH 1/4] Support background(image) in WEBGL Renderer3D --- src/core/p5.Renderer3D.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/core/p5.Renderer3D.js b/src/core/p5.Renderer3D.js index 89f074a8c1..07825e2f98 100644 --- a/src/core/p5.Renderer3D.js +++ b/src/core/p5.Renderer3D.js @@ -728,6 +728,35 @@ export class Renderer3D extends Renderer { } background(...args) { + const a0 = args[0]; + + const isImageLike = + a0 instanceof p5.Image || + a0 instanceof p5.Graphics || + a0 instanceof p5.MediaElement || + (typeof HTMLImageElement !== 'undefined' && a0 instanceof HTMLImageElement) || + (typeof HTMLVideoElement !== 'undefined' && a0 instanceof HTMLVideoElement) || + (typeof HTMLCanvasElement !== 'undefined' && a0 instanceof HTMLCanvasElement); + + // WEBGL / 3D: support background(image) + if (args.length > 0 && isImageLike) { + this._pInst.clear(); + this._pInst.push(); + this._pInst.resetMatrix(); + this._pInst.imageMode(constants.CORNER); + this._pInst.image( + a0, + -this._pInst.width / 2, + -this._pInst.height / 2, + this._pInst.width, + this._pInst.height + ); + + this._pInst.pop(); + return; + } + + // Default: background(color) const _col = this._pInst.color(...args); this.clear(..._col._getRGBA()); } From c5eb586f46b61e4e9ea07525277cad2da45cc595 Mon Sep 17 00:00:00 2001 From: Reshma R Date: Tue, 23 Dec 2025 11:12:29 +0900 Subject: [PATCH 2/4] fixes --- src/core/p5.Renderer3D.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/src/core/p5.Renderer3D.js b/src/core/p5.Renderer3D.js index 07825e2f98..4774cde738 100644 --- a/src/core/p5.Renderer3D.js +++ b/src/core/p5.Renderer3D.js @@ -731,27 +731,19 @@ export class Renderer3D extends Renderer { const a0 = args[0]; const isImageLike = - a0 instanceof p5.Image || - a0 instanceof p5.Graphics || - a0 instanceof p5.MediaElement || - (typeof HTMLImageElement !== 'undefined' && a0 instanceof HTMLImageElement) || - (typeof HTMLVideoElement !== 'undefined' && a0 instanceof HTMLVideoElement) || - (typeof HTMLCanvasElement !== 'undefined' && a0 instanceof HTMLCanvasElement); - - // WEBGL / 3D: support background(image) - if (args.length > 0 && isImageLike) { + a0 != null && + typeof a0 === 'object' && + typeof a0.width === 'number' && + typeof a0.height === 'number' && + (a0.canvas != null || a0.elt != null); + + // WEBGL / 3D: support background(image-like) + if (isImageLike) { this._pInst.clear(); this._pInst.push(); this._pInst.resetMatrix(); - this._pInst.imageMode(constants.CORNER); - this._pInst.image( - a0, - -this._pInst.width / 2, - -this._pInst.height / 2, - this._pInst.width, - this._pInst.height - ); - + this._pInst.imageMode(constants.CENTER); + this._pInst.image(a0, 0, 0, this._pInst.width, this._pInst.height); this._pInst.pop(); return; } From 9d4790d8915a04284262256990cd3e164dab189c Mon Sep 17 00:00:00 2001 From: Reshma R Date: Thu, 25 Dec 2025 00:52:20 +0900 Subject: [PATCH 3/4] added visual test --- test/unit/visual/cases/webgl.js | 15 +++++++++++++++ .../background(image) works in WEBGL/000.png | Bin 0 -> 235 bytes .../metadata.json | 3 +++ 3 files changed, 18 insertions(+) create mode 100644 test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/000.png create mode 100644 test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/metadata.json diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index b0a68e56d6..523274f41b 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -929,4 +929,19 @@ visualSuite('WebGL', function() { screenshot(); }); }); + + visualSuite('background()', function () { + visualTest('background(image) works in WEBGL', function (p5, screenshot) { + p5.createCanvas(50, 50, p5.WEBGL); + + const g = p5.createGraphics(50, 50); + g.background(255, 0, 0); + + p5.background(0, 0, 255); + p5.background(g); + + screenshot(); + }); + }); + }); diff --git a/test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/000.png b/test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/000.png new file mode 100644 index 0000000000000000000000000000000000000000..00d35a20a9ec947f7a9bbfb392ef52f3c8595bcb GIT binary patch literal 235 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nET1)eUBAr*{oCLQEFV8Fxd`|ZAE ztb_b)F4p4KI+kfKV$ZMLC4Dd0Th8u@=|qWx9i0sOr*Xd7A*P&Mvdp<>#(}X z+|8|=oAQjgX9nZ;*M^te((Dd&NEYm_>z&BY!0`XSx4Y9`pj+8MZe?aLu}Wc_=J@M1 PP=vwL)z4*}Q$iB}_H Date: Thu, 25 Dec 2025 01:17:31 +0900 Subject: [PATCH 4/4] updated visual test --- test/unit/visual/cases/webgl.js | 3 +++ .../background(image) works in WEBGL/000.png | Bin 235 -> 529 bytes 2 files changed, 3 insertions(+) diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 523274f41b..c2157b3d18 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -936,6 +936,9 @@ visualSuite('WebGL', function() { const g = p5.createGraphics(50, 50); g.background(255, 0, 0); + g.fill(0); + g.noStroke(); + g.circle(25, 25, 20); p5.background(0, 0, 255); p5.background(g); diff --git a/test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/000.png b/test/unit/visual/screenshots/WebGL/background()/background(image) works in WEBGL/000.png index 00d35a20a9ec947f7a9bbfb392ef52f3c8595bcb..dc1feedc0732217a8b2e6d8bbd01506d204140ca 100644 GIT binary patch delta 504 zcmV`6s*c-p-rZkV7WZQl{(Rld>kS6tZfA%!%YgI&~ng zR;R``)8<5)Th|Gg6Y130X4;%cbL%<*!zc2kLhs~<@*VlckAD-h#vVCZ4z*Ar4=Qa} zekOmGf5-9QA3E2-6;&NF+jwEDD?iw6$ zIXsq-O`UutcMT4>93D#u2OsP0T;6J6;b_GVI9mur*LtHMJ*o^0*ecL3$st1Erl5NT z+;=_Z8ad>GnVVR#8771?xgu{0ZsiB^@oxh$YwVFju5nVrEK~?p@ufXg@Fahi>u@10{{U3{}TP;FaQ7m21!IgR09C!kdy)1PqOj=0000UtcHc7AL4GzDYjJBG%d{7<=hyC%z8CB* zXZOT(qQt?DPKN!{IN$6LQ%){f=G-&mKwq|@kz2aekq(3)$A*g>%7K59WR#h_Ob&U7 z?3Xy+(IC`oAaqp!n4!`F7v&z8kKKhm92!7no)C4X<_GTPR?ba%#@sW5ar`|KHo)X)gl<0~^S(%nT-0DU8z`f4v5ZFnGH9xvX