Hi! I recently adapted my Processing curriculum to P5 for some remote teaching I’m doing, and an issue came up during our webcam project, owing to the students working on different computers with different webcam resolutions.
As a class, we coded this demo:
https://editor.p5js.org/lmeeken/sketches/_kNWh9fLb
Which draws the captured webcam frame onto a 640x480 p5.Renderer object, then loops through all of the pixels, and replaces ones below a certain darkness threshold with neon green before updating the pixels and drawing the altered p5.Renderer frame to the screen.
It works fine on my computer, and most others I’ve tested it on. But some students I was working with remotely had a phenomenon where there pixel replacement was only happening to the top quarter or so of the image.
We diagnosed the issue as their camera capturing a higher resolution, and the for loop not traversing their whole image. So we applied a “band-aid” solution by multiplying the bounds of their pixel-traversal (on line 29 in the linked sketch) for loop by 4.
However, I’m still not sure why this was necessary. Since we take the frame and “image” it onto a 640x480 buffer (line 21 of the linked example), and traverse the pixels of that buffer, the initital capture resolution shouldn’t make a difference, right? Because the image we’re working with should always be 640x480? So why does it make a difference anyway?
I’d love to hear what people think, as I want to be able to share this coding resource with other art teachers, and want to iron out kinks like this that they may not be able to address when they come up in the lesson.