I was inspired by the idea of object recognition and thought it would be funny to visualize the idea of detecting certain objects in a video, such as a cat.
What Worked
I really liked the cat images we were using in our examples this week, so I wanted to expand upon that and use a cat video in my sketch. The idea was to replace the pixels in the video with either the words "cat" or "not a cat". The color and location of the text would map to the color and location of the cat at that pixel. I was able to use some of code from the pixel mirror sketch we created to help build this sketch. I then added some sliders to help control the density/size of the text, and the threshold value that displays more or less of the cats based on their grayscale pixel value.
What Didn't Work
This week I spent way too long trying to figure out why my sketch wasn't displaying the video on my website, when after some troubleshooting I realized that there's something going on with my Chrome browser. I tried searching to see if it had to do with Chrome disabling autoplay videos, but I don't think that's why it's not working. That's something I'm interested in learning more about since I have no real idea what the culprit could be.
If I could expand on this code further, it would be cool to extrapolate more "objects" in the scene based off of color value or other parameters. I also wish I had some more time to play around with other fun ways of displaying the video but I was feeling a bit overwhelmed with just how much you can do, I decided to keep it pretty simple.
What I Learned
I'm starting to better understand how p5.js, javascript and HTML work together as an ecosystem for building really cool, interactive websites. I was very afraid of touching the index.html in P5.js, but now that the magical curtain has fallen down I'm able to do a lot more. We'll see what I can come up with next week!