PoseNet example using ml5js

{"name":"ml5.js pose skeleton","description":"Demo of ml5js posenet use. Fork this project and turn it into something cool, like a game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/wbannoyfyllzcs1rw7sf","view_count":34,"fork_count":16,"expires_at":null,"created_at":"2025-04-03T14:53:13.292486Z","updated_at":"2025-04-03T14:53:13.292488Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":5525,"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 webcam to detect human poses with a tool called ml5.js PoseNet.\n\nPoseNet is a fun and easy tool that can recognize where your body parts are,\nlike your nose, eyes, arms, and legs, when you stand in front of your camera. \n\nIt draws colorful dots on your body parts and lines between them,\njust like a stick figure\n*/\n\nlet video;\nlet poseNet;\nlet poses = [];\n\nfunction setup() {\n createCanvas(640, 480);\n video = createCapture(VIDEO);\n video.size(width, height);\n\n // Create a new poseNet method with a single detection\n poseNet = ml5.poseNet(video, modelReady);\n // This sets up an event that fills the global variable \"poses\"\n // with an array every time new poses are detected\n poseNet.on('pose', function (results) {\n poses = results;\n });\n // Hide the video element, and just show the canvas\n video.hide();\n}\n\nfunction modelReady() {\n select('#status').html('Model Loaded');\n}\n\nfunction draw() {\n image(video, 0, 0, width, height);\n\n // We can call both functions to draw all keypoints and the skeletons\n drawKeypoints(); // draws dots on key points like nose, ears, etc\n drawSkeleton(); // draws lines connecting key points\n}\n\n// A function to draw ellipses over the detected keypoints\nfunction drawKeypoints() {\n // Loop through all the poses detected\n for (let i = 0; i < poses.length; i++) {\n // For each pose detected, loop through all the keypoints\n let pose = poses[i].pose;\n for (let j = 0; j < pose.keypoints.length; j++) {\n // A keypoint is an object describing a body part (like rightArm or leftShoulder)\n let keypoint = pose.keypoints[j];\n // Only draw an ellipse is the pose probability is bigger than 0.2\n if (keypoint.score > 0.2) {\n fill(255, 0, 0);\n noStroke();\n ellipse(keypoint.position.x, keypoint.position.y, 10, 10);\n }\n }\n }\n}\n\n// A function to draw the skeletons\nfunction drawSkeleton() {\n // Loop through all the skeletons detected\n for (let i = 0; i < poses.length; i++) {\n let skeleton = poses[i].skeleton;\n // For every skeleton, loop through all body connections\n for (let j = 0; j < skeleton.length; j++) {\n let partA = skeleton[j][0];\n let partB = skeleton[j][1];\n stroke(255, 0, 0);\n line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);\n }\n }\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 PoseNet example using ml5js\n\n \n \n \n \n\n\n\n

Loading model...

\n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"wbannoyfyllzcs1rw7sf","name":"cover_pose","deleted":false,"id":57925,"created_at":"2025-01-18T00:06:36.251147Z","project_id":5525,"resource_type":"image"},{"cloudinary_id":"mzjdeskh9tg6hafhsm2y","name":"cover","deleted":false,"id":57923,"created_at":"2025-01-18T00:02:52.653994Z","project_id":5525,"resource_type":"image"}],"messages_sent":12,"comments":[],"steps":[]}