For this assignment, I was really excited to work with the webcam capture available on p5js! My vision for this project was to combine the webcam capture feature with my pixel art assets to create a virtual pixel art environment! I hope to expand my understanding of this to build a game, which I may use for a later assignment. FOR NOW I just decided to make a fun pixel art food poser, where you can pose with the food pixels.
You can check out my code here! https://editor.p5js.org/mnk2970/sketches/EHmywloRE
image description: pixelated webcam footage of myself "posing" with a 2d pixel art image, a cup of noodles.
I also very very much borrowed from my professor's code to make the pixelated webcam effect (THANK YOU ALLISON), you can see her work here: https://editor.p5js.org/allison.parrish/sketches/YxlcZlLiO
Of course, while we had two weeks to work on this assignment, I bravely spent the first week just making artwork (I was REALLY excited about making food)
image description: a compilation of various Korean pixel art snacks and foods. There are two cup noodles, several packages for Choco•Pie, shrimp crackers, yakult, and bbushu-bbushu!
I loved the pixelated effect that Allison shared with the class, so I copied it and just modified the "pixel" sizes to fit my 3x magnified assets (comments are in blue).
cap.loadPixels();
for (let x = 0; x < cap.width; x += 3) { // i changed the size of pixels to match the size of the assets
for (let y = 0; y < cap.height; y += 3) {
let offset = ((y * cap.width) + x) * 4;
let r = cap.pixels[offset];
let g = cap.pixels[offset + 1];
let b = cap.pixels[offset + 2];
fill(r, g, b);
rect(x, y, 3, 3); }I had my webcam function and my sprites all loaded in the preload function! It was now time to code all the stuff to make the sketch interactive!
My initial vision was to find a way for the webcam footage itself to interact with the food sprites, but I was unable to find code that I understood (and wasn't as brazen about tearing through others' code). I decided to just have the pixel food appear with a simple mouse press function, similar to my Blubbin' Fish fun sketch.
Unfortunately,,, CHAOS
image description: pixelated webcam footage of myself "posing" with a 2d pixel art images, several sprites are all "stacked" in one place.
I forgot!! to include functions so that each sprite would have individual placement outside of the mouse press!! OOH NOOOOOOOOO
oh well i ran outta time.
i'll update this blog later when i fix for real
it's still cute tho