This activity was slightly frustrating. In the beginning, I did play around with the webcam, and it was going pretty smoothly. However, I was still using get() instead of pixels array. When I changed to the array, that was when things started to break and freeze. So I switched from the webcam to an image, and after trying three different images it still wasn’t working.
At first I thought it was a glitch problem, so I tried to code in the p5 editor as well as Visual Studio Code. All three of them had the same problem, so I thought maybe it was the image. I tried other images, but the browser kept lagging and nothing showed up, so I figured it was a code issue. I couldn’t open the console to check what was wrong because the webpage kept freezing.
coding proccess
I used the example from the slides so I could have a starting point instead of constantly freezing my browser. This actually helped a lot, and I was able to then start changing the code to something else. For this image, I mapped the size of the ellipses to red. In addition to map, I decided to add Math.random() to the x and y so the ellipses move a little.
With the code finally working, I decided to test out another image I had. This portrait had really interesting lighting, so I tested out both blue and red for the mapping.
Conclusion
I think at the beginning I had the right idea on how to use pixels array, but the execution was done poorly so nothing worked. If I do come back to this, I would want to try playing around with sin and cos, as well as use lines instead of circles so it’ll look more like a painting. Especially for the portrait, I think it would look really cool if there were different line strokes instead of circle sizes.