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":1,"fork_count":1,"expires_at":null,"created_at":"2025-04-03T19:30:00.395717Z","updated_at":"2025-04-03T19:30:00.395722Z","user_id":70,"status":"PRIVATE","parent_id":7092,"id":7139,"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":"let video;\n\nlet poseNet;\n\nlet poses = [];\n\nlet noseImage;\n\nlet boomImage;\n\nlet fallingImages = [];\n\nlet spawnRate = 30;\n\nlet frameCount = 0;\n\nlet gameOver = false;\n\nlet currentNoseImage;\n\nfunction preload() {\n noseImage = loadImage(\"@asset('nnnNRRRROOooMMmmm')\");\n boomImage = loadImage(\"@asset('bbBOOOOOOOOOOMMMMMM')\"); // Load boom image\n currentNoseImage = noseImage; // Set initial nose image\n}\n\nfunction setup() {\n createCanvas(640, 480);\n video = createCapture(VIDEO);\n video.size(width, height);\n poseNet = ml5.poseNet(video, modelReady);\n poseNet.on('pose', function (results) {\n poses = results; // Update the poses array\n });\n video.hide();\n}\n\nfunction draw() {\n image(video, 0, 0, width, height); // Draw the video feed\n\n if (!gameOver) {\n drawKeypoints(); // Draw keypoints\n drawSkeleton(); // Draw skeleton\n drawNoseImage(); // Draw the nose image\n\n // Spawn new falling images\n if (frameCount % spawnRate === 0) {\n fallingImages.push(new FallingImage()); // Add a new falling image\n }\n\n // Update and display falling images\n for (let i = fallingImages.length - 1; i >= 0; i--) {\n fallingImages[i].update(); // Update position\n fallingImages[i].display(); // Draw image\n\n // Check for collision with the nose image\n if (checkCollision(fallingImages[i])) {\n currentNoseImage = boomImage; // Change nose image to boom\n gameOver = true; // Set game over state\n }\n\n // Remove images that are off the screen\n if (fallingImages[i].isOffScreen()) {\n fallingImages.splice(i, 1);\n }\n }\n\n frameCount++; // Increment frame count\n } else {\n displayGameOver(); // Display game over message\n }\n}\n\nclass FallingImage {\n constructor() {\n this.x = random(width); // Random x position\n this.y = 0; // Start from the top\n this.speed = height / 120; // Speed for falling (2 seconds to fall off screen)\n this.image = loadImage(\"@asset('kkkkKKKKKREEEEEEeeee')\"); // Load the image\n this.size = 30; // Set the size for the falling images\n }\n\n update() {\n this.y += this.speed; // Move the image down\n }\n\n display() {\n image(this.image, this.x, this.y, this.size, this.size); // Draw the image\n }\n\n isOffScreen() {\n return this.y > height; // Check if the image has fallen off the screen\n }\n}\n\nfunction drawKeypoints() {\n for (let i = 0; i < poses.length; i++) {\n let pose = poses[i].pose;\n for (let j = 0; j < pose.keypoints.length; j++) {\n let keypoint = pose.keypoints[j];\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\nfunction drawSkeleton() {\n for (let i = 0; i < poses.length; i++) {\n let skeleton = poses[i].skeleton;\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}\n\nfunction checkCollision(fallingImage) {\n if (poses.length > 0) {\n const nose = poses[0].pose.keypoints.find(point => point.part === 'nose');\n if (nose && nose.score > 0.2) {\n const d = dist(nose.position.x, nose.position.y, fallingImage.x, fallingImage.y);\n const collisionDistance = (noseImage.width / 2) + (fallingImage.size / 2); // Collision radius\n return d < collisionDistance; // Return true if they collide\n }\n }\n return false; // No collision if no nose detected\n}\n\nfunction displayGameOver() {\n fill(255, 0, 0); // Red color for the game over message\n textSize(32);\n textAlign(CENTER);\n text('Game Over!', width / 2, height / 2); // Display message in the center\n}\n\nfunction modelReady() {\n select('#status').html('Model Loaded'); // Indicate if the model is ready\n}\n\nfunction drawNoseImage() {\n if (poses.length > 0) {\n const nose = poses[0].pose.keypoints.find(point => point.part === 'nose');\n if (nose && nose.score > 0.2) {\n // Draw the current nose image centered at the nose position\n image(currentNoseImage, nose.position.x - currentNoseImage.width / 2, nose.position.y - currentNoseImage.height / 2);\n }\n }\n}\n\n","style.css":"html,\nbody {\n margin: 0;\n padding: 0;\n background-color: #f0f0f0; /* Light gray background */\n}\n\ncanvas {\n display: block;\n}\n\n* {\n font-family: sans-serif;\n}\n\n#status {\n font-size: 24px;\n text-align: center;\n margin-top: 20px;\n}\n\n.game-over {\n color: red; /* Red color for game over text */\n font-size: 32px;\n text-align: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%); /* Center the game over text */\n}\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":[{"project_id":7139,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:30:06.357507Z","output_tokens":null,"code_id":229384,"input_tokens":null,"id":130369},{"project_id":7139,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:30:19.625412Z","output_tokens":null,"code_id":229384,"input_tokens":null,"id":130373},{"project_id":7139,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:30:25.231603Z","output_tokens":null,"code_id":229384,"input_tokens":null,"id":130374},{"project_id":7139,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:30:36.111243Z","output_tokens":null,"code_id":229391,"input_tokens":null,"id":130375},{"project_id":7139,"sender":"client_script","message":"","deleted":0,"created_at":"2025-04-03T19:31:07.909288Z","output_tokens":null,"code_id":229391,"input_tokens":null,"id":130381}],"assets":[{"cloudinary_id":"wbannoyfyllzcs1rw7sf","name":"cover_pose","deleted":false,"id":67385,"created_at":"2025-04-03T19:30:00.554607Z","project_id":7139,"resource_type":"image"},{"cloudinary_id":"mzjdeskh9tg6hafhsm2y","name":"cover","deleted":false,"id":67384,"created_at":"2025-04-03T19:30:00.528081Z","project_id":7139,"resource_type":"image"},{"cloudinary_id":"lt7s2rm39lrkwzbbcbwg","name":"nnnNRRRROOooMMmmm","deleted":false,"id":67383,"created_at":"2025-04-03T19:30:00.501893Z","project_id":7139,"resource_type":"image"},{"cloudinary_id":"zobteqc1mqliikazjhte","name":"kkkkKKKKKREEEEEEeeee","deleted":false,"id":67382,"created_at":"2025-04-03T19:30:00.487393Z","project_id":7139,"resource_type":"image"},{"cloudinary_id":"erqt9xbkn7bjpkqkqukh","name":"bbBOOOOOOOOOOMMMMMM","deleted":false,"id":67381,"created_at":"2025-04-03T19:30:00.463182Z","project_id":7139,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}