Documentation

Process

Building on last week’s code, I aimed to recreate the grid of pixel objects in 3D space and incorporate body segmentation. The first step is easy, as I used the WebGL library and assigned each pixel object a z-position property.

I referred to the code example to help me implement the body segmentation code. Initially, I was unsure what kind of data body segmentation outputs, as it is not explicitly mentionedon the ML5 reference site. I used the following piece of code: link to help me test and understand what kind of raw data it stores in the data array. It turns out that the data arrays store a variable ranging from 0 to 255, which represents the confidence level (not 100% certain) of each pixel in the video being part of the human body. To know this, I drew the data array by mapping the confidence value of each pixel to the R value.

After determining what data is stored in the data array, I mapped the confidence level of each pixel to the z-position of the respective pixel object.

Finally, I experimented with different visual effects. I decided to keep the drawLine() function, which randomly draws lines between two pixel objects when they are far apart in the z dimension and close to each other in terms of the x and y dimensions. I liked this effect because it creates a transition from the foreground (which is the background in real life) to the background (which is the person).