Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an exciting journey through the cosmos with Hyperdrive Adventure! Navigate your spaceship through thrilling obstacles, collect star power-ups, and race against time to reach distant galaxies. With simple controls and vibrant visuals, you'll be blasting off into the universe in no time!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-18T21:17:43.824139Z","updated_at":"2024-11-18T21:17:43.824147Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4650,"user":{"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters","id":1,"password_hash":null,"updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Hyperdrive Adventure\n \n \n\n\n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"I want to build a hyperdrive","project_id":4650,"created_at":"2024-11-18T21:17:43.836995Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90326},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4650,"created_at":"2024-11-18T21:18:00.350208Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90327},{"deleted":0,"sender":"ai","message":"Great! I'm excited to help you build your hyperdrive project. Could you tell me a bit more about your idea? Specifically, what kind of project are you envisioning? Is it a game, an animation, or something else? Let me know so we can start building!","project_id":4650,"created_at":"2024-11-18T21:18:00.374501Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90328},{"deleted":0,"sender":"human","message":"stars zoom at me like star wars","project_id":4650,"created_at":"2024-11-18T21:18:14.773018Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90329},{"deleted":0,"sender":"ai","message":"That sounds like a fun visual effect to create! We can definitely make stars zoom towards you, similar to the hyperdrive effect in Star Wars. \n\nTo get started, let me ask:\n1. How do you want the stars to behave when they reach the center of the screen? Should they disappear, or should they loop back to the edges?\n2. Do you want any specific controls or interactions, like starting or stopping the effect?","project_id":4650,"created_at":"2024-11-18T21:18:14.781256Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90330},{"deleted":0,"sender":"human","message":"lets go","project_id":4650,"created_at":"2024-11-18T21:18:31.066287Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90331},{"deleted":0,"sender":"ai","message":"Awesome! Let's create that hyperdrive effect by making stars zoom towards you. We'll start by creating stars that move from the edges of the screen toward the center. \n\nFirst, let's define a Star class to manage individual star properties and behaviors. We'll also create an array to hold multiple stars. Here's how we can get started:\n\n```javascript\n// JavaScript code to add at the top of your script.js file\nlet stars = []; // Array to store star objects\n```\n\n```javascript\n// JavaScript code to add below the stars array\nclass Star {\n constructor() {\n this.x = random(-windowWidth / 2, windowWidth / 2);\n this.y = random(-windowHeight / 2, windowHeight / 2);\n this.z = random(windowWidth / 2);\n }\n\n update() {\n this.z -= 5; // Move the star closer\n\n if (this.z < 1) {\n this.z = windowWidth / 2;\n this.x = random(-windowWidth / 2, windowWidth / 2);\n this.y = random(-windowHeight / 2, windowHeight / 2);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n let sx = map(this.x / this.z, 0, 1, 0, windowWidth / 2);\n let sy = map(this.y / this.z, 0, 1, 0, windowHeight / 2);\n\n let r = map(this.z, 0, windowWidth / 2, 8, 0); // Size based on z\n ellipse(sx + windowWidth / 2, sy + windowHeight / 2, r, r);\n }\n}\n```\n\n```javascript\n// JavaScript code to add in the setup function\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0); // Black background for space effect\n for (let i = 0; i < 800; i++) { // Create 800 stars\n stars[i] = new Star();\n }\n}\n```\n\n```javascript\n// JavaScript code to add in the draw function\nfunction draw() {\n background(0);\n translate(width / 2, height / 2); // Center the origin\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n### Explanation\n- **Star Class**: Defines how each star behaves and appears.\n- **update() Function**: Moves stars closer and resets them when they reach the center.\n- **show() Function**: Displays the stars on the screen, adjusting size based on their distance (`z` value).\n- **Translate**: Centers the drawing origin to make the movement more natural around the center.\n\nLet me know if you have any questions or if you'd like to add more features!","project_id":4650,"created_at":"2024-11-18T21:18:31.162121Z","output_tokens":null,"code_id":184360,"input_tokens":null,"id":90332}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}