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":{"username":"xamseygo","id":192,"password_hash":null,"updated_at":"2024-08-21T18:42:26.417918Z","reset_token_expiry":null,"subscription_status":null,"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},"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":[{"deleted":0,"code_id":229220,"input_tokens":null,"id":130189,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:13:28.472715Z","output_tokens":null},{"deleted":0,"code_id":229220,"input_tokens":null,"id":130200,"project_id":7125,"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('')\");\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```","created_at":"2025-04-03T19:14:33.039911Z","output_tokens":null},{"deleted":0,"code_id":229239,"input_tokens":null,"id":130209,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:14:54.099848Z","output_tokens":null},{"deleted":0,"code_id":229239,"input_tokens":null,"id":130222,"project_id":7125,"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('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```","created_at":"2025-04-03T19:16:16.251776Z","output_tokens":null},{"deleted":0,"code_id":229261,"input_tokens":null,"id":130231,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:16:44.586859Z","output_tokens":null},{"deleted":0,"code_id":229279,"input_tokens":null,"id":130250,"project_id":7125,"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('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```","created_at":"2025-04-03T19:18:32.200332Z","output_tokens":null},{"deleted":0,"code_id":229289,"input_tokens":null,"id":130257,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:18:56.694433Z","output_tokens":null},{"deleted":0,"code_id":229289,"input_tokens":null,"id":130272,"project_id":7125,"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('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```","created_at":"2025-04-03T19:20:44.243447Z","output_tokens":null},{"deleted":0,"code_id":229304,"input_tokens":null,"id":130282,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:21:27.597628Z","output_tokens":null},{"deleted":0,"code_id":229304,"input_tokens":null,"id":130323,"project_id":7125,"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('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```","created_at":"2025-04-03T19:24:45.588783Z","output_tokens":null},{"deleted":0,"code_id":229351,"input_tokens":null,"id":130332,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:25:28.632076Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130341,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:26:29.764424Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130345,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:27:20.797515Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130356,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:28:32.075483Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130372,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:30:18.518556Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130376,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:30:46.378838Z","output_tokens":null},{"deleted":0,"code_id":229366,"input_tokens":null,"id":130385,"project_id":7125,"sender":"client_script","message":"","created_at":"2025-04-03T19:32:13.809191Z","output_tokens":null}],"assets":[{"cloudinary_id":"adstnxy7p5zvsnmvqiy7","project_id":7125,"created_at":"2025-04-03T19:24:43.685768Z","deleted":false,"name":"Susser","resource_type":"image","id":67345},{"cloudinary_id":"dswt8qdi69crev4bm4dq","project_id":7125,"created_at":"2025-04-03T19:20:43.110774Z","deleted":false,"name":"Steve","resource_type":"image","id":67337},{"cloudinary_id":"cecxkrk4k6idrl1bppeo","project_id":7125,"created_at":"2025-04-03T19:14:31.757082Z","deleted":false,"name":"Breadmaster","resource_type":"image","id":67319},{"cloudinary_id":"yr84u4khmfg7bljc0shp","project_id":7125,"created_at":"2025-04-03T19:13:02.600798Z","deleted":false,"name":"slimer","resource_type":"image","id":67316},{"cloudinary_id":"scxj8dw0affmldbiornv","project_id":7125,"created_at":"2025-04-03T19:11:38.979952Z","deleted":false,"name":"Cool","resource_type":"image","id":67314},{"cloudinary_id":"m5qo44cicqvpyc3sywca","project_id":7125,"created_at":"2025-04-03T19:08:18.442738Z","deleted":false,"name":"What","resource_type":"image","id":67302},{"cloudinary_id":"hdwo5ta4o3nwfi3zd7yg","project_id":7125,"created_at":"2025-04-03T19:03:41.338796Z","deleted":false,"name":"Turtle","resource_type":"image","id":67291},{"cloudinary_id":"bpgjlzkqrplw9pwzxqjk","project_id":7125,"created_at":"2025-04-03T19:00:24.488263Z","deleted":false,"name":"Rick","resource_type":"image","id":67282},{"cloudinary_id":"i6hhvi0bnmqzomwrdgjo","project_id":7125,"created_at":"2025-04-03T18:56:46.834985Z","deleted":false,"name":"Clown","resource_type":"image","id":67259},{"cloudinary_id":"nbao1fklqozzjt3tfozb","project_id":7125,"created_at":"2025-04-03T18:56:12.856386Z","deleted":false,"name":"coverImg1","resource_type":"image","id":67256}],"messages_sent":0,"comments":[],"steps":[]}