Face Mesh Triangles

{"name":"ml5js Face Filter","description":"This project demonstrating creating webcam face filters using ml5js facemesh! \n\nUse the face mesh at https://developers.snap.com/lens-studio/4.55.1/references/guides/lens-features/tracking/face/face-effects/face-mesh/#download-the-face-mesh-uv as a guide to create custom UV map images. ","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/nbao1fklqozzjt3tfozb","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-04-03T18:52:35.428031Z","updated_at":"2025-04-03T18:52:35.428033Z","user_id":70,"status":"PRIVATE","parent_id":7070,"id":7123,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"/*\nThis project uses a tool called ml5.js to map images\nonto your face using your webcam.\n\nHave fun exploring and customizing your own face mesh art! 🎉\n\nUse the guide at https://developers.snap.com/lens-studio/4.55.1/references/guides/lens-features/tracking/face/face-effects/face-mesh/#download-the-face-mesh-uv\nto create your custom mesh in an image editing program like https://pixlr.com/\nAdd your design on it's own layer, and hide the face mesh guide layer before exporting.\n*/\n\nlet faceMesh;\n\nlet video;\n\nlet faces = [];\n\nlet options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };\n\nlet uvMapImage;\n\nlet triangulation;\n\nlet uvCoords;\n\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'whiskers' asset\n uvMapImage = loadImage(\"@asset('bugs')\");\n}\n\nfunction setup() {\n createCanvas(640, 480, WEBGL);\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 // Get the Coordinates for the uv mapping\n triangulation = faceMesh.getTriangles();\n uvCoords = faceMesh.getUVCoords();\n}\n\nfunction draw() {\n translate(-width / 2, -height / 2);\n image(video, 0, 0, width, height);\n\n for (let i = 0; i < faces.length; i++) {\n let face = faces[i];\n\n // Draw all the triangles\n noStroke();\n texture(uvMapImage);\n textureMode(NORMAL);\n beginShape(TRIANGLES);\n for (let i = 0; i < triangulation.length; i++) {\n let indexA = triangulation[i][0];\n let indexB = triangulation[i][1];\n let indexC = triangulation[i][2];\n let a = face.keypoints[indexA];\n let b = face.keypoints[indexB];\n let c = face.keypoints[indexC];\n const uvA = { x: uvCoords[indexA][0], y: uvCoords[indexA][1] };\n const uvB = { x: uvCoords[indexB][0], y: uvCoords[indexB][1] };\n const uvC = { x: uvCoords[indexC][0], y: uvCoords[indexC][1] };\n vertex(a.x, a.y, uvA.x, uvA.y);\n vertex(b.x, b.y, uvB.x, uvB.y);\n vertex(c.x, c.y, uvC.x, uvC.y);\n }\n endShape();\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}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Face Mesh Triangles\n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n uvMapImage = loadImage(\"@asset('stickersUv')\");\n\tclouds = loadImage(\"@asset('clouds')\");\n}\n```","deleted":0,"created_at":"2025-04-03T18:56:01.885325Z","output_tokens":null,"code_id":229044,"input_tokens":null,"id":130012},{"project_id":7123,"sender":"client_script","message":"Let's get started!\n Errors:\n","deleted":0,"created_at":"2025-04-03T19:11:27.224845Z","output_tokens":null,"code_id":229218,"input_tokens":null,"id":130166},{"project_id":7123,"sender":"ai","message":"Great! Could you tell me more about your project idea? What kind of features or effects would you like to add or improve in your face mesh art project?","deleted":0,"created_at":"2025-04-03T19:11:27.266961Z","output_tokens":37,"code_id":229218,"input_tokens":3435,"id":130167},{"project_id":7123,"sender":"human","message":"yuse clouds as the uvMapImage","deleted":0,"created_at":"2025-04-03T19:11:40.899219Z","output_tokens":null,"code_id":229218,"input_tokens":null,"id":130171},{"project_id":7123,"sender":"ai","message":"Sure, we can use the \"clouds\" asset as the `uvMapImage`. Let's update the code to load and use this asset. \n\nHere's how you can do it:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'clouds' asset\n uvMapImage = loadImage(\"@asset('clouds')\");\n}\n```\n\n- This code updates the `uvMapImage` to use the \"clouds\" asset.\n- The `loadImage` function loads the image before the sketch starts, ensuring it's ready to be used when drawing. \n\nFeel free to replace the existing `preload` function with this updated version. Let me know if you want to make further changes!","deleted":0,"created_at":"2025-04-03T19:11:40.905838Z","output_tokens":167,"code_id":229218,"input_tokens":3438,"id":130172},{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'clouds' asset\n uvMapImage = loadImage(\"@asset('clouds')\");\n\tfreckles = loadImage(\"@asset('freckles')\");\n}\n```","deleted":0,"created_at":"2025-04-03T19:14:19.776385Z","output_tokens":null,"code_id":229224,"input_tokens":null,"id":130195},{"project_id":7123,"sender":"client_script","message":"Let's get started!\n Errors:\n","deleted":0,"created_at":"2025-04-03T19:14:26.389727Z","output_tokens":null,"code_id":229224,"input_tokens":null,"id":130196},{"project_id":7123,"sender":"ai","message":"Awesome! You've already updated your code to use the \"clouds\" asset as the `uvMapImage`, which is great. Is there anything else","deleted":0,"created_at":"2025-04-03T19:14:26.496562Z","output_tokens":31,"code_id":229224,"input_tokens":3457,"id":130197},{"project_id":7123,"sender":"human","message":"use freckles as the uvMapImage","deleted":0,"created_at":"2025-04-03T19:14:35.842717Z","output_tokens":null,"code_id":229224,"input_tokens":null,"id":130201},{"project_id":7123,"sender":"ai","message":"Let's update your project to use the \"freckles\" asset as the `uvMapImage`. Here's how to modify the `preload` function:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'freckles' asset\n uvMapImage = loadImage(\"@asset('freckles')\");\n}\n```\n\n- This change will load the \"freckles\" asset and set it as the texture for the face mesh.\n- Make sure to replace the existing `preload` function with this updated version.\n\nLet me know if you'd like to add anything else or make further changes!","deleted":0,"created_at":"2025-04-03T19:14:35.849357Z","output_tokens":149,"code_id":229224,"input_tokens":3461,"id":130202},{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'freckles' asset\n uvMapImage = loadImage(\"@asset('freckles2')\");\n\tbugs = loadImage(\"@asset('bugs')\");\n}\n```","deleted":0,"created_at":"2025-04-03T19:16:48.097507Z","output_tokens":null,"code_id":229241,"input_tokens":null,"id":130232},{"project_id":7123,"sender":"human","message":"use bugs as the uvmapimage","deleted":0,"created_at":"2025-04-03T19:16:56.525509Z","output_tokens":null,"code_id":229241,"input_tokens":null,"id":130238},{"project_id":7123,"sender":"ai","message":"Let's update your project to use the \"bugs\" asset as the `uvMapImage`. Here’s how to modify the `preload` function:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'bugs' asset\n uvMapImage = loadImage(\"@asset('bugs')\");\n}\n```\n\n- This change will load the \"bugs\" asset and set it as the texture for the face mesh.\n- Make sure to replace the existing `preload` function with this updated version.\n\nLet me know if you'd like to make any further changes or add new features!","deleted":0,"created_at":"2025-04-03T19:16:56.532884Z","output_tokens":145,"code_id":229241,"input_tokens":3462,"id":130239},{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'bugs' asset\n uvMapImage = loadImage(\"@asset('bugs')\");\n\tsmiles = loadImage(\"@asset('smiles')\");\n}\n```","deleted":0,"created_at":"2025-04-03T19:18:46.008869Z","output_tokens":null,"code_id":229270,"input_tokens":null,"id":130252},{"project_id":7123,"sender":"human","message":"use smiles as the uvmapimage","deleted":0,"created_at":"2025-04-03T19:18:53.924900Z","output_tokens":null,"code_id":229270,"input_tokens":null,"id":130255},{"project_id":7123,"sender":"ai","message":"Let's update your project to use the \"smiles\" asset as the `uvMapImage`. Here’s how to modify the `preload` function:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'smiles' asset\n uvMapImage = loadImage(\"@asset('smiles')\");\n}\n```\n\n- This change will load the \"smiles\" asset and set it as the texture for the face mesh.\n- Make sure to replace the existing `preload` function with this updated version.\n\nLet me know if you would like to make any further changes or add new features!","deleted":0,"created_at":"2025-04-03T19:18:53.930937Z","output_tokens":148,"code_id":229270,"input_tokens":3463,"id":130256},{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'smiles' asset\n uvMapImage = loadImage(\"@asset('smiles2')\");\n\tgooglyEyes = loadImage(\"@asset('googlyEyes')\");\n}\n```","deleted":0,"created_at":"2025-04-03T19:20:31.892177Z","output_tokens":null,"code_id":229294,"input_tokens":null,"id":130271},{"project_id":7123,"sender":"human","message":"use googlyeyes as the ubvmapimage","deleted":0,"created_at":"2025-04-03T19:20:44.722256Z","output_tokens":null,"code_id":229294,"input_tokens":null,"id":130273},{"project_id":7123,"sender":"ai","message":"Let's update your project to use the \"googlyEyes\" asset as the `uvMapImage`. Here’s how to modify the `preload` function:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'googlyEyes' asset\n uvMapImage = loadImage(\"@asset('googlyEyes')\");\n}\n```\n\n- This change will load the \"googlyEyes\" asset and set it as the texture for the face mesh.\n- Make sure to replace the existing `preload` function with this updated version.\n\nLet me know if you'd like to make any further changes or add new features!","deleted":0,"created_at":"2025-04-03T19:20:44.729110Z","output_tokens":151,"code_id":229294,"input_tokens":3484,"id":130274},{"project_id":7123,"sender":"server_script","message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'googlyEyes' asset\n uvMapImage = loadImage(\"@asset('googlyEyes')\");\n\twhiskers = loadImage(\"@asset('whiskers')\");\n}\n```","deleted":0,"created_at":"2025-04-03T19:21:33.738102Z","output_tokens":null,"code_id":229306,"input_tokens":null,"id":130284},{"project_id":7123,"sender":"human","message":"use whiskers as the uvmapimage","deleted":0,"created_at":"2025-04-03T19:21:41.779688Z","output_tokens":null,"code_id":229306,"input_tokens":null,"id":130286},{"project_id":7123,"sender":"ai","message":"Let's update your project to use the \"whiskers\" asset as the `uvMapImage`. Here’s how to modify the `preload` function:\n\n```javascript\n// script.js\nfunction preload() {\n // Load the faceMesh model\n faceMesh = ml5.faceMesh(options);\n // Update the uvMapImage to use the 'whiskers' asset\n uvMapImage = loadImage(\"@asset('whiskers')\");\n}\n```\n\n- This change will load the \"whiskers\" asset and set it as the texture for the face mesh.\n- Make sure to replace the existing `preload` function with this updated version.\n\nLet me know if you'd like to make any further changes or add new features!","deleted":0,"created_at":"2025-04-03T19:21:41.785166Z","output_tokens":149,"code_id":229306,"input_tokens":3486,"id":130287},{"project_id":7123,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:24:04.133605Z","output_tokens":null,"code_id":229310,"input_tokens":null,"id":130314}],"assets":[{"cloudinary_id":"ndkzschiazd9lpvafhde","name":"whiskers","deleted":false,"id":67339,"created_at":"2025-04-03T19:21:34.509155Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"sq68wpxe4b0ypek0c5wt","name":"googlyEyes","deleted":false,"id":67336,"created_at":"2025-04-03T19:20:32.661535Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"idxnqlruqunq96cv4sj7","name":"smiles2","deleted":false,"id":67335,"created_at":"2025-04-03T19:20:00.251636Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"ecg53lndghttqaug2wtt","name":"smiles","deleted":false,"id":67331,"created_at":"2025-04-03T19:18:46.777881Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"tnsxc2cfqxp9jleubyod","name":"bugs","deleted":false,"id":67324,"created_at":"2025-04-03T19:16:48.808600Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"sbftdjzba5uon8owrrvv","name":"freckles2","deleted":false,"id":67321,"created_at":"2025-04-03T19:15:47.953357Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"slvnxqjqlbusavkahv8o","name":"freckles","deleted":false,"id":67318,"created_at":"2025-04-03T19:14:20.807191Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"ehgvjhcqlh4dowfeoke5","name":"clouds","deleted":false,"id":67255,"created_at":"2025-04-03T18:56:01.147079Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"ek2qamfb8hze7k7pqjfl","name":"stickers1","deleted":false,"id":67246,"created_at":"2025-04-03T18:52:35.460756Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"gr4d5uhfqzmlgsywhyea","name":"stickersUv","deleted":false,"id":67245,"created_at":"2025-04-03T18:52:35.459084Z","project_id":7123,"resource_type":"image"},{"cloudinary_id":"nbao1fklqozzjt3tfozb","name":"coverImg1","deleted":false,"id":67244,"created_at":"2025-04-03T18:52:35.433292Z","project_id":7123,"resource_type":"image"}],"messages_sent":6,"comments":[],"steps":[]}