From f26f436cf030954ec450cbeff707b624e89cd5f9 Mon Sep 17 00:00:00 2001 From: VANSH3104 Date: Wed, 10 Dec 2025 12:28:42 +0530 Subject: [PATCH 1/3] Fix set() to support p5.Graphics objects --- src/core/p5.Renderer2D.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 95286b0b51..2fca59908d 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -541,7 +541,16 @@ class Renderer2D extends Renderer { // round down to get integer numbers x = Math.floor(x); y = Math.floor(y); - if (imgOrCol instanceof Image) { + if (imgOrCol instanceof Graphics) { + this.drawingContext.save(); + this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); + this.drawingContext.scale( + this._pixelDensity, + this._pixelDensity + ); + this.drawingContext.drawImage(imgOrCol.canvas, x, y); + this.drawingContext.restore(); + } else if (imgOrCol instanceof Image) { this.drawingContext.save(); this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); this.drawingContext.scale( From 5cba0fa1ab54269e32f4f72f15058792cfd519fc Mon Sep 17 00:00:00 2001 From: VANSH3104 Date: Wed, 7 Jan 2026 16:14:44 +0530 Subject: [PATCH 2/3] Add unit tests and improve set() handling for p5.Graphics --- src/core/p5.Renderer2D.js | 18 ++----- test/unit/rendering/set-graphics.js | 78 +++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 13 deletions(-) create mode 100644 test/unit/rendering/set-graphics.js diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 2fca59908d..0896c9cdde 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -541,25 +541,17 @@ class Renderer2D extends Renderer { // round down to get integer numbers x = Math.floor(x); y = Math.floor(y); - if (imgOrCol instanceof Graphics) { + if (imgOrCol instanceof Graphics || imgOrCol instanceof Image) { this.drawingContext.save(); this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); this.drawingContext.scale( this._pixelDensity, this._pixelDensity ); - this.drawingContext.drawImage(imgOrCol.canvas, x, y); - this.drawingContext.restore(); - } else if (imgOrCol instanceof Image) { - this.drawingContext.save(); - this.drawingContext.setTransform(1, 0, 0, 1, 0, 0); - this.drawingContext.scale( - this._pixelDensity, - this._pixelDensity - ); - this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height); - this.drawingContext.drawImage(imgOrCol.canvas, x, y); - this.drawingContext.restore(); + const width = imgOrCol.width; + const height = imgOrCol.height; + this.drawingContext.clearRect(x, y, width, height); + this.drawingContext.drawImage(imgOrCol.canvas, x, y, width, height); } else { let r = 0, g = 0, diff --git a/test/unit/rendering/set-graphics.js b/test/unit/rendering/set-graphics.js new file mode 100644 index 0000000000..252330015a --- /dev/null +++ b/test/unit/rendering/set-graphics.js @@ -0,0 +1,78 @@ +import p5 from '../../../src/app.js'; + +suite('set() with p5.Graphics', function() { + let myp5; + + beforeEach(function() { + myp5 = new p5(function(p) { + p.setup = function() { + p.createCanvas(100, 100); + p.pixelDensity(1); + }; + }); + }); + + afterEach(function() { + myp5.remove(); + }); + + test('set() works with p5.Graphics on main canvas', function() { + myp5.background(0, 255, 0); + const gfx = myp5.createGraphics(20, 20); + gfx.background(255, 0, 0); + myp5.set(10, 10, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(15, 15), [255, 0, 0, 255]); + assert.deepEqual(myp5.get(5, 5), [0, 255, 0, 255]); + }); + + test('set() works with p5.Graphics on p5.Graphics', function() { + const mainGfx = myp5.createGraphics(100, 100); + mainGfx.background(255); + const smallGfx = myp5.createGraphics(20, 20); + smallGfx.background(0, 0, 255); + mainGfx.set(10, 10, smallGfx); + mainGfx.updatePixels(); + myp5.image(mainGfx, 0, 0); + assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); + }); + + test('set() clears area under p5.Graphics', function() { + myp5.background(255); + myp5.stroke(255, 0, 0); + myp5.strokeWeight(2); + for (let i = 0; i < 100; i += 10) { + myp5.line(i, 0, i, 100); + } + const gfx = myp5.createGraphics(40, 40); + gfx.background(0, 255, 0); + myp5.set(30, 30, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(35, 35), [0, 255, 0, 255]); + }); + + test('set() works at edge (0,0)', function() { + myp5.background(255); + const gfx = myp5.createGraphics(30, 30); + gfx.background(0, 0, 255); + myp5.set(0, 0, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); + assert.deepEqual(myp5.get(35, 35), [255, 255, 255, 255]); + }); + + test('set() behaves same for p5.Graphics and p5.Image', function() { + const gfx = myp5.createGraphics(20, 20); + gfx.background(255, 0, 0); + const img = gfx.get(); + myp5.background(255); + myp5.set(10, 10, gfx); + myp5.updatePixels(); + const pixelFromGfx = myp5.get(15, 15); + myp5.background(255); + myp5.set(10, 10, img); + myp5.updatePixels(); + const pixelFromImg = myp5.get(15, 15); + assert.deepEqual(pixelFromGfx, pixelFromImg); + }); +}); \ No newline at end of file From 0a44fbe846711ed9a66be563a306bcd92cc473c8 Mon Sep 17 00:00:00 2001 From: VANSH3104 Date: Thu, 8 Jan 2026 12:39:30 +0530 Subject: [PATCH 3/3] Add unit tests to suggested file and remove obsolete code --- test/unit/core/rendering.js | 77 ++++++++++++++++++++++++++++ test/unit/rendering/set-graphics.js | 78 ----------------------------- 2 files changed, 77 insertions(+), 78 deletions(-) delete mode 100644 test/unit/rendering/set-graphics.js diff --git a/test/unit/core/rendering.js b/test/unit/core/rendering.js index 2e6e721f0a..c75039a990 100644 --- a/test/unit/core/rendering.js +++ b/test/unit/core/rendering.js @@ -208,4 +208,81 @@ suite('Rendering', function() { expect(myp5.splineProperties()).toMatchObject({ tightness: 2 }); }); }); + + suite('set() with p5.Graphics', function() { + let myp5; + + beforeEach(function() { + myp5 = new p5(function(p) { + p.setup = function() { + p.createCanvas(100, 100); + p.pixelDensity(1); + }; + }); + }); + + afterEach(function() { + myp5.remove(); + }); + + test('set() works with p5.Graphics on main canvas', function() { + myp5.background(0, 255, 0); + const gfx = myp5.createGraphics(20, 20); + gfx.background(255, 0, 0); + myp5.set(10, 10, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(15, 15), [255, 0, 0, 255]); + assert.deepEqual(myp5.get(5, 5), [0, 255, 0, 255]); + }); + + test('set() works with p5.Graphics on p5.Graphics', function() { + const mainGfx = myp5.createGraphics(100, 100); + mainGfx.background(255); + const smallGfx = myp5.createGraphics(20, 20); + smallGfx.background(0, 0, 255); + mainGfx.set(10, 10, smallGfx); + mainGfx.updatePixels(); + myp5.image(mainGfx, 0, 0); + assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); + }); + + test('set() clears area under p5.Graphics', function() { + myp5.background(255); + myp5.stroke(255, 0, 0); + myp5.strokeWeight(2); + for (let i = 0; i < 100; i += 10) { + myp5.line(i, 0, i, 100); + } + const gfx = myp5.createGraphics(40, 40); + gfx.background(0, 255, 0); + myp5.set(30, 30, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(35, 35), [0, 255, 0, 255]); + }); + + test('set() works at edge (0,0)', function() { + myp5.background(255); + const gfx = myp5.createGraphics(30, 30); + gfx.background(0, 0, 255); + myp5.set(0, 0, gfx); + myp5.updatePixels(); + assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); + assert.deepEqual(myp5.get(35, 35), [255, 255, 255, 255]); + }); + + test('set() behaves same for p5.Graphics and p5.Image', function() { + const gfx = myp5.createGraphics(20, 20); + gfx.background(255, 0, 0); + const img = gfx.get(); + myp5.background(255); + myp5.set(10, 10, gfx); + myp5.updatePixels(); + const pixelFromGfx = myp5.get(15, 15); + myp5.background(255); + myp5.set(10, 10, img); + myp5.updatePixels(); + const pixelFromImg = myp5.get(15, 15); + assert.deepEqual(pixelFromGfx, pixelFromImg); + }); + }); }); diff --git a/test/unit/rendering/set-graphics.js b/test/unit/rendering/set-graphics.js deleted file mode 100644 index 252330015a..0000000000 --- a/test/unit/rendering/set-graphics.js +++ /dev/null @@ -1,78 +0,0 @@ -import p5 from '../../../src/app.js'; - -suite('set() with p5.Graphics', function() { - let myp5; - - beforeEach(function() { - myp5 = new p5(function(p) { - p.setup = function() { - p.createCanvas(100, 100); - p.pixelDensity(1); - }; - }); - }); - - afterEach(function() { - myp5.remove(); - }); - - test('set() works with p5.Graphics on main canvas', function() { - myp5.background(0, 255, 0); - const gfx = myp5.createGraphics(20, 20); - gfx.background(255, 0, 0); - myp5.set(10, 10, gfx); - myp5.updatePixels(); - assert.deepEqual(myp5.get(15, 15), [255, 0, 0, 255]); - assert.deepEqual(myp5.get(5, 5), [0, 255, 0, 255]); - }); - - test('set() works with p5.Graphics on p5.Graphics', function() { - const mainGfx = myp5.createGraphics(100, 100); - mainGfx.background(255); - const smallGfx = myp5.createGraphics(20, 20); - smallGfx.background(0, 0, 255); - mainGfx.set(10, 10, smallGfx); - mainGfx.updatePixels(); - myp5.image(mainGfx, 0, 0); - assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); - }); - - test('set() clears area under p5.Graphics', function() { - myp5.background(255); - myp5.stroke(255, 0, 0); - myp5.strokeWeight(2); - for (let i = 0; i < 100; i += 10) { - myp5.line(i, 0, i, 100); - } - const gfx = myp5.createGraphics(40, 40); - gfx.background(0, 255, 0); - myp5.set(30, 30, gfx); - myp5.updatePixels(); - assert.deepEqual(myp5.get(35, 35), [0, 255, 0, 255]); - }); - - test('set() works at edge (0,0)', function() { - myp5.background(255); - const gfx = myp5.createGraphics(30, 30); - gfx.background(0, 0, 255); - myp5.set(0, 0, gfx); - myp5.updatePixels(); - assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]); - assert.deepEqual(myp5.get(35, 35), [255, 255, 255, 255]); - }); - - test('set() behaves same for p5.Graphics and p5.Image', function() { - const gfx = myp5.createGraphics(20, 20); - gfx.background(255, 0, 0); - const img = gfx.get(); - myp5.background(255); - myp5.set(10, 10, gfx); - myp5.updatePixels(); - const pixelFromGfx = myp5.get(15, 15); - myp5.background(255); - myp5.set(10, 10, img); - myp5.updatePixels(); - const pixelFromImg = myp5.get(15, 15); - assert.deepEqual(pixelFromGfx, pixelFromImg); - }); -}); \ No newline at end of file