Closed jacopomazzoni closed 4 months ago
For now, setting pixelDensity(1)
after creating your canvas seems to make it work again for me? I wonder if it broke after this https://github.com/processing/p5.js/pull/6447 and there's something we need to update to get graphics.get()
images to mask correctly
Thank you for the swift response, just as a curiosity, is that the correct way to go about it or am I encountering this because I stepped outside of the most beaten path? If there's a more mainstream/better supported way to create masks I wouldn't mind switching to that instead and abandoning this unsupported and kind of elaborate way of doing it. Thank you.
That method should still work, so it's worth fixing!
But to clip to a path, we now have beginClip()
and endClip()
which might be a bit easier: https://p5js.org/reference/#/p5/beginClip
While I personally love that solution I'm currently using the previous example as a mini-demo to learn how to play with shapes ( both adding and subtracting shapes )
Anything involving push and pop requires me to increase my students' load of technical information of the inner workings of P5 and I generally try to avoid it until much later on.
This example allows me to keep the complexity somewhat contained to the objects we create and therefore allows the students to maintain a sense of control and not get overwhelmed.
Thank you again for pointing out that solution but if the goal is teaching neophytes I feel like the "old" way offers a more direct and intuitive approach and I agree that it should be restored/maintained.
Hey, I'm quite sure that either the get()
function is not returning the density correctly or the mask
function itself is bugged.
Run this code (not created by me): https://editor.p5js.org/allison.parrish/sketches/kOHWUvQR1 on a display that has a display density not equal to 1, and you will see that the masked shape appears to be offset from the cursor. When you include pixelDensity(1)
, the code works properly and the masked shape appears right on the cursor.
I looked into the mask
function in p5.Image
and it seems that the function is taking into account the pixel density of the image in the parameter, but not the pixel density of the image itself and that might be causing the bug. Is it okay if I take a stab at trying to fix this bug?
Thanks @Papershine, that would be great! Let me know if you have any questions! (also hello from someone else who went to UBC!)
Most appropriate sub-area of p5.js?
p5.js version
1.9.0
Web browser and version
chrome
Operating system
irrelevant/webEditor
Steps to reproduce this
Steps:
Snippet:
This is something I used to teach in class, now it's broken and doesn't even give an error, what changed? how do I fix it?