From c4f10acf08695a72284a14341fb595e1311dc876 Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Sat, 30 Sep 2023 18:00:20 +0530 Subject: [PATCH 1/9] fixed the issue #6114 --- src/image/p5.Image.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js index 36a5a162f8..3be0bd4913 100644 --- a/src/image/p5.Image.js +++ b/src/image/p5.Image.js @@ -220,6 +220,32 @@ p5.Image = class { this.pixels = []; } + /** + * Set the pixel density of the image. + * + * @method setPixelDensity + * @param {Number} density - The pixel density to set. + * @example + *
+ * let img = new p5.Image(100, 100); + * img.setPixelDensity(2); + *
+ */ + setPixelDensity(density) { + if (density <= 0) { + console.error('Pixel density must be greater than 0.'); + return; + } + + this._pixelDensity = density; + + // Adjust canvas dimensions based on pixel density + this.canvas.width = this.width * density; + this.canvas.height = this.height * density; + + // Update the drawing context + this.drawingContext = this.canvas.getContext('2d'); + } /** * Helper function for animating GIF-based images with time */ From 108b3c4123bca6e8de25c53371412d5e02408a1b Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Sun, 1 Oct 2023 10:17:22 +0530 Subject: [PATCH 2/9] changed error to fes system --- src/image/p5.Image.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js index 3be0bd4913..295366511a 100644 --- a/src/image/p5.Image.js +++ b/src/image/p5.Image.js @@ -233,8 +233,16 @@ p5.Image = class { */ setPixelDensity(density) { if (density <= 0) { - console.error('Pixel density must be greater than 0.'); - return; + const errorObj = { + type: 'INVALID_VALUE', + format: { types: ['Number'] }, + position: 1, + }; + + p5._friendlyParamError(errorObj, 'setPixelDensity'); + + // Default to 1 in case of an invalid value + density = 1; } this._pixelDensity = density; From 2513351e1ff87de4f43270576f594af68488b78d Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:47:45 +0530 Subject: [PATCH 3/9] made change to improve the pixelDensity funtion --- src/image/p5.Image.js | 62 ++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 27 deletions(-) diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js index 295366511a..dbf2e122da 100644 --- a/src/image/p5.Image.js +++ b/src/image/p5.Image.js @@ -221,39 +221,47 @@ p5.Image = class { } /** - * Set the pixel density of the image. - * - * @method setPixelDensity - * @param {Number} density - The pixel density to set. - * @example - *
- * let img = new p5.Image(100, 100); - * img.setPixelDensity(2); - *
- */ - setPixelDensity(density) { - if (density <= 0) { - const errorObj = { - type: 'INVALID_VALUE', - format: { types: ['Number'] }, - position: 1, - }; + * Gets or sets the pixel density for high pixel density displays. By default, + * the density will be set to 1. + * + * Call this method with no arguments to get the default density, or pass + * in a number to set the density. If a non-positive number is provided, + * it defaults to 1. + * + * @method pixelDensity + * @param {Number} [density] A scaling factor for the number of pixels per + * side of the framebuffer + * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density. + */ + pixelDensity(density) { + if (typeof density !== 'undefined') { + // Setter: set the density and handle resize + if (density <= 0) { + const errorObj = { + type: 'INVALID_VALUE', + format: { types: ['Number'] }, + position: 1 + }; - p5._friendlyParamError(errorObj, 'setPixelDensity'); + p5._friendlyParamError(errorObj, 'pixelDensity'); - // Default to 1 in case of an invalid value - density = 1; - } + // Default to 1 in case of an invalid value + density = 1; + } - this._pixelDensity = density; + this._pixelDensity = density; - // Adjust canvas dimensions based on pixel density - this.canvas.width = this.width * density; - this.canvas.height = this.height * density; + // Adjust canvas dimensions based on pixel density + this.canvas.width = this.width * density; + this.canvas.height = this.height * density; - // Update the drawing context - this.drawingContext = this.canvas.getContext('2d'); + return this; // Return the image instance for chaining if needed + } else { + // Getter: return the default density + return this._pixelDensity; + } } + /** * Helper function for animating GIF-based images with time */ From dfb27a380d01c29cdb9e3beef68ff98506c6d2c3 Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:49:34 +0530 Subject: [PATCH 4/9] improved pixedDensity function --- src/image/p5.Image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js index dbf2e122da..9c85f70f98 100644 --- a/src/image/p5.Image.js +++ b/src/image/p5.Image.js @@ -230,7 +230,7 @@ p5.Image = class { * * @method pixelDensity * @param {Number} [density] A scaling factor for the number of pixels per - * side of the framebuffer + * side * @returns {Number} The current density if called without arguments, or the instance for chaining if setting density. */ pixelDensity(density) { From 66e1377f0fa1b35a7adc13ae539e8206a803673a Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Fri, 6 Oct 2023 15:58:37 +0530 Subject: [PATCH 5/9] change the get() function to retain value of pd and not streching the canvas --- lib/empty-example/sketch.js | 4 ++-- src/core/p5.Renderer.js | 1 + src/image/p5.Image.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index 69b202ee71..7f231b5b21 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,7 @@ function setup() { - // put setup code here + } function draw() { - // put drawing code here + } diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 8f51a5802f..ecc530066c 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -159,6 +159,7 @@ class Renderer extends p5.Element { } const region = new p5.Image(w, h); + region._pixelDensity = pd; region.canvas .getContext('2d') .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w, h); diff --git a/src/image/p5.Image.js b/src/image/p5.Image.js index 9c85f70f98..9e45ffa510 100644 --- a/src/image/p5.Image.js +++ b/src/image/p5.Image.js @@ -252,8 +252,8 @@ p5.Image = class { this._pixelDensity = density; // Adjust canvas dimensions based on pixel density - this.canvas.width = this.width * density; - this.canvas.height = this.height * density; + this.width /= density; + this.height /= density; return this; // Return the image instance for chaining if needed } else { From d5b509971162133a7a417fda9bf087961d20a4df Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Fri, 6 Oct 2023 16:00:28 +0530 Subject: [PATCH 6/9] cleaned the sketch.js --- lib/empty-example/sketch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index 7f231b5b21..d075d801b3 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,7 @@ function setup() { - +// put setup code here } function draw() { - +// put drawing code here } From 963b77f26bb8dea7bbb25cfd010840aa17324f1d Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Sun, 8 Oct 2023 21:13:42 +0530 Subject: [PATCH 7/9] minor changes --- src/core/p5.Renderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index ecc530066c..c869f3e6b4 100644 --- a/src/core/p5.Renderer.js +++ b/src/core/p5.Renderer.js @@ -158,11 +158,11 @@ class Renderer extends p5.Element { // get(x,y,w,h) } - const region = new p5.Image(w, h); + const region = new p5.Image(w*pd, h*pd); region._pixelDensity = pd; region.canvas .getContext('2d') - .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w, h); + .drawImage(canvas, x, y, w * pd, h * pd, 0, 0, w*pd, h*pd); return region; } From c0b719e8648b66139c3b1da89cc6f15b5c4a4716 Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:08:04 +0530 Subject: [PATCH 8/9] spacing corrected --- lib/empty-example/sketch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index d075d801b3..cb40015433 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,7 @@ function setup() { -// put setup code here + // put setup code here } function draw() { -// put drawing code here + // put drawing code here } From 27740b003a458c8942ec43af3af964d2323f1be9 Mon Sep 17 00:00:00 2001 From: Gaurav Tiwary <97665755+Gaurav-1306@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:09:35 +0530 Subject: [PATCH 9/9] spacing corrected --- lib/empty-example/sketch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/empty-example/sketch.js b/lib/empty-example/sketch.js index cb40015433..69b202ee71 100644 --- a/lib/empty-example/sketch.js +++ b/lib/empty-example/sketch.js @@ -1,7 +1,7 @@ function setup() { - // put setup code here + // put setup code here } function draw() { - // put drawing code here + // put drawing code here }