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":35,"fork_count":6,"expires_at":null,"created_at":"2025-01-18T00:07:12.207788Z","updated_at":"2025-01-18T00:07:12.207789Z","user_id":70,"status":"PUBLIC","parent_id":5525,"id":5526,"user":{"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","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},"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":[{"code_id":203552,"deleted":0,"input_tokens":null,"id":103466,"project_id":5526,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-01-18T00:07:55.506947Z","output_tokens":null},{"code_id":203552,"deleted":0,"input_tokens":3809,"id":103467,"project_id":5526,"sender":"ai","message":"Great! It looks like you have a project that involves using PoseNet with p5.js. Could you tell me more about your idea for the project? Are you building a game, an animation, or something else? Let me know what you have in mind, and we can proceed from there!","created_at":"2025-01-18T00:07:55.515685Z","output_tokens":64},{"code_id":203553,"deleted":0,"input_tokens":null,"id":103468,"project_id":5526,"sender":"human","message":"add a restart button!","created_at":"2025-01-18T00:08:05.460215Z","output_tokens":null},{"code_id":203553,"deleted":0,"input_tokens":3809,"id":103469,"project_id":5526,"sender":"ai","message":"Adding a restart button is a great idea! This will allow users to restart the game after it's over. Let's add a button that will restart the game when clicked.\n\nHere’s how you can do it:\n\n1. Add a button to your HTML file.\n2. Implement the restart logic in your JavaScript code.\n\nI'll guide you through the changes.\n\n### Step 1: Update the HTML file\n\nAdd a button element inside the `` tag.\n\n```html\n\n\n\n\n \n PoseNet example using p5.js\n\n \n \n \n \n\n\n\n

Loading model...

\n \n \n\n\n\n```\n\n### Step 2: Update the JavaScript file\n\nAdd a function to handle the restart logic.\n\n```javascript\nfunction restartGame() {\n // Reset player position\n playerX = width / 2;\n playerY = height / 2;\n\n // Clear obstacles\n obstacles = [];\n\n // Restart the draw loop\n loop();\n}\n```\n\n### Explanation\n\n- **HTML Update**: We added a button with `id=\"restartButton\"` and an `onclick` attribute that calls the `restartGame` function when clicked.\n- **JavaScript Function**: The `restartGame` function resets the player position to the center, clears the obstacles array, and restarts the `draw` loop using `loop()`.\n\nLet me know if you need any more help!","created_at":"2025-01-18T00:08:05.466812Z","output_tokens":429},{"code_id":203554,"deleted":0,"input_tokens":null,"id":103470,"project_id":5526,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-01-18T00:13:05.991131Z","output_tokens":null},{"code_id":203554,"deleted":0,"input_tokens":3875,"id":103471,"project_id":5526,"sender":"ai","message":"Great! Since you want to add a restart button, we've already set","created_at":"2025-01-18T00:13:05.996975Z","output_tokens":16},{"code_id":203555,"deleted":0,"input_tokens":null,"id":103472,"project_id":5526,"sender":"human","message":"add a score! score 1 point for every obstacle that reaches bottom of screen","created_at":"2025-01-18T00:13:17.681787Z","output_tokens":null},{"code_id":203555,"deleted":0,"input_tokens":3886,"id":103473,"project_id":5526,"sender":"ai","message":"To add a scoring system where the player earns one point for every obstacle that reaches the bottom of the screen, we'll need to:\n\n1. Introduce a score variable to keep track of the points.\n2. Update the score whenever an obstacle reaches the bottom of the canvas.\n3. Display the score on the screen.\n\nLet's implement these changes:\n\n### Step 1: Add a Score Variable\n\nAdd a global variable in your `script.js` file to keep track of the score.\n\n```javascript\nlet score = 0; // Initialize score\n```\n\n### Step 2: Update the Score\n\nModify the `updateObstacles` function to increase the score when an obstacle exits the screen.\n\n```javascript\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 }\n }\n}\n```\n\n### Step 3: Display the Score\n\nAdd code to display the score on the screen within the `draw` function.\n\n```javascript\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 // Display the score\n drawScore();\n}\n```\n\nAdd a new function `drawScore` to handle displaying the score:\n\n```javascript\nfunction drawScore() {\n fill(255); // White color for the score text\n textSize(24);\n textAlign(LEFT, TOP);\n text(`Score: ${score}`, 10, 10); // Display the score in the top-left corner\n}\n```\n\n### Explanation\n\n- **Score Variable**: A new global variable `score` is introduced to keep track of the points.\n- **Score Update**: Every time an obstacle goes off the bottom of the canvas, the score is incremented by 1.\n- **Display Score**: The `drawScore` function displays the current score at the top-left corner of the canvas.\n\nReplace or add the above code in the respective sections of your `script.js` file. Let me know if you need more help!","created_at":"2025-01-18T00:13:17.687497Z","output_tokens":646},{"code_id":203558,"deleted":0,"input_tokens":null,"id":103474,"project_id":5526,"sender":"human","message":"put the score in html not p5","created_at":"2025-01-18T00:14:01.358644Z","output_tokens":null},{"code_id":203558,"deleted":0,"input_tokens":3954,"id":103475,"project_id":5526,"sender":"ai","message":"Sure! To display the score in HTML instead of using p5.js, we'll make the following changes:\n\n1. Remove the `drawScore` function from the p5.js `draw` loop.\n2. Update the HTML to show the score.\n3. Modify the score updating logic in JavaScript to update the HTML element directly.\n\n### Step 1: Update the HTML File\n\nAdd a new element to display the score in your HTML file. You can place it below the status paragraph.\n\n```html\n

Loading model...

Score: 0

\n\n```\n\n### Step 2: Update the JavaScript File\n\nRemove the `drawScore` function and update the score directly in the `updateObstacles` function and whenever the game starts. \n\nHere's how to update the score in JavaScript:\n\n```javascript\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\n### Explanation\n\n- **HTML Update**: A new paragraph with `id=\"score\"` is added to display the score directly in HTML.\n- **JavaScript Updates**:\n - Removed the `drawScore` function to avoid using p5.js for score display.\n - Updated the score in the HTML whenever an obstacle reaches the bottom and right after restarting the game.\n\nReplace the relevant parts in your existing files with the code provided. Let me know if you need any more help!","created_at":"2025-01-18T00:14:01.384971Z","output_tokens":610}],"assets":[{"project_id":5526,"created_at":"2025-01-18T00:04:03.802648Z","resource_type":"image","id":57924,"cloudinary_id":"mzjdeskh9tg6hafhsm2y","name":"cover","deleted":false}],"messages_sent":3,"comments":[],"steps":[]}