Skip to content

Account for pixel density when masking images #6788

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

Merged
merged 10 commits into from
May 3, 2024
Merged

Account for pixel density when masking images #6788

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
84d4d0c
account for pixel density in image mask
Papershine Feb 4, 2024
23ad4f4
account for mask pixeldensity
Papershine Feb 5, 2024
2e2abf5
remove debug info
Papershine Feb 5, 2024
f841abb
test higher pixel densities in mask
Papershine Apr 30, 2024
11519b6
fix and test masking with different densities
Papershine May 1, 2024
e832b3d
comment grammar
Papershine May 1, 2024
e6a23eb
Merge branch 'main' into mask-fix
Papershine May 1, 2024
fbefb56
fix testing not testing everything
Papershine May 1, 2024
7d0e9c2
Merge branch 'mask-fix' of https://github.com/Papershine/p5.js into m…
Papershine May 1, 2024
a11e2bc
add createGraphics test for mask
Papershine May 3, 2024
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
17 changes: 9 additions & 8 deletions src/image/p5.Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -878,21 +878,22 @@ p5.Image = class {
}
const currBlend = this.drawingContext.globalCompositeOperation;

let scaleFactor = 1;
let imgScaleFactor = this._pixelDensity;
let maskScaleFactor = 1;
if (p5Image instanceof p5.Renderer) {
scaleFactor = p5Image._pInst._pixelDensity;
maskScaleFactor = p5Image._pInst._pixelDensity;
Copy link
Contributor

@davepagurek davepagurek Feb 5, 2024

Choose a reason for hiding this comment

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

p5.Image also has a pixel density too now, maybe we can add a branch to handle when the input is an image too?

p5.js/src/image/p5.Image.js

Line 150 in 37d3324

this._pixelDensity = 1;

}

const copyArgs = [
p5Image,
0,
0,
scaleFactor * p5Image.width,
scaleFactor * p5Image.height,
maskScaleFactor * p5Image.width,
maskScaleFactor * p5Image.height,
0,
0,
this.width,
this.height
imgScaleFactor * this.width,
imgScaleFactor * this.height
];

this.drawingContext.globalCompositeOperation = 'destination-in';
Expand All @@ -907,8 +908,8 @@ p5.Image = class {
this.gifProperties.frames[i].image = this.drawingContext.getImageData(
0,
0,
this.width,
this.height
imgScaleFactor * this.width,
imgScaleFactor * this.height
);
}
this.drawingContext.putImageData(
Expand Down