My concept draws inspiration from the interactive projections often seen in galleries and museums. As I mentioned in my previous post, I wanted to include an interactive art piece that allows the audience to both enjoy and engage with it.
I used ML5.js documentation and example for my source body segmentation used in my code.
A highlight of some code that you’re particularly proud of:
let bodySegmentation;
let video;
let segmentation;
let options = {
maskType: "person",
};
function preload() {
bodySegmentation = ml5.bodySegmentation("BodyPix", options);
}
function setup() {
createCanvas(640, 480);
// Create the video
video = createCapture(VIDEO);
video.size(640, 480);
video.hide();
bodySegmentation.detectStart(video, gotResults);
}
function draw() {
background(255);
// Draw the video
image(video, 0, 0);
if (segmentation) {
// Load the pixels of the mask to check each pixel
segmentation.mask.loadPixels();
This part of the code taught my a lot about body segmentation, and how interactive projections work form behind the scenes.
Embedded sketch:
Note: For it to work, please click the link and allow camera access.
Reflection and ideas for future work or improvements:
I am happy that I learned how to use ML5.js, and I look forward to using it in future projects. For this project, I would like to implement more details, using something like FaceMesh, which could affect the shape or color depending on your visible motions.