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
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) {
if (args.length === 1 && args[0] instanceof p5.Image) {
const img = args[0];
this.clear(); // clear previous frame
this._pInst.push();
this._renderer._setDefaultCamera(); // reset camera
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;