Wandering Emoji Adventure

{"name":"AI Webcam controlled player [Template]","description":"Train an AI model with Teachable Machine to detect Up, Down, Left, Right, and Nothing gestures via your webcam. Use that model to control a player in this game world. Take this project and make it a full-on game with webcam controls!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/rpf07vvs9lh25mklolto","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-03-27T19:16:13.959579Z","updated_at":"2025-03-27T19:16:13.959581Z","user_id":192,"status":"PRIVATE","parent_id":6680,"id":6714,"user":{"username":"xamseygo","id":192,"password_hash":null,"updated_at":"2024-08-21T18:42:26.417918Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"cfb1457c-ce90-4d98-a6ed-7abb46cfc301","created_at":"2024-08-21T18:42:26.417915Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"player.js":"class Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 2;\n }\n\n update() {\n if (highestPrediction) { // Check if highestPrediction is available\n switch (highestPrediction.className) {\n case \"Up\":\n this.y -= this.speed; // Move up\n break;\n case \"Down\":\n this.y += this.speed; // Move down\n break;\n case \"Left\":\n this.x -= this.speed; // Move left\n break;\n case \"Right\":\n this.x += this.speed; // Move right\n break;\n case \"Nothing\":\n // Do nothing\n break;\n }\n }\n }\n\n display() {\n imageMode(CENTER); // Center the image at the (x, y) position\n const size = 100; // Set the desired size for the image\n image(jippityPizza, this.x, this.y, size, size); // Display the scaled image at the player's position\n }\n}","script.js":"// Replace this with your Up/Down/Left/Right/Nothing Teachable Machine model!\nconst URL = \"https://teachablemachine.withgoogle.com/models/8wFqzm9N9/\";\n\nlet player;\n\nlet jippityPizza;\n\nasync function preload() {\n jippityPizza = loadImage(\"@asset('jippityPizza')\"); // Load the image\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n player = new Player(width / 2, height / 2); // Initialize player in the center\n init(); // Initialize the webcam and model\n}\n\nfunction draw() {\n drawCheckeredBackground(); // Call the function to draw the checkered background\n player.update();\n player.display();\n}\n\nfunction drawCheckeredBackground() {\n const tileSize = 50; // Size of each tile\n for (let y = 0; y < height; y += tileSize) {\n for (let x = 0; x < width; x += tileSize) {\n fill((x / tileSize + y / tileSize) % 2 === 0 ? 255 : 204, (x / tileSize + y / tileSize) % 2 === 0 ? 204 : 204, 204); // Alternate colors\n rect(x, y, tileSize, tileSize); // Draw each tile\n }\n }\n}\n","style.css":"body { margin: 0; } canvas { display: block; }","webcam.js":"let model, webcam, labelContainer, maxPredictions;\n\nlet highestPrediction;\n\nasync function webcamLoop() {\n webcam.update(); // Update the webcam frame\n await predict(); // Get predictions\n window.requestAnimationFrame(webcamLoop); // Loop\n}\n\nasync function predict() {\n const prediction = await model.predict(webcam.canvas);\n highestPrediction = prediction[0]; // Assign to global variable\n for (let i = 1; i < maxPredictions; i++) {\n if (prediction[i].probability > highestPrediction.probability) {\n highestPrediction = prediction[i];\n }\n }\n\n // Display the prediction text\n document.getElementById(\"prediction-container\").innerHTML =\n `Prediction: ${highestPrediction.className} (${(highestPrediction.probability * 100).toFixed(2)}%)`;\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Create a loading text container\n const loadingContainer = document.createElement('div');\n loadingContainer.id = 'loading-container';\n loadingContainer.style.position = 'absolute'; // Positioning the container\n loadingContainer.style.top = '0'; // Align to the top\n loadingContainer.style.left = '0'; // Align to the left\n loadingContainer.style.color = 'white'; // Text color\n loadingContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Background for readability\n loadingContainer.style.padding = '10px'; // Padding for the text\n loadingContainer.innerHTML = 'Loading AI model...'; // Loading text\n document.body.appendChild(loadingContainer); // Append to body\n\n model = await tmImage.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const flip = true; // whether to flip the webcam\n webcam = new tmImage.Webcam(200, 200, flip); // Set up the webcam\n await webcam.setup(); // Request access to the webcam\n webcam.play();\n\n // Remove the loading container after setup is complete\n document.body.removeChild(loadingContainer);\n\n // Append the webcam canvas to the DOM\n document.body.appendChild(webcam.canvas); // Append webcam canvas to the body\n webcam.canvas.style.position = 'absolute'; // Positioning the canvas\n webcam.canvas.style.top = '0'; // Align to the top\n webcam.canvas.style.left = '0'; // Align to the left\n\n // Create a container for the prediction text\n const predictionContainer = document.createElement('div');\n predictionContainer.id = 'prediction-container';\n predictionContainer.style.position = 'absolute'; // Positioning the container\n predictionContainer.style.top = '210px'; // Position below the webcam\n predictionContainer.style.left = '0'; // Align to the left\n predictionContainer.style.color = 'white'; // Text color\n predictionContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Background for readability\n predictionContainer.style.padding = '10px'; // Padding for the text\n document.body.appendChild(predictionContainer); // Append to body\n\n window.requestAnimationFrame(webcamLoop);\n}","index.html":"\n\n\n\n \n \n Wandering Emoji Adventure\n \n \n \n \n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"ywjuuxfygftf6cbkzz3j","project_id":6714,"created_at":"2025-03-27T19:16:13.967634Z","deleted":false,"name":"jippityPizza","resource_type":"image","id":63512},{"cloudinary_id":"plmfkjefga6vxc3k6rim","project_id":6714,"created_at":"2025-03-27T19:16:13.966207Z","deleted":false,"name":"coverimg","resource_type":"image","id":63511},{"cloudinary_id":"rpf07vvs9lh25mklolto","project_id":6714,"created_at":"2025-03-27T19:16:13.964770Z","deleted":false,"name":"coverImgZoomed","resource_type":"image","id":63510}],"messages_sent":0,"comments":[],"steps":[]}