FaceMesh example using ml5js

{"name":"ml5.js face mesh","description":"Demo of ml5js face mesh use. Fork this project and turn it into something cool, like a video filter!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/t9sflseuvrzivmf72wgi","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-05-15T17:59:01.985218Z","updated_at":"2025-05-15T17:59:01.985219Z","user_id":166,"status":"PRIVATE","parent_id":7069,"id":7958,"user":{"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"/*\nThis project uses the ml5.js library to detect facial landmarks in real-time using a webcam. \nml5.js is a friendly and easy-to-use library built on top of TensorFlow.js that provides \nmachine learning tools for the web.\n\nIn this project, we utilize the FaceMesh model to track facial features. The model identifies \nkey points on a detected face, which you can visualize and use creatively.\n\nIdeas for expanding this project:\n1. Develop an interactive mask or filter application that adds virtual elements to the user's face.\n2. Allow users to take a snapshot with the current filters or effects and download the image.\n3. Implement a simple emotion detection feature by analyzing the positions of facial landmarks.\n4. Introduce different drawing styles for the face points, like using emojis or shapes.\n\nRemember, the sky's the limit! Use your creativity to make this project uniquely yours.\n*/\n\nlet faceMesh;\nlet video;\nlet faces = [];\nlet options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };\n\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n}\n\nfunction setup() {\n createCanvas(640, 480);\n // Create the webcam video and hide it\n video = createCapture(VIDEO);\n video.size(640, 480);\n video.hide();\n // Start detecting faces from the webcam video\n faceMesh.detectStart(video, gotFaces);\n}\n\nfunction draw() {\n // Draw the webcam video\n image(video, 0, 0, width, height);\n\n // Draw all the tracked face points\n for (let i = 0; i < faces.length; i++) {\n let face = faces[i];\n for (let j = 0; j < face.keypoints.length; j++) {\n let keypoint = face.keypoints[j];\n fill(0, 255, 0);\n noStroke();\n circle(keypoint.x, keypoint.y, 5);\n }\n }\n}\n\n// Callback function for when faceMesh outputs data\nfunction gotFaces(results) {\n // Save the output to the faces variable\n faces = results;\n}","style.css":"html,\nbody {\n margin: 0;\n padding: 0;\n}\n\ncanvas {\n display: block;\n}\n\n* {\n font-family: sans-serif;\n}","index.html":"\n\n\n\n \n FaceMesh example using ml5js\n\n \n \n \n\n\n\n \n\n\n"},"chat_history":[],"assets":[{"project_id":7958,"creator":null,"cloudinary_id":"wbannoyfyllzcs1rw7sf","deleted":false,"id":74035,"created_at":"2025-05-15T17:59:01.992715Z","name":"cover_pose","resource_type":"image","tags":null},{"project_id":7958,"creator":null,"cloudinary_id":"mzjdeskh9tg6hafhsm2y","deleted":false,"id":74034,"created_at":"2025-05-15T17:59:01.991461Z","name":"cover","resource_type":"image","tags":null},{"project_id":7958,"creator":null,"cloudinary_id":"t9sflseuvrzivmf72wgi","deleted":false,"id":74033,"created_at":"2025-05-15T17:59:01.989620Z","name":"coverImg1","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}