From b78818b8adf975e2f0f0a47535e65f80b139a441 Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 02:11:47 +0530 Subject: [PATCH 01/10] updated-createGraphics --- lib/empty-example/index.html | 2 +- src/core/p5.Graphics.js | 5 ++++- src/core/p5.Renderer2D.js | 12 ++++++------ 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/lib/empty-example/index.html b/lib/empty-example/index.html index 56c88a89b8..54b1bfdfe2 100644 --- a/lib/empty-example/index.html +++ b/lib/empty-example/index.html @@ -12,7 +12,7 @@ background-color: #1b1b1b; } - + diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js index 42fdaa496b..6700bc095d 100644 --- a/src/core/p5.Graphics.js +++ b/src/core/p5.Graphics.js @@ -30,7 +30,7 @@ class Graphics { const r = renderer || constants.P2D; this._pInst = pInst; - this._renderer = new renderers[r](this._pInst, w, h, false, canvas); + this._renderer = new renderers[r](this, w, h, false, canvas); this._initializeInstanceVariables(this); @@ -696,3 +696,6 @@ function graphics(p5, fn){ export default graphics; export { Graphics }; +if (typeof p5 !== 'undefined') { + graphics(p5, p5.prototype); +} \ No newline at end of file diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 23f74bec4b..6b5c39d04d 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -179,8 +179,8 @@ class Renderer2D extends Renderer { const color = this._pInst.color(...args); //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsBackground(color._getRGBA([255, 255, 255, 255])); + if (this._pInst._addAccsOutput?.()) { + this._pInst._accsBackground?.(color._getRGBA([255, 255, 255, 255])); } const newFill = color.toString(); @@ -212,8 +212,8 @@ class Renderer2D extends Renderer { this._setFill(color.toString()); //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsCanvasColors('fill', color._getRGBA([255, 255, 255, 255])); + if (this._pInst._addAccsOutput?.()) { + this._pInst._accsCanvasColors?.('fill', color._getRGBA([255, 255, 255, 255])); } } @@ -223,8 +223,8 @@ class Renderer2D extends Renderer { this._setStroke(color.toString()); //accessible Outputs - if (this._pInst._addAccsOutput()) { - this._pInst._accsCanvasColors('stroke', color._getRGBA([255, 255, 255, 255])); + if (this._pInst._addAccsOutput?.()) { + this._pInst._accsCanvasColors?.('stroke', color._getRGBA([255, 255, 255, 255])); } } From 178d2cbeb53d00794ba8f1517c17d180b10781d4 Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 03:48:21 +0530 Subject: [PATCH 02/10] fixes --- lib/empty-example/sketch.js | 21 +++++++++++++++------ src/core/p5.Graphics.js | 5 +---- src/core/p5.Renderer2D.js | 6 ++++-- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index 33ce6b4450..5b4f1faa76 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,16 @@ +let g; + function setup() { - // put setup code here - } - - function draw() { - // put drawing code here - } \ No newline at end of file + createCanvas(400, 400); + + g = createGraphics(200, 200); +} + +function draw() { + g.background(0); + g.stroke(255, 0, 0); + g.strokeWeight(5); + g.noFill(); + g.bezier(0, 0, 100, 0, 0, 100, 200, 200); + image(g, 0, 0, 400, 400); +} diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js index 6700bc095d..80d593b623 100644 --- a/src/core/p5.Graphics.js +++ b/src/core/p5.Graphics.js @@ -695,7 +695,4 @@ function graphics(p5, fn){ } export default graphics; -export { Graphics }; -if (typeof p5 !== 'undefined') { - graphics(p5, p5.prototype); -} \ No newline at end of file +export { Graphics }; \ No newline at end of file diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 6b5c39d04d..c35a8a6258 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -74,8 +74,10 @@ class Renderer2D extends Renderer { this.filterRenderer = new FilterRenderer2D(this); } // Set and return p5.Element - this.wrappedElt = new Element(this.elt, this._pInst); - + // this.wrappedElt = new Element(this.elt, this._pInst); + // Pass the *sketch* (p5) instance, not the Graphics buffer itself + const sketch = this._pInst && this._pInst._pInst ? this._pInst._pInst : this._pInst; + this.wrappedElt = new Element(this.elt, sketch); this.clipPath = null; } From 50d6530742923b607111585eb32e4d5a8e583fa5 Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 03:49:51 +0530 Subject: [PATCH 03/10] fixes --- lib/empty-example/sketch.js | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index 5b4f1faa76..33ce6b4450 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,16 +1,7 @@ -let g; - function setup() { - createCanvas(400, 400); - - g = createGraphics(200, 200); -} - -function draw() { - g.background(0); - g.stroke(255, 0, 0); - g.strokeWeight(5); - g.noFill(); - g.bezier(0, 0, 100, 0, 0, 100, 200, 200); - image(g, 0, 0, 400, 400); -} + // put setup code here + } + + function draw() { + // put drawing code here + } \ No newline at end of file From 78cb39dbd6e67b5187f538e5d4341362d9c7d59f Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 04:03:47 +0530 Subject: [PATCH 04/10] fixing-tests --- lib/empty-example/sketch.js | 22 ++++++++++++++++------ src/dom/p5.Element.js | 12 +++++++++--- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index 33ce6b4450..ab29792710 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,17 @@ +let g; + function setup() { - // put setup code here - } - - function draw() { - // put drawing code here - } \ No newline at end of file + createCanvas(400, 400); + + g = createGraphics(200, 200); +} + +function draw() { + g.background(0); + g.stroke(255, 0, 0); + g.strokeWeight(5); + g.noFill(); + g.bezier(0, 0, 100, 0, 0, 100, 200, 200); + //Comment out this line and for some reason the bezier gets drawn (to the canvas instead of the graphics object) + image(g, 0, 0, 400, 400); +} diff --git a/src/dom/p5.Element.js b/src/dom/p5.Element.js index c7eaf26e32..51309b3c45 100644 --- a/src/dom/p5.Element.js +++ b/src/dom/p5.Element.js @@ -64,10 +64,16 @@ class Element { } // delete the reference in this._pInst._elements - const index = this._pInst._elements.indexOf(this); - if (index !== -1) { - this._pInst._elements.splice(index, 1); + let sketch = this._pInst; + if (sketch && !sketch._elements && sketch._pInst) { + sketch = sketch._pInst; // climb one level up } + + if (sketch && sketch._elements) { // only if the array exists + const i = sketch._elements.indexOf(this); + if (i !== -1) sketch._elements.splice(i, 1); + } + // deregister events for (let ev in this._events) { From 3d7d1c558470cdbe79e1a7001888feec42700769 Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 04:04:19 +0530 Subject: [PATCH 05/10] removing sketches --- lib/empty-example/sketch.js | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index ab29792710..33ce6b4450 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,17 +1,7 @@ -let g; - function setup() { - createCanvas(400, 400); - - g = createGraphics(200, 200); -} - -function draw() { - g.background(0); - g.stroke(255, 0, 0); - g.strokeWeight(5); - g.noFill(); - g.bezier(0, 0, 100, 0, 0, 100, 200, 200); - //Comment out this line and for some reason the bezier gets drawn (to the canvas instead of the graphics object) - image(g, 0, 0, 400, 400); -} + // put setup code here + } + + function draw() { + // put drawing code here + } \ No newline at end of file From c91eb44919f18edd183898778a14cdc3b21c48ed Mon Sep 17 00:00:00 2001 From: Perminder Date: Mon, 19 May 2025 04:41:37 +0530 Subject: [PATCH 06/10] fixes --- src/core/p5.Renderer2D.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index c35a8a6258..5e008b80b0 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -74,10 +74,7 @@ class Renderer2D extends Renderer { this.filterRenderer = new FilterRenderer2D(this); } // Set and return p5.Element - // this.wrappedElt = new Element(this.elt, this._pInst); - // Pass the *sketch* (p5) instance, not the Graphics buffer itself - const sketch = this._pInst && this._pInst._pInst ? this._pInst._pInst : this._pInst; - this.wrappedElt = new Element(this.elt, sketch); + this.wrappedElt = new Element(this.elt, this._pInst); this.clipPath = null; } From 3933911d6eba3d4ce5ecadc831c64077f8b969d6 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Tue, 27 May 2025 03:10:00 +0530 Subject: [PATCH 07/10] fixing accidental line change --- src/core/p5.Graphics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js index 80d593b623..204f489bdd 100644 --- a/src/core/p5.Graphics.js +++ b/src/core/p5.Graphics.js @@ -695,4 +695,4 @@ function graphics(p5, fn){ } export default graphics; -export { Graphics }; \ No newline at end of file +export { Graphics }; From 63cc5a0f8ade19bf4efad0dfd906028cd0df41dc Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Tue, 27 May 2025 03:53:07 +0530 Subject: [PATCH 08/10] Fixing suggestions from kit --- src/dom/p5.Element.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/dom/p5.Element.js b/src/dom/p5.Element.js index 51309b3c45..0265a64c42 100644 --- a/src/dom/p5.Element.js +++ b/src/dom/p5.Element.js @@ -63,8 +63,18 @@ class Element { } } - // delete the reference in this._pInst._elements - let sketch = this._pInst; + // `this._pInst` is usually the p5 “sketch” object that owns the global + // `_elements` array. But when an element lives inside an off-screen + // `p5.Graphics` layer, `this._pInst` is that wrapper Graphics object + // instead. The wrapper keeps a back–pointer (`_pInst`) to the real + // sketch but has no `_elements` array of its own. + + let sketch = this._pInst; + + // If `sketch` doesn’t own an `_elements` array it means + // we’re still at the graphics-layer “wrapper”. + // Jump one level up to the real p5 sketch stored in sketch._pInst. + if (sketch && !sketch._elements && sketch._pInst) { sketch = sketch._pInst; // climb one level up } From 4fe80216685e8118909cdd16b1409f5ebb72cec2 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Tue, 27 May 2025 04:09:16 +0530 Subject: [PATCH 09/10] Adding Dave's suggestion --- src/core/p5.Renderer.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 4f3bcc70fb..18573da7f5 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -4,6 +4,16 @@ * @for p5 */ +/** + * `pInst` may be: + * + * The main sketch-wide `p5` instance (global canvas), or + * an off-screen `p5.Graphics` wrapper. + * + * Therefore a renderer must only call properties / methods that exist + * on both objects. + */ + import { Color } from '../color/p5.Color'; import * as constants from '../core/constants'; import { Image } from '../image/p5.Image'; From 1f61661ac389cc8f0aa8f15838d36a345555c433 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Tue, 27 May 2025 16:05:52 +0530 Subject: [PATCH 10/10] Adding inline docs for (?.) --- src/core/p5.Renderer2D.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 5e008b80b0..f48716739f 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -177,7 +177,8 @@ class Renderer2D extends Renderer { // create background rect const color = this._pInst.color(...args); - //accessible Outputs + // Add accessible outputs if the method exists; on success, + // set the accessible output background to white. if (this._pInst._addAccsOutput?.()) { this._pInst._accsBackground?.(color._getRGBA([255, 255, 255, 255])); } @@ -210,7 +211,8 @@ class Renderer2D extends Renderer { const color = this.states.fillColor; this._setFill(color.toString()); - //accessible Outputs + // Add accessible outputs if the method exists; on success, + // set the accessible output background to white. if (this._pInst._addAccsOutput?.()) { this._pInst._accsCanvasColors?.('fill', color._getRGBA([255, 255, 255, 255])); } @@ -221,7 +223,8 @@ class Renderer2D extends Renderer { const color = this.states.strokeColor; this._setStroke(color.toString()); - //accessible Outputs + // Add accessible outputs if the method exists; on success, + // set the accessible output background to white. if (this._pInst._addAccsOutput?.()) { this._pInst._accsCanvasColors?.('stroke', color._getRGBA([255, 255, 255, 255])); }