Check out the live demo of the project here: PoseNet Demo
This fun and interactive project overlays "Thug Life" style accessories—including sunglasses, a cigar, and an actor face image—onto a user's face in real-time using their webcam. The face tracking is powered by PoseNet via the ml5.js library, and rendered using p5.js.
🔥 Features Real-time face tracking using PoseNet (via ml5.js)
Automatically aligns sunglasses over the eyes
Adds a rotating or fixed cigar near the mouth
Overlays a fun actor face image
Interactive visual effects that scale and reposition as you move closer or farther from the camera
🛠 Technologies Used p5.js – for creative coding and canvas rendering
ml5.js – PoseNet implementation for browser-based pose tracking
JavaScript – logic and webcam interaction
To run this project locally, follow these steps:
- Clone the repository: git clone https://github.com/sanojDD/poseNet-ml5.js.git
2.Navigate into the project directory: cd poseNet-ml5.js
3.Open the index.html file in a browser(use live server)