Closed taliacotton closed 2 months ago
Thanks for filing this issue! I think this bug may be the same as https://github.com/processing/p5.js/issues/6770 -- @Papershine, maybe you can test this example on your PR to see if it fixes it too?
Thank you! Yes, I had actually tested adding pixelDensity(1)
prior to contributing the issue, but then the quality of the sketch goes down significantly. If I add pixelDensity(2)
it also fixes the issue, but on devices where the device pixel ratio is something else the sketch lags significantly because it's drawing at 2x the size. I tried pixelDensity(window.devicePixelRatio
) but that didn't fix the issue.
Is there a solution that solves the misalignment without losing the quality of the sketch?
If it helps to debug, I just switched to version 1.4.1 per #6770, and that worked. However, not ideal for a long-term solution since I'd like to use the most recent version. Let's see if @Papershine's pull request solves it?
Yep I've tried it with the code in the PR and this is how it looks - this should be what it looks like right?
whee yes! <3
Hey awesome P5 team, do you have any tips for what I should do in the meantime regarding this bug while the pull request is being approved? Clients eager to see things right.
Hi! One option to use a shader to do the masking. Not sure if you can use webGL or not, but if you can it's a pretty short shader. Here's a quick example: https://editor.p5js.org/aferriss/sketches/qYWb4P49d
Another option, if your mask is shapes that you draw, is to use beginClip
/endClip
: https://p5js.org/reference/#/p5/beginClip
Awesome, thanks so much Dave. Will look into both of these.
Most appropriate sub-area of p5.js?
p5.js version
1.9.0
Web browser and version
Chrome 121.0.6167.139
Operating system
MacOSX
Steps to reproduce this
Steps:
My gut is that it might have something to do with the device pixel ratio or the pixel density, but I have no reason to believe that and haven't been able to prove that.
Snippet: