Skip to content

Fix background(img) handling in WEBGL mode in RendererGL #7963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+38 −6
Open

Fix background(img) handling in WEBGL mode in RendererGL #7963

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 38 additions & 6 deletions src/webgl/p5.RendererGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -934,12 +934,24 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
* [background description]
*/
background(...args) {
const _col = this._pInst.color(...args);
const _r = _col.levels[0] / 255;
const _g = _col.levels[1] / 255;
const _b = _col.levels[2] / 255;
const _a = _col.levels[3] / 255;
this.clear(_r, _g, _b, _a);
// If the first argument is an image, draw it as background
if (args.length === 1 && args[0] instanceof p5.Image) {
const img = args[0];
this.clear(); // clear previous drawing
this.push();
this._renderer._setDefaultCamera(); // reset camera to default so image fits canvas
imageMode(CENTER);
image(img, this.width / 2, this.height / 2, this.width, this.height);
this.pop();
} else {
// Else treat it as color input (default behavior)
const _col = this._pInst.color(...args);
const _r = _col.levels[0] / 255;
const _g = _col.levels[1] / 255;
const _b = _col.levels[2] / 255;
const _a = _col.levels[3] / 255;
this.clear(_r, _g, _b, _a);
}
}

//////////////////////////////////////////////
Expand Down Expand Up @@ -2545,4 +2557,24 @@ p5.prototype._assert3d = function (name) {

p5.RendererGL.prototype.tessyVertexSize = 12;

p5.RendererGL.prototype.background = function (...args) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we have a duplicate implementation here that overrides the method inside the class above, are we able to merge this with the implementation above? It looks like this is the code currently being executed, so we could replace the implementation above with the body of this function and then remove it.

if (args.length === 1 && args[0] instanceof p5.Image) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some other image-like things that we probably want to work here, e.g. p5.Graphics or p5.MediaElement (for a webcam capture) or p5.Texture or p5.Framebuffer. (Maybe at that point it makes sense to flip the logic to be, if the argument is NOT a string or color or number?)

const img = args[0];
this.clear(); // clear previous frame
this._pInst.push();
this._renderer._setDefaultCamera(); // reset camera
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is already a renderer, does this._renderer here work, or does it need to just be this._setDefaultCamera?

this._pInst.imageMode(this._pInst.CENTER);
this._pInst.image(img, 0, 0, this.width, this.height); // centered on WEBGL canvas
this._pInst.pop();
} else {
const _col = this._pInst.color(...args);
const _r = _col.levels[0] / 255;
const _g = _col.levels[1] / 255;
const _b = _col.levels[2] / 255;
const _a = _col.levels[3] / 255;
this.clear(_r, _g, _b, _a);
}
};


export default p5.RendererGL;