PoseNet Gesture Game

{"name":"PoseNet Gesture Game","description":"Dive into the world of interactive gestures with PoseNet! Use your custom pose classes like arm flex, hands up, and thumbs up to control a fun and engaging game. This project will guide you through setting up a webcam interface, predicting poses, and transforming movements into exciting game actions. Get ready to flex those muscles and thumbs up your way through this coding adventure!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-07-23T15:59:20.915588Z","updated_at":"2025-07-23T15:59:20.915589Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":9386,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let model, webcam, ctx, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function loop(timestamp) {\n webcam.update();\n await predict();\n window.requestAnimationFrame(loop);\n}\n\nasync function init() {\n const URL = \"https://teachablemachine.withgoogle.com/models/ZPqD2PkxR/\";\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const size = 200;\n const flip = true; // whether to flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup();\n await webcam.play();\n window.requestAnimationFrame(poseLoop);\n\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function poseLoop(timestamp) {\n webcam.update();\n await predict();\n window.requestAnimationFrame(poseLoop);\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n PoseNet Gesture Game\n \n \n \n\n\n \n\n"},"chat_history":[{"project_id":9386,"message":"I am using a custom posenet with the classes, arm_flex, hands_up, thumbs_up and nothing. Use this code as a reference:

Teachable Machine Pose Model

","created_at":"2025-07-23T15:59:21.304099Z","output_tokens":null,"deleted":0,"code_id":273305,"sender":"human","input_tokens":null,"id":164039},{"project_id":9386,"message":"Let's get started!\n Errors:\n","created_at":"2025-07-23T15:59:26.957545Z","output_tokens":null,"deleted":0,"code_id":273305,"sender":"client_script","input_tokens":null,"id":164040},{"project_id":9386,"message":"Great! It sounds like you have a project involving a custom PoseNet model with specific gesture classes. Could you tell me a bit more about what you want to build with this setup? Are you planning to create a game, a website, an animation, or something else? What features do you have in mind?","created_at":"2025-07-23T15:59:27.656148Z","output_tokens":73,"deleted":0,"code_id":273305,"sender":"ai","input_tokens":2665,"id":164041},{"project_id":9386,"message":"lets do the basic setup first","created_at":"2025-07-23T15:59:51.179560Z","output_tokens":null,"deleted":0,"code_id":273305,"sender":"human","input_tokens":null,"id":164044},{"project_id":9386,"message":"Got it! Let's start by setting up the basic structure for your project using the PoseNet model with your custom gesture classes. We'll need to integrate the PoseNet model into your existing HTML and JavaScript setup. \n\nHere's how we can update your current `index.html` to include PoseNet along with your custom model:\n\n```html\n\n\n\n\n \n \n PoseNet Gesture Game\n \n \n \n \n \n\n\n

Teachable Machine Pose Model

\n \n

\n \n\n\n```\n\nLet's update the `script.js` file to include the PoseNet initialization and prediction logic:\n\n```javascript\n// script.js\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nasync function init() {\n const URL = \"https://teachablemachine.withgoogle.com/models/ZPqD2PkxR/\";\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const size = 200;\n const flip = true; // whether to flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup();\n await webcam.play();\n window.requestAnimationFrame(loop);\n\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size; \n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function loop(timestamp) {\n webcam.update();\n await predict();\n window.requestAnimationFrame(loop);\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}\n```\n\n### Explanation:\n- **HTML Setup**: Added the necessary script tags for TensorFlow.js and Teachable Machine Pose. Also, added basic HTML structure for the PoseNet model.\n- **JavaScript Setup**: \n - `init()`: Initializes the PoseNet model and webcam, setting up the canvas and label container.\n - `loop()`: Continuously updates the webcam and makes predictions.\n - `predict()`: Runs the pose estimation and gets predictions from the model, updating the label container with prediction probabilities.\n - `drawPose()`: Draws the webcam image and pose key points/skeleton on the canvas.\n\nYou can replace the existing HTML and JavaScript with this setup to get started. Let me know if you need any further adjustments or if you have additional features in mind!","created_at":"2025-07-23T15:59:51.873881Z","output_tokens":961,"deleted":0,"code_id":273305,"sender":"ai","input_tokens":2666,"id":164045},{"project_id":9386,"message":"LOG: \n🌸 p5.js says: p5 had problems creating the global function \"loop\", possibly because your code is already using that name as a variable. You may want to rename your variable to something else. (http://p5js.org/reference/#/p5/loop)","created_at":"2025-07-23T16:01:55.326762Z","output_tokens":null,"deleted":0,"code_id":273312,"sender":"human","input_tokens":null,"id":164059},{"project_id":9386,"message":"It looks like there's a name conflict because both p5.js and your custom code are trying to use the function name `loop`. We can resolve this by renaming the custom `loop` function to avoid the conflict. Let's rename it to `poseLoop`.\n\nHere's how you can update your `script.js` file:\n\n```javascript\n// script.js\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function init() {\n const URL = \"https://teachablemachine.withgoogle.com/models/ZPqD2PkxR/\";\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n model = await tmPose.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const size = 200;\n const flip = true; // whether to flip the webcam\n webcam = new tmPose.Webcam(size, size, flip);\n await webcam.setup();\n await webcam.play();\n window.requestAnimationFrame(poseLoop);\n\n const canvas = document.getElementById(\"canvas\");\n canvas.width = size;\n canvas.height = size;\n ctx = canvas.getContext(\"2d\");\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function poseLoop(timestamp) {\n webcam.update();\n await predict();\n window.requestAnimationFrame(poseLoop);\n}\n\nasync function predict() {\n const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);\n const prediction = await model.predict(posenetOutput);\n\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction;\n }\n\n drawPose(pose);\n}\n\nfunction drawPose(pose) {\n if (webcam.canvas) {\n ctx.drawImage(webcam.canvas, 0, 0);\n if (pose) {\n const minPartConfidence = 0.5;\n tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);\n tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);\n }\n }\n}\n```\n\n### Explanation:\n- **Renamed `loop` to `poseLoop`**: This resolves the conflict with p5.js's built-in `loop` function.\n- **Updated `window.requestAnimationFrame(loop)` to `window.requestAnimationFrame(poseLoop)`**: Ensures the correct function is called for animation.\n\nPlease replace the existing `loop` function with `poseLoop` in your `script.js` file. This should resolve the error you're encountering. Let me know if you need further assistance!","created_at":"2025-07-23T16:01:56.037745Z","output_tokens":674,"deleted":0,"code_id":273312,"sender":"ai","input_tokens":3129,"id":164060}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}