Emoji Space Adventure

{"name":"Teachable Machine - Sound Model Demo","description":"Base project for a teachable machine audio model.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/useojsudad4dwru7bgqb","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-06-03T19:12:35.388415Z","updated_at":"2025-06-03T19:12:35.388417Z","user_id":60,"status":"PRIVATE","parent_id":8018,"id":8144,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"code":{"script.js":"const URL = \"https://teachablemachine.withgoogle.com/models/aRp1tpQ9Y/\";\n\nlet currentPrediction = \"\";\n\nlet currentConfidence = 0;\n\nlet coinPositions = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n\n // Start spawning coins\n setInterval(spawnCoin, 1000); // Spawn a coin every second\n}\n\nfunction draw() {\n background(135, 206, 235); // Sky blue background\n\n //console.log(currentPrediction);\n displayPrediction(); // Call the function to display the prediction\n drawCoins(); // Draw the coins\n drawMovingCircle(); // Draw the moving circle\n}\n\nasync function createModel() {\n const checkpointURL = URL + \"model.json\"; // model topology\n const metadataURL = URL + \"metadata.json\"; // model metadata\n\n const recognizer = speechCommands.create(\n \"BROWSER_FFT\", // Fourier transform type, not useful to change\n undefined, // Speech commands vocabulary feature, not useful for your models\n checkpointURL,\n metadataURL);\n\n // Check that model and metadata are loaded via HTTPS requests.\n await recognizer.ensureModelLoaded();\n\n return recognizer;\n}\n\ninit();\n\nasync function init() {\n const recognizer = await createModel();\n const classLabels = recognizer.wordLabels(); // Get class labels\n\n recognizer.listen(result => {\n const scores = result.scores; // Probability of prediction for each class\n const maxScoreIndex = scores.indexOf(Math.max(...scores));\n currentPrediction = classLabels[maxScoreIndex];\n currentConfidence = scores[maxScoreIndex];\n }, {\n includeSpectrogram: true,\n probabilityThreshold: 0.5, // Lowered from 0.75 to 0.5 for testing\n invokeCallbackOnNoiseAndUnknown: true,\n overlapFactor: 0.75 // Increased to make predictions more frequently\n });\n}\n\nfunction displayPrediction() {\n fill(0); // Set text color to black\n textSize(32); // Set text size\n textAlign(CENTER, CENTER); // Center the text\n text(currentPrediction, width / 2, height / 4); // Draw the prediction higher on the canvas\n}\n\nfunction drawCoins() {\n fill(255, 223, 0); // Gold color for coins\n for (let i = coinPositions.length - 1; i >= 0; i--) {\n let coin = coinPositions[i];\n\n // Move coin towards the center of the canvas\n let targetX = width / 2;\n let targetY = height / 2;\n\n // Calculate direction vector towards the center\n let dx = targetX - coin.x;\n let dy = targetY - coin.y;\n let distance = dist(coin.x, coin.y, targetX, targetY);\n\n // Normalize the direction vector\n if (distance > 0) {\n coin.x += (dx / distance) * 2; // Move towards center\n coin.y += (dy / distance) * 2; // Move towards center\n }\n\n // Log the current prediction and positions for debugging\n //console.log(`Current Prediction: ${currentPrediction}, Coin Position: (${coin.x}, ${coin.y})`);\n\n // Check if the current prediction is \"catch coin\" and the coin is within the circle\n let distanceToCircle = dist(coin.x, coin.y, width / 2, height / 2);\n if (currentPrediction.toLowerCase() === \"catch coin\" && distanceToCircle < 15) { // Using radius of the circle\n coinPositions.splice(i, 1); // Remove the coin from the array\n console.log(\"Coin caught!\"); // Log when a coin is caught\n continue; // Skip drawing the coin\n }\n\n // Draw the coin\n ellipse(coin.x, coin.y, 20, 20); // Draw the coin\n\n // If the coin moves off the left side of the screen, remove it\n if (coin.x < -20 || coin.x > width + 20 || coin.y < -20 || coin.y > height + 20) {\n coinPositions.splice(i, 1); // Remove the coin from the array\n }\n }\n}\n\nfunction drawMovingCircle() {\n noFill(); // Make sure the circle is not filled\n stroke(255, 0, 0); // Red color for the circle outline\n ellipse(width / 2, height / 2, 30, 30); // Draw the circle at the center of the canvas\n}\n\nfunction spawnCoin() {\n let newCoinX, newCoinY;\n\n // Randomly choose an edge to spawn the coin\n const edge = floor(random(4)); // Random number between 0 and 3\n\n switch (edge) {\n case 0: // Top edge\n newCoinX = random(width); // Random X position along the top\n newCoinY = 0; // Y position at the top\n break;\n case 1: // Bottom edge\n newCoinX = random(width); // Random X position along the bottom\n newCoinY = height; // Y position at the bottom\n break;\n case 2: // Left edge\n newCoinX = 0; // X position at the left\n newCoinY = random(height); // Random Y position along the left\n break;\n case 3: // Right edge\n newCoinX = width; // X position at the right\n newCoinY = random(height); // Random Y position along the right\n break;\n }\n\n coinPositions.push({ x: newCoinX, y: newCoinY }); // Add new coin to the array\n console.log(\"coin spawned\");\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Emoji Space Adventure\n \n \n \n \n \n\n\n\n

\n \n\n\n"},"chat_history":[{"code_id":247837,"deleted":0,"input_tokens":null,"id":146155,"project_id":8144,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-06-03T19:13:14.393076Z","output_tokens":null},{"code_id":247837,"deleted":0,"input_tokens":3907,"id":146156,"project_id":8144,"sender":"ai","message":"Absolutely, let's dive in! Could you share more about your project idea? What kind of project are you envisioning? Is it a game, a website, an animation, or something else? Let me know what features you'd like to include, and we can start building from there.","created_at":"2025-06-03T19:13:14.464939Z","output_tokens":64},{"code_id":247876,"deleted":0,"input_tokens":null,"id":146159,"project_id":8144,"sender":"human","message":"I am not seeing coins. they are spawngin but not moving towards teh center of the screen","created_at":"2025-06-03T19:14:41.520337Z","output_tokens":null},{"code_id":247876,"deleted":0,"input_tokens":3933,"id":146160,"project_id":8144,"sender":"ai","message":"It sounds like there might be an issue with how the coins are being moved towards the center of the screen. Let's take a closer look at the `drawCoins` function to ensure everything is working as expected.\n\nCould you please confirm if the coins are being drawn on the screen at all, or if they are not appearing at all? Also, are there any errors in the console when you run the code? This will help us narrow down the issue.","created_at":"2025-06-03T19:14:41.593253Z","output_tokens":106},{"code_id":247876,"deleted":0,"input_tokens":null,"id":146161,"project_id":8144,"sender":"human","message":"I see they are logging being spawned but they neer move on screern","created_at":"2025-06-03T19:15:13.468269Z","output_tokens":null},{"code_id":247876,"deleted":0,"input_tokens":3926,"id":146162,"project_id":8144,"sender":"ai","message":"Thank you for the clarification. Let's address the issue with the coins not moving. Based on the code, it seems like the logic for moving the coins is present. However, there might be an issue with how they are being drawn or updated on the canvas.\n\nLet's make sure that the coins are being updated and drawn correctly. Could you confirm if the coins are appearing at all on the screen, or if they're just not moving? This will help us zero in on the exact problem.","created_at":"2025-06-03T19:15:13.545849Z","output_tokens":116},{"code_id":247876,"deleted":0,"input_tokens":null,"id":146163,"project_id":8144,"sender":"human","message":"they spawn offscreen so I never see them","created_at":"2025-06-03T19:15:54.190246Z","output_tokens":null},{"code_id":247876,"deleted":0,"input_tokens":3920,"id":146164,"project_id":8144,"sender":"ai","message":"Got it! Since the coins are spawning offscreen, we need to adjust their spawning logic to ensure they start within the visible area of the canvas. Let's modify the `spawnCoin` function to ensure that coins are created within the screen boundaries.\n\nHere's the updated `spawnCoin` function:\n\n```javascript \n// script.js\nfunction spawnCoin() {\n // Generate a random starting position within the screen boundaries\n let newCoinX = random(width); // X position within the width of the canvas\n let newCoinY = random(height); // Y position within the height of the canvas\n coinPositions.push({ x: newCoinX, y: newCoinY }); // Add new coin to the array\n console.log(\"coin spawned\");\n}\n```\n\n### Changes:\n- **Spawn Position**: The `newCoinX` and `newCoinY` values are now generated within the width and height of the canvas, respectively. This ensures they are visible on the screen when spawned.\n\nPlease replace the existing `spawnCoin` function in your `script.js` file with this updated code and run your project again. Let me know if you can see the coins now!","created_at":"2025-06-03T19:15:54.260337Z","output_tokens":267},{"code_id":247878,"deleted":0,"input_tokens":null,"id":146166,"project_id":8144,"sender":"human","message":"spawn coins outside the edge of the screen","created_at":"2025-06-03T19:17:14.261378Z","output_tokens":null},{"code_id":247878,"deleted":0,"input_tokens":3902,"id":146167,"project_id":8144,"sender":"ai","message":"To spawn the coins outside the visible area of the screen, we can adjust the `spawnCoin` function so that the coins are generated just outside the edges. Here's how we can modify that function:\n\n```javascript \n// script.js\nfunction spawnCoin() {\n // Generate a random starting position outside the screen boundaries\n let newCoinX = random(-20, -50); // X position to the left of the canvas\n let newCoinY = random(-20, -50); // Y position above the canvas\n coinPositions.push({ x: newCoinX, y: newCoinY }); // Add new coin to the array\n console.log(\"coin spawned\");\n}\n```\n\n### Changes:\n- **Spawn Position**: The coin's X position is set to a random value between -20 and -50, placing it outside the left edge of the canvas. The Y position is set to a random value between -20 and -50, placing it above the top edge of the canvas. \n\nPlease replace the existing `spawnCoin` function in your `script.js` file with this updated code. This should allow the coins to spawn outside the visible area and then move towards the center. Let me know how it goes!","created_at":"2025-06-03T19:17:14.351621Z","output_tokens":266},{"code_id":247880,"deleted":0,"input_tokens":null,"id":146168,"project_id":8144,"sender":"human","message":"that doesn't work because they get immediately despawned. pick a random point along the top, left, bottom, right edge of the screen (x = 0 or width; y = 0 or height, four diff options with other coordinate being random)","created_at":"2025-06-03T19:18:19.097488Z","output_tokens":null},{"code_id":247880,"deleted":0,"input_tokens":3953,"id":146169,"project_id":8144,"sender":"ai","message":"Got it! Let's modify the `spawnCoin` function to randomly select a point along the edges of the canvas. We'll set the X or Y coordinate to either 0 or the width/height, and the other coordinate will be random. Here's the updated `spawnCoin` function:\n\n```javascript \n// script.js\nfunction spawnCoin() {\n let newCoinX, newCoinY;\n\n // Randomly choose an edge to spawn the coin\n const edge = floor(random(4)); // Random number between 0 and 3\n\n switch (edge) {\n case 0: // Top edge\n newCoinX = random(width); // Random X position along the top\n newCoinY = 0; // Y position at the top\n break;\n case 1: // Bottom edge\n newCoinX = random(width); // Random X position along the bottom\n newCoinY = height; // Y position at the bottom\n break;\n case 2: // Left edge\n newCoinX = 0; // X position at the left\n newCoinY = random(height); // Random Y position along the left\n break;\n case 3: // Right edge\n newCoinX = width; // X position at the right\n newCoinY = random(height); // Random Y position along the right\n break;\n }\n\n coinPositions.push({ x: newCoinX, y: newCoinY }); // Add new coin to the array\n console.log(\"coin spawned\");\n}\n```\n\n### Changes:\n- **Spawn Position**: The function now randomly selects one of the four edges (top, bottom, left, right) to spawn the coin.\n- **Random Coordinates**: The X or Y coordinate is set to the edge's fixed value (0 or width/height), while the other coordinate is chosen randomly within the canvas dimensions.\n\nPlease replace the existing `spawnCoin` function in your `script.js` file with this updated code. This should allow the coins to spawn at random positions along the edges of the screen and move towards the center. Let me know how it goes!","created_at":"2025-06-03T19:18:19.264644Z","output_tokens":466}],"assets":[{"project_id":8144,"created_at":"2025-06-03T19:12:35.393347Z","resource_type":"image","id":75198,"cloudinary_id":"useojsudad4dwru7bgqb","name":"cover","deleted":false}],"messages_sent":5,"comments":[],"steps":[]}