ml5 Final Project

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.