Face Mesh Triangles

{"name":"Womp womp","description":"","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/nbao1fklqozzjt3tfozb","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-04-03T19:29:21.204832Z","updated_at":"2025-04-03T19:29:21.204834Z","user_id":192,"status":"PRIVATE","parent_id":7070,"id":7125,"user":{"photo":null,"email":null,"recess_id":"cfb1457c-ce90-4d98-a6ed-7abb46cfc301","created_at":"2024-08-21T18:42:26.417915Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"xamseygo","id":192,"password_hash":null,"updated_at":"2024-08-21T18:42:26.417918Z","reset_token_expiry":null,"subscription_status":null},"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 uvMapImage = loadImage(\"@asset('Sus')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n Breadmaster = loadImage(\"@asset('Breadmaster')\");\n Steve = loadImage(\"@asset('Steve')\");\n Susser = loadImage(\"@asset('Susser')\");\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":[{"message":"","project_id":7125,"created_at":"2025-04-03T19:13:28.472715Z","output_tokens":null,"sender":"client_script","code_id":229220,"deleted":0,"input_tokens":null,"id":130189},{"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('')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n\tBreadmaster = loadImage(\"@asset('Breadmaster')\");\n}\n```","project_id":7125,"created_at":"2025-04-03T19:14:33.039911Z","output_tokens":null,"sender":"server_script","code_id":229220,"deleted":0,"input_tokens":null,"id":130200},{"message":"","project_id":7125,"created_at":"2025-04-03T19:14:54.099848Z","output_tokens":null,"sender":"client_script","code_id":229239,"deleted":0,"input_tokens":null,"id":130209},{"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('Breadmaster')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n Breadmaster = loadImage(\"@asset('Breadmaster')\");\n\tBeard = loadImage(\"@asset('Beard')\");\n}\n```","project_id":7125,"created_at":"2025-04-03T19:16:16.251776Z","output_tokens":null,"sender":"server_script","code_id":229239,"deleted":0,"input_tokens":null,"id":130222},{"message":"","project_id":7125,"created_at":"2025-04-03T19:16:44.586859Z","output_tokens":null,"sender":"client_script","code_id":229261,"deleted":0,"input_tokens":null,"id":130231},{"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('Breadmaster')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n Breadmaster = loadImage(\"@asset('Breadmaster')\");\n\tBeard = loadImage(\"@asset('Beard')\");\n}\n```","project_id":7125,"created_at":"2025-04-03T19:18:32.200332Z","output_tokens":null,"sender":"server_script","code_id":229279,"deleted":0,"input_tokens":null,"id":130250},{"message":"","project_id":7125,"created_at":"2025-04-03T19:18:56.694433Z","output_tokens":null,"sender":"client_script","code_id":229289,"deleted":0,"input_tokens":null,"id":130257},{"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('Breadmaster')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n Breadmaster = loadImage(\"@asset('Breadmaster')\");\n Beard = loadImage(\"@asset('Beard')\");\n\tSteve = loadImage(\"@asset('Steve')\");\n}\n```","project_id":7125,"created_at":"2025-04-03T19:20:44.243447Z","output_tokens":null,"sender":"server_script","code_id":229289,"deleted":0,"input_tokens":null,"id":130272},{"message":"","project_id":7125,"created_at":"2025-04-03T19:21:27.597628Z","output_tokens":null,"sender":"client_script","code_id":229304,"deleted":0,"input_tokens":null,"id":130282},{"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('Steve')\");\n Clown = loadImage(\"@asset('Clown')\");\n Rick = loadImage(\"@asset('Rick')\");\n Turtle = loadImage(\"@asset('Turtle')\");\n What = loadImage(\"@asset('What')\");\n Cool = loadImage(\"@asset('Cool')\");\n Breadmaster = loadImage(\"@asset('Breadmaster')\");\n Steve = loadImage(\"@asset('Steve')\");\n\tSusser = loadImage(\"@asset('Susser')\");\n}\n```","project_id":7125,"created_at":"2025-04-03T19:24:45.588783Z","output_tokens":null,"sender":"server_script","code_id":229304,"deleted":0,"input_tokens":null,"id":130323},{"message":"","project_id":7125,"created_at":"2025-04-03T19:25:28.632076Z","output_tokens":null,"sender":"client_script","code_id":229351,"deleted":0,"input_tokens":null,"id":130332},{"message":"","project_id":7125,"created_at":"2025-04-03T19:26:29.764424Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130341},{"message":"","project_id":7125,"created_at":"2025-04-03T19:27:20.797515Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130345},{"message":"","project_id":7125,"created_at":"2025-04-03T19:28:32.075483Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130356},{"message":"","project_id":7125,"created_at":"2025-04-03T19:30:18.518556Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130372},{"message":"","project_id":7125,"created_at":"2025-04-03T19:30:46.378838Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130376},{"message":"","project_id":7125,"created_at":"2025-04-03T19:32:13.809191Z","output_tokens":null,"sender":"client_script","code_id":229366,"deleted":0,"input_tokens":null,"id":130385}],"assets":[{"project_id":7125,"creator":null,"cloudinary_id":"adstnxy7p5zvsnmvqiy7","deleted":false,"id":67345,"created_at":"2025-04-03T19:24:43.685768Z","name":"Susser","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"dswt8qdi69crev4bm4dq","deleted":false,"id":67337,"created_at":"2025-04-03T19:20:43.110774Z","name":"Steve","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"cecxkrk4k6idrl1bppeo","deleted":false,"id":67319,"created_at":"2025-04-03T19:14:31.757082Z","name":"Breadmaster","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"yr84u4khmfg7bljc0shp","deleted":false,"id":67316,"created_at":"2025-04-03T19:13:02.600798Z","name":"slimer","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"scxj8dw0affmldbiornv","deleted":false,"id":67314,"created_at":"2025-04-03T19:11:38.979952Z","name":"Cool","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"m5qo44cicqvpyc3sywca","deleted":false,"id":67302,"created_at":"2025-04-03T19:08:18.442738Z","name":"What","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"hdwo5ta4o3nwfi3zd7yg","deleted":false,"id":67291,"created_at":"2025-04-03T19:03:41.338796Z","name":"Turtle","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"bpgjlzkqrplw9pwzxqjk","deleted":false,"id":67282,"created_at":"2025-04-03T19:00:24.488263Z","name":"Rick","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"i6hhvi0bnmqzomwrdgjo","deleted":false,"id":67259,"created_at":"2025-04-03T18:56:46.834985Z","name":"Clown","resource_type":"image","tags":null},{"project_id":7125,"creator":null,"cloudinary_id":"nbao1fklqozzjt3tfozb","deleted":false,"id":67256,"created_at":"2025-04-03T18:56:12.856386Z","name":"coverImg1","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}