Skip to content
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.

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

Support pixel density on p5.Image (fixes issue #6114) #6447

Merged
merged 9 commits into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 3 additions & 2 deletions src/core/p5.Renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +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;
}
Expand Down
42 changes: 42 additions & 0 deletions src/image/p5.Image.js
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,48 @@ p5.Image = class {
this.pixels = [];
}

/**
* 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
* @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, 'pixelDensity');

// Default to 1 in case of an invalid value
density = 1;
}

this._pixelDensity = density;

// Adjust canvas dimensions based on pixel density
this.width /= density;
Copy link
Contributor

Choose a reason for hiding this comment

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

This function looks great now, thanks!

this.height /= density;

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
*/
Expand Down
Loading