Here’s a link to the prototype that I made for the user testing week of the final project. You can see that I have my state machine finished and ready to go for a four player game of Exquisite Corpse.
In speaking to Yining, we came to the conclusion that I should use BodyPix to process the images, then put them into photoshop to create one long scrolling image to replace my temporary pictures in my prototype.
She said that in order to use BodyPix to isolate the images, I would have to cycle through all the pixels in the image to find the ones that are masked in a coloured block dependant on which area of the body I was looking for in BodyPix.
My plan was the following:
- process the images from cocodata set using BodyPix to isolate a series of heads, torsos, legs and feet.
- take those images and put them into a p5 sketch that looked for the colour values and created a mask that allowed for transparency where the colour block exists and a white background where the rest of the image existed. This creates a mask.
- overlay mask on top of the image in p5 in order to preserve the part of the body that I need.
- export that image
- stitch all the heads together in photoshop
- do the same for the rest of the body parts
- replace these with my placeholder images in my prototype
I began by refreshing my memory of the Pixels array with Dan Shiffman’s videos:
Then using this example, I wrote some code that isolated the square in an image I made in illustrator. The image looks like this:

I was trying to fake the idea that the background was busy and the colour of the left side of the face was clear. I wrote some code that turned everything but the purple square white. This masks the background and would, in theory, keep the left side of the face (which is auto coloured to this shade of purple).

Then I added an additional image to the sketch. This time without the purple square. I wrote some code that takes anything that is the right shade of purple and makes it reflective of the image behind it. Hopefully this way I can crop out the person behind the colour blocked mask.
Take a look at this code here.
This is the exported result.

Then I ran a BodyPix sketch that processes images and identifies the parts. I exported these experiments as images.
https://editor.p5js.org/ajl774@nyu.edu/sketches/RTIT7927E
Then I scraped a bunch of images from the coco data set.
I used BodyPix to isolate the parts of the body.

I passed them through my other code to mask all the elements that aren’t the intended body part.



A then I stitched them together to create a scrolling exquisite corpse game. It’s kind of hideous haha.