Generative Portraiture With BodyPix
Description
Develop a generative/interactive portraiture utilizing Pixel Manipulation and BodyPix.
Having user interaction is optional.
Utilize pixel manipulation from an image, video, or live feed images from a webcam.
Employ BodyPix.
Try to optimize the frame rate (Ideally above 29 fps).
Voronoi portrait with BodyPix
Mosaic the face
Get the body part in the webcam with if (bodyPart == 0 || bodyPart == 1) {}
Use the vertex
Apply the vertex shape to the processed body part in the webcam
Draw the portrait
Draw only the human figure, not the background in the webcam
Load the image
The Cross-Origin Resource Sharing (CORS) issue occurs when tensorflow.js processing images stored in the p5.js web editor.
In my case, the image can be passed with the attribute crossorigin="anonymous", but it doesn't always work.
loadImage() can pass the CORS. Using createImg() to create an HTML element is not a good way to go.
Process the image
After processImage(), the image will contain only the face part and is ready to apply pixel manipulation effects.
Pixel manipulation
The effect references the Voronoi Portrait to render a portrait using the Voronoi diagram. For the Interaction part, users can press the spacebar to switch to the next image and any other key to toggle the hotspots. Users can also click and drag hotspots to move or scale them.
The piece is still a work in progress. I will continue to work on it and may explore other effects.
