Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an exhilarating journey through space in Hyperdrive Adventure! Navigate your ship through vibrant cosmic landscapes, dodge asteroids, and collect energy orbs to fuel your hyperdrive. With intuitive controls and engaging gameplay, you'll experience the thrill of interstellar travel right from your screen!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-11T18:15:48.053353Z","updated_at":"2024-11-11T18:15:48.053355Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4509,"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":"// Add this above the setup function in script.js\n\nlet stars = []; // Array to hold the stars\n\n// Update the setup function in script.js\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nclass Star {\n constructor() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n }\n\n// Update the update method in the Star class in script.js\n\nupdate() {\n let speed = map(mouseX, 0, width, 5, 20); // Speed varies with mouse position\n this.z -= speed; // Adjust the speed based on mouse position\n if (this.z < 1) {\n this.z = width; // Reset star's position when it goes off screen\n this.x = random(-width, width);\n this.y = random(-height, height);\n }\n}\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate star's position on screen\n let sx = map(this.x / this.z, 0, 1, 0, width);\n let sy = map(this.y / this.z, 0, 1, 0, height);\n\n // Calculate star's size\n let r = map(this.z, 0, width, 8, 0);\n ellipse(sx, sy, r, r);\n }\n}\n\n// Update the draw function in script.js\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\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":4509,"created_at":"2024-11-11T18:15:48.142503Z","output_tokens":null,"code_id":181851,"input_tokens":null,"id":89093},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4509,"created_at":"2024-11-11T18:15:52.385343Z","output_tokens":null,"code_id":181851,"input_tokens":null,"id":89094},{"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? Are you thinking of creating a game, an animation, or perhaps a simulation? And what kind of features or elements would you like to include?","project_id":4509,"created_at":"2024-11-11T18:15:52.391238Z","output_tokens":null,"code_id":181851,"input_tokens":null,"id":89095},{"deleted":0,"sender":"human","message":"I want the stars to zoom at me like star wars","project_id":4509,"created_at":"2024-11-11T18:16:02.497654Z","output_tokens":null,"code_id":181852,"input_tokens":null,"id":89096},{"deleted":0,"sender":"ai","message":"Got it! We can create a starfield effect to give the impression of stars zooming towards you, similar to the hyperdrive effect in Star Wars. Let's start by adding some stars to the scene.\n\nFirst, we'll create a simple star object and make them move towards the screen. We can adjust their speed to make the effect more dramatic.\n\nLet's begin by creating a Star class to represent each star and update the `draw` function to handle the star movement.\n\n```javascript\n// Add this above the setup function in script.js\n\nlet stars = []; // Array to hold the stars\n\nclass Star {\n constructor() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n }\n\n update() {\n this.z -= 5; // Speed at which the stars move\n if (this.z < 1) {\n this.z = width; // Reset star's position when it goes off screen\n this.x = random(-width, width);\n this.y = random(-height, height);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate star's position on screen\n let sx = map(this.x / this.z, 0, 1, 0, width);\n let sy = map(this.y / this.z, 0, 1, 0, height);\n\n // Calculate star's size\n let r = map(this.z, 0, width, 8, 0);\n ellipse(sx, sy, r, r);\n }\n}\n```\n\n```javascript\n// Update the setup function in script.js\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n```\n\n```javascript\n// Update the draw function in script.js\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n### How it works:\n- **Star Class**: Each star has a position in 3D space (`x`, `y`, `z`), and moves towards the viewer.\n- **Update Method**: Moves the star closer by decreasing `z`. If a star goes off-screen, it resets its position.\n- **Show Method**: Maps the 3D position to 2D screen coordinates and draws the star as a circle.\n- **Setup Function**: Initializes 800 stars and stores them in the `stars` array.\n- **Draw Function**: Continuously updates and displays each star, creating the zoom effect.\n\nFeel free to try this out and let me know how it looks or if you want to add more features!","project_id":4509,"created_at":"2024-11-11T18:16:02.503673Z","output_tokens":null,"code_id":181852,"input_tokens":null,"id":89097},{"deleted":0,"sender":"human","message":"let's make the stars go faster when my cursor is on the right","project_id":4509,"created_at":"2024-11-11T18:16:53.883239Z","output_tokens":null,"code_id":181854,"input_tokens":null,"id":89098},{"deleted":0,"sender":"ai","message":"That sounds like a fun idea! We can adjust the speed of the stars based on the horizontal position of your mouse. Let's update the `update` method in the `Star` class to increase the speed when the cursor is on the right side of the screen.\n\nHere's how you can do it:\n\n```javascript\n// Update the update method in the Star class in script.js\n\nupdate() {\n let speed = map(mouseX, 0, width, 5, 20); // Speed varies with mouse position\n this.z -= speed; // Adjust the speed based on mouse position\n if (this.z < 1) {\n this.z = width; // Reset star's position when it goes off screen\n this.x = random(-width, width);\n this.y = random(-height, height);\n }\n}\n```\n\n### How it works:\n- **Speed Calculation**: The `map` function changes the speed based on the `mouseX` position. The further right the mouse, the faster the stars move.\n- **Star Movement**: The speed variable is used to adjust how fast each star's `z` value decreases, making them appear to move faster.\n\nTry this update and see how the stars react to your cursor's position! Let me know if you want to make any more adjustments.","project_id":4509,"created_at":"2024-11-11T18:16:53.891764Z","output_tokens":null,"code_id":181854,"input_tokens":null,"id":89099}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}