Stellar Sprites: Cosmic Constellations

{"name":"Stellar Sprites: Cosmic Constellations","description":"Join the celestial battle for ownership and navigate the universe in this competitive and educational game featuring unique celestial shapes and captivating constellation layouts!","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-06-16T18:48:46.769074Z","updated_at":"2024-06-16T18:48:46.769077Z","user_id":98,"status":"PUBLIC","parent_id":1895,"id":1939,"user":{"photo":null,"email":null,"recess_id":"fbbfcb21-6b3a-f70b-251b-6fe64b39eeb9","created_at":"2024-05-02T22:59:55.908403Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"ninjarockalstatt2","id":98,"password_hash":null,"updated_at":"2024-05-02T22:59:55.908407Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let hoveredStar = null; // Variable to store the currently hovered star\nlet hoveredConstellation = null; // Variable to store the currentl\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Create a canvas that covers the full window\n background(0); // Set the background color to black\n}\nfunction draw() {\n background(0)\n stroke(255); // Set the line color to white\n noFill();\n beginShape();\n // Draw each constellation\n for (let constellation of constellations) {\n constellation.display();\n }\n //stars:\n for (let star of stars) {\n star.display();\n }\n if (hoveredStar) {\n hoveredStar.displayName();\n }\n if (hoveredConstellation) {\n hoveredConstellation.displayName();\n }\n}\nfunction mouseMoved() {\n hoveredStar = null; // Reset the hovered star\n hoveredConstellation = null; // Reset the hovered constellation\n\n // Check for hover over lone stars\n for (let star of stars) {\n if (dist(mouseX, mouseY, star.x, star.y) < star.size) {\n hoveredStar = star;\n }\n }\n // Check for hover over constellations\n for (let constellation of constellations) {\n for (let star of constellation.stars) {\n if (dist(mouseX, mouseY, star.x, star.y) < star.size) {\n hoveredStar = star;\n hoveredConstellation = constellation;\n }\n }\n }\n}\n// Star class to represent a star\nclass Star {\n constructor(x, y, name, type) {\n this.x = x;\n this.y = y;\n this.size = 20;\n this.rotation = 0;\n this.points = 10;\n this.name = name;\n this.type = type\n }\n //quasar: ✦ wormhole: ⊙, ◎ nova: ■\n display() {\n push();\n translate(this.x, this.y); // Move the origin to the star's position\n rotate(this.rotation); // Rotate the star\n fill(255); // Set the star color to white\n textSize(this.size); // Set the size of the star\n if (this.type == 'star') {\n text('•', -3.5, 7); // Draw the star using an emoji\n }\n if (this.type == 'cluster') {\n text('✸', -9, 7); // Draw the star using an emoji\n }\n if (this.type == 'nebula') {\n text('▼', -9, 7); // Draw the star using an emoji\n }\n if (this.type == \"quasar\") {\n text('✦', -9, 7);\n }\n if (this.type == \"nova\") {\n text('■', -9, 7);\n }\n pop();\n }\n displayName() {\n push();\n translate(this.x, this.y + this.size - 9);\n fill(255);\n textSize(12);\n text(this.name, 0, 0)\n pop();\n }\n}\n\n// Constellation class to represent a group of stars\nclass Constellation {\n constructor(stars, connections, name) {\n this.stars = stars; // Array of Star objects\n this.connections = connections; // Array of pairs of indices indicating connections between stars\n this.name = name;\n }\n\n display() {\n stroke(255); // Set the line color to white\n noFill();\n beginShape();\n for (let connection of this.connections) {\n let star1 = this.stars[connection[0]];\n let star2 = this.stars[connection[1]];\n line(star1.x, star1.y, star2.x, star2.y); // Draw a line between the connected stars\n }\n endShape();\n\n for (let star of this.stars) {\n star.display(); // Display each star\n }\n if (hoveredConstellation === this) {\n this.displayName();\n }\n }\n\n displayName() {\n let centroidX = this.stars.reduce((sum, star) => sum + star.x, 0) / this.stars.length;\n let centroidY = this.stars.reduce((sum, star) => sum + star.y, 0) / this.stars.length;\n push();\n translate(centroidX, centroidY - 20); // Position the name above the constellation centroid\n fill(255); // Set the text color to white\n textSize(16); // Set the text size\n textAlign(CENTER); // Center the text\n text(this.name, 0, 0); // Draw the name\n pop();\n }\n}\n\nlet constellations = [];\nconstellations.push(new Constellation(\n [\n new Star(100, 100, 'Star A', 'star'),\n new Star(150, 100, 'Star B', 'cluster'),\n new Star(150, 200, 'Star C', 'star'),\n new Star(100, 200, 'Star D', 'star')\n ],\n [[0, 1], [1, 2], [2, 3], [3, 0], [1, 3]], // Connections between stars\n 'crate'\n));\n\nconstellations.push(new Constellation(\n [\n new Star(300, 200, 'Star E', 'star'),\n new Star(350, 250, 'Star F', 'star'),\n new Star(400, 300, 'Star G', 'star')\n ],\n [[0, 1], [1, 2]], // Connections between stars\n 'Constellation 2'\n));\nconstellations.push(new Constellation(\n [\n new Star(185, 200, 'Star H', 'star'),\n new Star(250, 250, 'pi', 'nebula'),\n new Star(250, 150, 'Star I', 'star'),\n new Star(250, 300, 'Veta', 'star'),\n new Star(235, 163, 'fruitfly-nova', 'nova'),\n ],\n [[0, 1], [1, 2], [2, 4]], // Connections between stars\n 'pi'\n));\nconstellations.push(new Constellation(\n [\n new Star(600, 150, 'Alpha', 'star'),\n ],\n [], // Connections between stars\n 'alpha'\n));\n\nlet stars = [];\n//stars.push(new Star(100, 100)); // Example star\n//stars.push(new Star(150, 100)); // Example star\n//stars.push(new Star(150, 200)); // Example star\n//stars.push(new Star(300, 200)); // Example star\n//stars.push(new Star(300, 100)); // Example star","style.css":"","index.html":"\n\n\n\n \n \n Stellar Sprites: Cosmic Constellations\n \n\n\n\n \n \n\n\n"},"chat_history":[{"message":"","project_id":1939,"created_at":"2025-10-02T21:11:17.711929Z","output_tokens":null,"sender":"client_script","code_id":284074,"deleted":0,"input_tokens":null,"id":171887},{"message":"","project_id":1939,"created_at":"2025-10-02T21:11:35.287667Z","output_tokens":null,"sender":"client_script","code_id":284074,"deleted":0,"input_tokens":null,"id":171888},{"message":"","project_id":1939,"created_at":"2025-10-03T00:12:54.139495Z","output_tokens":null,"sender":"client_script","code_id":284088,"deleted":0,"input_tokens":null,"id":171898},{"message":"Let's get started!\n Errors:\n","project_id":1939,"created_at":"2025-10-03T23:39:55.966219Z","output_tokens":null,"sender":"client_script","code_id":284090,"deleted":0,"input_tokens":null,"id":171952},{"message":"Great! Your project looks interesting with these constellations and stars. Could you tell me a bit more about what you're trying to achieve with this project? For example, are you aiming to create a game, an interactive simulation, or something else? Let me know so I can better assist you!","project_id":1939,"created_at":"2025-10-03T23:39:56.570737Z","output_tokens":72,"sender":"ai","code_id":284090,"deleted":0,"input_tokens":3968,"id":171953},{"message":"how do we make it so you can move around","project_id":1939,"created_at":"2025-10-03T23:40:10.513311Z","output_tokens":null,"sender":"human","code_id":284090,"deleted":0,"input_tokens":null,"id":171954},{"message":"To enable movement in your project, you can allow the user to move around the canvas using keyboard controls. This can be done by changing the position of the stars or constellations when certain keys are pressed. Would you like to move all the stars and constellations together, or have a specific element that moves around the canvas? Let me know your preference!","project_id":1939,"created_at":"2025-10-03T23:40:10.742418Z","output_tokens":91,"sender":"ai","code_id":284090,"deleted":0,"input_tokens":3973,"id":171955},{"message":"move around with arrow keys","project_id":1939,"created_at":"2025-10-03T23:40:33.580682Z","output_tokens":null,"sender":"human","code_id":284090,"deleted":0,"input_tokens":null,"id":171956},{"message":"To enable movement with the arrow keys, we can update the `draw` function to check for key presses and adjust the positions of the stars or constellations accordingly. Here's how to implement it:\n\n1. We'll add a new variable to track the position of the entire scene.\n2. We'll modify the `draw` function to update the position based on the arrow key inputs.\n\nLet's start by adding the necessary code. \n\n```javascript\n// script.js\nlet offsetX = 0; // Variable to track the horizontal offset\nlet offsetY = 0; // Variable to track the vertical offset\n\nfunction draw() {\n background(0);\n stroke(255); // Set the line color to white\n noFill();\n \n // Update offsets based on arrow key inputs\n if (keyIsDown(LEFT_ARROW)) {\n offsetX -= 5; // Move left\n }\n if (keyIsDown(RIGHT_ARROW)) {\n offsetX += 5; // Move right\n }\n if (keyIsDown(UP_ARROW)) {\n offsetY -= 5; // Move up\n }\n if (keyIsDown(DOWN_ARROW)) {\n offsetY += 5; // Move down\n }\n \n // Draw each constellation with the offset applied\n for (let constellation of constellations) {\n push(); // Save the current state\n translate(offsetX, offsetY); // Apply the offset\n constellation.display();\n pop(); // Restore the previous state\n }\n \n // Draw stars with the offset applied\n for (let star of stars) {\n push(); // Save the current state\n translate(offsetX, offsetY); // Apply the offset\n star.display();\n pop(); // Restore the previous state\n }\n \n if (hoveredStar) {\n hoveredStar.displayName();\n }\n if (hoveredConstellation) {\n hoveredConstellation.displayName();\n }\n}\n```\n\n### Explanation:\n- **Variables**: `offsetX` and `offsetY` track the current position of the scene.\n- **Key Input**: We check if any arrow keys are pressed (`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`) and adjust the offsets accordingly.\n- **Drawing**: When displaying constellations and stars, we apply the offsets using the `translate()` function to move the entire scene based on user input.\n\nReplace the existing `draw` function with this updated version in your `script.js` file. This will allow you to move around the canvas using the arrow keys! Let me know if you need any further adjustments or features!","project_id":1939,"created_at":"2025-10-03T23:40:33.706400Z","output_tokens":579,"sender":"ai","code_id":284090,"deleted":0,"input_tokens":3968,"id":171957}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"title":"Visible Cosmic Elements","instruction":"Implement visual representations of stars, nebulae, star clusters, black holes, and white holes using specific shapes to distinguish each cosmic object.","created_at":"2024-06-15T03:19:42.935595","project_id":1939,"complete":false,"step_number":0,"updated_at":"2024-06-16T18:48:46.772364","id":9938},{"title":"Interactive Controls","instruction":"Allow user input for connecting cosmic elements and navigating through the universe using keyboard and mouse controls.","created_at":"2024-06-15T03:19:42.935655","project_id":1939,"complete":false,"step_number":1,"updated_at":"2024-06-16T18:48:46.772444","id":9939},{"title":"Cosmic Interactions","instruction":"Implement game logic for scoring, collision detection, and unique interactions for each cosmic object type.","created_at":"2024-06-15T03:19:42.935699","project_id":1939,"complete":false,"step_number":2,"updated_at":"2024-06-16T18:48:46.772493","id":9940},{"title":"Namable Teams and Constellations","instruction":"Allow players to name their teams and constellations, adding a personalized and competitive element to the game.","created_at":"2024-06-15T03:19:42.935740","project_id":1939,"complete":false,"step_number":3,"updated_at":"2024-06-16T18:48:46.772537","id":9941},{"title":"Constellation Layouts","instruction":"Visually represent constellations by starting with a star and making clones of it, allowing players to connect stars and complete captivating constellation patterns.","created_at":"2024-06-15T03:19:42.935782","project_id":1939,"complete":false,"step_number":4,"updated_at":"2024-06-16T18:48:46.772582","id":9942},{"title":"Color-coded Ownership","instruction":"Dynamically change the colors of cosmic objects based on the team that claims them, providing visual clarity and adding competitive gameplay dynamics.","created_at":"2024-06-15T03:19:42.935822","project_id":1939,"complete":false,"step_number":5,"updated_at":"2024-06-16T18:48:46.772625","id":9943},{"title":"Difficulty Levels","instruction":"Incorporate multiple levels of difficulty to cater to players of all skill levels, from beginners to experts.","created_at":"2024-06-15T03:19:42.935866","project_id":1939,"complete":false,"step_number":6,"updated_at":"2024-06-16T18:48:46.772685","id":9944},{"title":"Timer Challenge","instruction":"Add a timer to create a sense of urgency and challenge for the players.","created_at":"2024-06-15T03:19:42.935906","project_id":1939,"complete":false,"step_number":7,"updated_at":"2024-06-16T18:48:46.772729","id":9945}]}