Wandering Emoji Adventure

{"name":"AI Webcam controlled driving WIP","description":"Train an AI model with Teachable Machine to 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/wnwp5v0kdohxhbv8a05b","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-05-08T17:20:29.840981Z","updated_at":"2025-05-08T17:20:29.840983Z","user_id":70,"status":"PRIVATE","parent_id":6680,"id":7879,"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":200},"code":{"player.js":"class Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 5; // Increase speed for racing effect\n this.width = 50; // Adjust size for emoji\n this.height = 50; // Adjust size for emoji\n }\n\n update() {\n if (highestPrediction) {\n switch (highestPrediction.className) {\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 // Boundary checks to prevent leaving the screen\n if (this.x < this.width / 2) {\n this.x = this.width / 2;\n } else if (this.x > width - this.width / 2) {\n this.x = width - this.width / 2;\n }\n }\n\n display() {\n textSize(32);\n textAlign(CENTER, CENTER);\n text('🚗', this.x, this.y); // Use car emoji\n }\n}\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 background(100, 150, 255); // Sky color\n drawTrack(); // Draw the track\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\nfunction drawTrack() {\n let horizon = height / 2;\n let roadWidth = 200;\n let perspectiveHeight = 300;\n\n // Draw the road\n fill(50);\n beginShape();\n vertex(width / 2 - roadWidth / 2, horizon);\n vertex(width / 2 + roadWidth / 2, horizon);\n vertex(width / 2 + roadWidth, height);\n vertex(width / 2 - roadWidth, height);\n endShape(CLOSE);\n\n // Draw lane lines\n stroke(255);\n strokeWeight(2);\n for (let i = 0; i < perspectiveHeight; i += 40) {\n let lineY = map(i, 0, perspectiveHeight, horizon, height);\n line(width / 2, lineY, width / 2, lineY + 20);\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":[{"sender":"client_script","deleted":0,"code_id":241215,"input_tokens":null,"id":141116,"message":"Let's get started!\n Errors:\n","project_id":7879,"created_at":"2025-05-07T23:46:06.259542Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":241215,"input_tokens":4208,"id":141117,"message":"Great! Could you tell me a bit more about your project? What kind of project are you building, and what features or ideas do you have in mind for it?","project_id":7879,"created_at":"2025-05-07T23:46:06.751202Z","output_tokens":37},{"sender":"human","deleted":0,"code_id":241215,"input_tokens":null,"id":141118,"message":"instead of this 2D pizza thing, I want to make a 2d-fake-3d racing game, mario kart style camera, where we just take left and right input and always are going forward. I'll switch out my ai model url for one that does Left Right and Nothing","project_id":7879,"created_at":"2025-05-07T23:47:31.418383Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":241215,"input_tokens":4264,"id":141119,"message":"That sounds like a fun project! We can definitely work on transforming your current setup into a racing game with a 2D-fake-3D perspective. Let's start by adjusting the player mechanics to always move forward and respond to left and right inputs.\n\nBefore we dive into the code, could you let me know what you'd like the track to look like? Would you prefer a simple checkered pattern or something else? And how would you like the player (or the car) to be represented?","project_id":7879,"created_at":"2025-05-07T23:47:31.709892Z","output_tokens":117},{"sender":"human","deleted":0,"code_id":241215,"input_tokens":null,"id":141205,"message":"we can just draw the track with lines and colors, and we can use an emoji for the car for now. Just keep in mind we want the mario kart style perspective, so as if we are on the road looking down it in the distance towards the horizon. ","project_id":7879,"created_at":"2025-05-08T17:16:47.179572Z","output_tokens":null},{"sender":"ai","deleted":0,"code_id":241215,"input_tokens":4258,"id":141206,"message":"Got it! Let's start transforming your project into a racing game with a Mario Kart-style perspective. We'll use lines to represent the track and an emoji to represent the car.\n\nHere's what we'll do:\n1. Modify the player class to reflect the new input system, moving left and right.\n2. Create a function to draw the track with a perspective view.\n3. Update the display function to use an emoji for the car.\n\nLet's update the code step by step.\n\nFirst, let's modify the `Player` class to handle left and right movement and remove the up and down movement.\n\n```javascript\n// player.js\nclass Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 5; // Increase speed for racing effect\n this.width = 50; // Adjust size for emoji\n this.height = 50; // Adjust size for emoji\n }\n\n update() {\n if (highestPrediction) {\n switch (highestPrediction.className) {\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 // Boundary checks to prevent leaving the screen\n if (this.x < this.width / 2) {\n this.x = this.width / 2;\n } else if (this.x > width - this.width / 2) {\n this.x = width - this.width / 2;\n }\n }\n\n display() {\n textSize(32);\n textAlign(CENTER, CENTER);\n text('🚗', this.x, this.y); // Use car emoji\n }\n}\n```\n\nNext, let's create a function to draw the track with a perspective effect.\n\n```javascript\n// script.js\nfunction drawTrack() {\n let horizon = height / 2;\n let roadWidth = 200;\n let perspectiveHeight = 300;\n\n // Draw the road\n fill(50);\n beginShape();\n vertex(width / 2 - roadWidth / 2, horizon);\n vertex(width / 2 + roadWidth / 2, horizon);\n vertex(width / 2 + roadWidth, height);\n vertex(width / 2 - roadWidth, height);\n endShape(CLOSE);\n\n // Draw lane lines\n stroke(255);\n strokeWeight(2);\n for (let i = 0; i < perspectiveHeight; i += 40) {\n let lineY = map(i, 0, perspectiveHeight, horizon, height);\n line(width / 2, lineY, width / 2, lineY + 20);\n }\n}\n```\n\nFinally, update the `draw` function to use the new track drawing.\n\n```javascript\n// script.js\nfunction draw() {\n background(100, 150, 255); // Sky color\n drawTrack(); // Draw the track\n player.update();\n player.display();\n}\n```\n\n### Explanation\n- **Player Class**: Modified to handle left and right movement only, using an emoji for the car.\n- **drawTrack Function**: Draws a simple road with perspective using lines, with lane markings for added effect.\n- **Draw Function**: Updates the background and calls the new track drawing function.\n\nPlease replace the existing code with these updates and let me know how it works!","project_id":7879,"created_at":"2025-05-08T17:16:47.676810Z","output_tokens":753},{"sender":"client_script","deleted":0,"code_id":241363,"input_tokens":null,"id":141207,"message":"","project_id":7879,"created_at":"2025-05-08T17:18:44.567093Z","output_tokens":null},{"sender":"server_script","deleted":0,"code_id":241367,"input_tokens":null,"id":141208,"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n jippityPizza = loadImage(\"@asset('jippityPizza')\"); // Load the image\n\tcover_kart = loadImage(\"@asset('cover_kart')\");\n}\n```","project_id":7879,"created_at":"2025-05-08T17:20:21.848684Z","output_tokens":null}],"assets":[{"name":"cover_kart","created_at":"2025-05-08T17:20:21.165579Z","resource_type":"image","tags":null,"project_id":7879,"creator":null,"cloudinary_id":"wnwp5v0kdohxhbv8a05b","deleted":false,"id":73587},{"name":"jippityPizza","created_at":"2025-05-07T23:46:03.830212Z","resource_type":"image","tags":null,"project_id":7879,"creator":null,"cloudinary_id":"rqialud1vamxh3gm5yup","deleted":false,"id":73582},{"name":"coverimg","created_at":"2025-05-07T23:46:03.828932Z","resource_type":"image","tags":null,"project_id":7879,"creator":null,"cloudinary_id":"plmfkjefga6vxc3k6rim","deleted":false,"id":73581},{"name":"coverImgZoomed","created_at":"2025-05-07T23:46:03.827494Z","resource_type":"image","tags":null,"project_id":7879,"creator":null,"cloudinary_id":"rpf07vvs9lh25mklolto","deleted":false,"id":73580}],"messages_sent":2,"comments":[],"steps":[]}