PoseNet example using p5.js

{"name":"ml5.js Nose Dodge Game!","description":"Use your face to play this game! Move your head around to help the green circle dodge falling obstacles.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/mzjdeskh9tg6hafhsm2y","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-02-11T11:31:05.867814Z","updated_at":"2025-02-11T11:31:05.867818Z","user_id":5,"status":"PRIVATE","parent_id":5526,"id":5789,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let video;\n\nlet poseNet;\n\nlet poses = [];\n\nlet playerX;\n\nlet playerY;\n\nconst playerSize = 30;\n\n// Size of the player\nlet obstacles = [];\n\n// Array to hold obstacles\nconst obstacleWidth = 20;\n\n// Width of obstacles\nconst obstacleHeight = 20;\n\nlet obstacleSpeed = 5;\n\n// Speed of obstacle falling\nlet obstacleFrequency = 60;\n\n// Frames until a new obstacle is created\nlet frameCounter = 0;\n\nlet score = 0;\n\nfunction setup() {\n createCanvas(640, 480);\n video = createCapture(VIDEO);\n video.size(width, height);\n\n poseNet = ml5.poseNet(video, modelReady);\n poseNet.on('pose', function (results) {\n poses = results;\n });\n video.hide();\n}\n\nfunction draw() {\n // Flip the canvas horizontally\n translate(width, 0);\n scale(-1, 1);\n\n image(video, 0, 0, width, height);\n updatePlayerPosition();\n drawPlayer();\n updateObstacles(); // Update and draw obstacles\n checkCollisions(); // Check for collisions\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}\n\nfunction drawKeypoints() {\n for (let i = 0; i < poses.length; i++) {\n let pose = poses[i].pose;\n // Find the nose keypoint\n let nose = pose.keypoints.find(keypoint => keypoint.part === 'nose');\n // Check if the nose keypoint has a high confidence score\n if (nose && nose.score > 0.2) {\n fill(255, 0, 0); // Set color for the nose circle\n noStroke();\n ellipse(nose.position.x, nose.position.y, 10, 10); // Draw the circle on the nose position\n }\n }\n}\n\nfunction drawNose() {\n for (let i = 0; i < poses.length; i++) {\n let pose = poses[i].pose;\n let nose = pose.keypoints.find(keypoint => keypoint.part === 'nose');\n if (nose && nose.score > 0.2) {\n fill(255, 0, 0);\n noStroke();\n ellipse(nose.position.x, nose.position.y, 10, 10);\n }\n }\n}\n\nfunction modelReady() {\n select('#status').html('Model Loaded');\n}\n\nfunction updatePlayerPosition() {\n if (poses.length > 0) {\n let pose = poses[0].pose;\n let nose = pose.keypoints.find(keypoint => keypoint.part === 'nose');\n if (nose && nose.score > 0.2) {\n playerX = nose.position.x;\n playerY = nose.position.y;\n }\n }\n}\n\nfunction drawPlayer() {\n fill(0, 255, 0); // Player color\n noStroke();\n ellipse(playerX, playerY, playerSize, playerSize); // Draw player as a circle\n}\n\nfunction drawObstacles() {\n // Add code here to draw obstacles\n}\n\nfunction createObstacle() {\n let x = random(0, width - obstacleWidth); // Random x position for the obstacle\n obstacles.push({ x: x, y: 0 }); // Add new obstacle to the array\n}\n\nfunction checkCollisions() {\n for (let i = 0; i < obstacles.length; i++) {\n if (dist(playerX, playerY, obstacles[i].x + obstacleWidth / 2, obstacles[i].y + obstacleHeight / 2) < (playerSize / 2 + obstacleWidth / 2)) {\n // Collision detected\n console.log('Game Over!'); // For now, just log to console\n noLoop(); // Stop the draw loop (game over)\n }\n }\n}\n\n\nfunction updateObstacles() {\n // Increment frame counter\n frameCounter++;\n\n // Create a new obstacle every specified number of frames\n if (frameCounter % obstacleFrequency === 0) {\n createObstacle();\n }\n\n // Move and draw each obstacle\n for (let i = obstacles.length - 1; i >= 0; i--) {\n obstacles[i].y += obstacleSpeed; // Move obstacle down\n fill(255, 0, 0); // Color of the obstacle\n noStroke();\n rect(obstacles[i].x, obstacles[i].y, obstacleWidth, obstacleHeight); // Draw obstacle\n\n // Check if obstacle goes off screen\n if (obstacles[i].y > height) {\n obstacles.splice(i, 1); // Remove the obstacle from the array\n score++; // Increase score\n document.getElementById(\"score\").innerText = `Score: ${score}`; // Update score in HTML\n }\n }\n}\n\nfunction restartGame() {\n // Reset player position\n playerX = width / 2;\n playerY = height / 2;\n\n // Clear obstacles\n obstacles = [];\n\n // Reset score\n score = 0; // Reset score\n document.getElementById(\"score\").innerText = `Score: ${score}`; // Update score in HTML\n\n // Restart the draw loop\n loop();\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 p5.js\n\n \n \n \n \n\n\n\n

Loading model...

Score: 0

\n \n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":5789,"created_at":"2025-02-11T11:31:12.717668Z","output_tokens":null,"sender":"client_script","code_id":208376,"deleted":0,"input_tokens":null,"id":108017},{"message":"","project_id":5789,"created_at":"2025-02-11T11:31:12.725359Z","output_tokens":0,"sender":"ai","code_id":208376,"deleted":0,"input_tokens":3957,"id":108018},{"message":"lets change it so that instead of using your webcam, you can upload a video","project_id":5789,"created_at":"2025-02-11T11:31:34.814435Z","output_tokens":null,"sender":"human","code_id":208377,"deleted":0,"input_tokens":null,"id":108019},{"message":"

\n# Reasoning\nThe user wants to modify their project to allow uploading a video instead of using a webcam. This is a reasonable request and can be accomplished by letting the user select a video file from their device and then playing it in the canvas.\n

\n\n

\n# Answer: \n

\n\nWe can definitely modify the project to allow for video uploads instead of using the webcam. \n\nWould you like the video upload to happen at the start of the game, or should it be possible to change the video during gameplay?","project_id":5789,"created_at":"2025-02-11T11:31:34.821731Z","output_tokens":140,"sender":"ai","code_id":208377,"deleted":0,"input_tokens":3968,"id":108020}],"assets":[{"project_id":5789,"creator":null,"cloudinary_id":"mzjdeskh9tg6hafhsm2y","deleted":false,"id":59314,"created_at":"2025-02-11T11:31:05.876792Z","name":"cover","resource_type":"image","tags":null}],"messages_sent":1,"comments":[],"steps":[]}