Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Buckle up for a thrilling ride through the cosmos! In 'Hyperdrive Adventure', you'll navigate your spaceship through starry skies, dodge obstacles, and collect cosmic treasures. With user-friendly controls and engaging gameplay, this project will teach you the basics of programming while having a blast in a galaxy far, far away!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-01-15T21:56:12.392483Z","updated_at":"2025-01-15T21:56:12.392485Z","user_id":54,"status":"PRIVATE","parent_id":null,"id":5509,"user":{"photo":null,"email":null,"recess_id":"2c6ad53e-e5d0-517a-8a82-781ef4ff8edc","created_at":"2024-02-17T01:39:22.035269Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"kaelin","id":54,"password_hash":null,"updated_at":"2024-02-17T01:39:22.035272Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// JavaScript code here\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) { // Number of stars\n stars[i] = new Star();\n }\n}\n\n// JavaScript code here\nfunction draw() {\n background(0);\n translate(width / 2, height / 2); // Center the stars\n\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].show();\n }\n}\n\n// JavaScript code here\nclass Star {\n constructor() {\n this.reset();\n }\n\n reset() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width); // Depth\n this.pz = this.z; // Previous depth for drawing lines\n }\n\n update() {\n this.z -= 10; // Speed of the star towards the viewer\n if (this.z < 1) {\n this.reset();\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate star position\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 size based on depth\n let r = map(this.z, 0, width, 8, 0);\n ellipse(sx, sy, r, r);\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":[{"message":"i wanna make a hyperdrive","project_id":5509,"created_at":"2025-01-15T21:56:12.509792Z","output_tokens":null,"sender":"human","code_id":203365,"deleted":0,"input_tokens":null,"id":103184},{"message":"Let's get started!","project_id":5509,"created_at":"2025-01-15T21:56:16.608056Z","output_tokens":null,"sender":"human","code_id":203365,"deleted":0,"input_tokens":null,"id":103185},{"message":"Great! Could you tell me a bit more about your hyperdrive project? Are you envisioning it as a game, an animation, a simulation, or something else? What are some features you'd like to include?","project_id":5509,"created_at":"2025-01-15T21:56:16.615136Z","output_tokens":48,"sender":"ai","code_id":203365,"deleted":0,"input_tokens":2490,"id":103186},{"message":"i want stars zooming at me like i'm going through space at the speed of light","project_id":5509,"created_at":"2025-01-15T21:56:29.434058Z","output_tokens":null,"sender":"human","code_id":203366,"deleted":0,"input_tokens":null,"id":103187},{"message":"That sounds exciting! We can definitely create an effect of stars zooming towards you to simulate traveling through space at light speed. \n\nTo start, could you tell me a bit about how you imagine these stars? For instance, how dense should the star field be, and should the stars have any specific colors or sizes?","project_id":5509,"created_at":"2025-01-15T21:56:29.442927Z","output_tokens":78,"sender":"ai","code_id":203366,"deleted":0,"input_tokens":2503,"id":103188},{"message":"the stars should be dots","project_id":5509,"created_at":"2025-01-15T21:56:40.337467Z","output_tokens":null,"sender":"human","code_id":203366,"deleted":0,"input_tokens":null,"id":103189},{"message":"Awesome! We can create a starfield of dots that move towards the viewer to simulate the hyperdrive effect. Let’s add some stars that will zoom in from the center of the screen. I'll guide you on how to do this.\n\nFirst, we'll create a class for the stars, and then we'll update the `draw()` function to animate them. Let's start by adding a `Star` class.\n\n```javascript\n// JavaScript code here\nclass Star {\n constructor() {\n this.reset();\n }\n\n reset() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width); // Depth\n this.pz = this.z; // Previous depth for drawing lines\n }\n\n update() {\n this.z -= 10; // Speed of the star towards the viewer\n if (this.z < 1) {\n this.reset();\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate star position\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 size based on depth\n let r = map(this.z, 0, width, 8, 0);\n ellipse(sx, sy, r, r);\n }\n}\n```\n\nNext, let's create an array of stars and update the `setup()` and `draw()` functions.\n\n```javascript\n// JavaScript code here\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) { // Number of stars\n stars[i] = new Star();\n }\n}\n```\n\n```javascript\n// JavaScript code here\nfunction draw() {\n background(0);\n translate(width / 2, height / 2); // Center the stars\n\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].show();\n }\n}\n```\n\n- **Star Class**: Manages individual star properties and animations.\n- **reset() Method**: Resets star position when it moves out of view.\n- **update() Method**: Moves stars closer, simulating speed.\n- **show() Method**: Draws stars as dots, adjusting size based on depth.\n- **setup() Function**: Initializes the canvas and generates stars.\n- **draw() Function**: Animates stars, creating a hyperdrive effect.\n\nTry adding this code to your `script.js`, and let me know how it looks!","project_id":5509,"created_at":"2025-01-15T21:56:40.389200Z","output_tokens":542,"sender":"ai","code_id":203366,"deleted":0,"input_tokens":2490,"id":103190}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}