Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an intergalactic journey with Hyperdrive Adventure! Navigate through vibrant space environments while avoiding obstacles and collecting star tokens. Unleash your speed and creativity as you control your spaceship using simple keyboard or mouse inputs, and race against time to achieve the highest score!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-01-24T23:40:09.536571Z","updated_at":"2025-01-24T23:40:09.536574Z","user_id":59,"status":"PRIVATE","parent_id":null,"id":5610,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 5000; i++) {\n stars.push(new Star());\n }\n}\n\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\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 this.pz = this.z;\n }\n\n update() {\n this.z -= 40; // Speed of the stars\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\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 let r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n let px = map(this.x / this.pz, 0, 1, 0, width);\n let py = map(this.y / this.pz, 0, 1, 0, height);\n\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\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,"code_id":204817,"input_tokens":null,"id":104752,"project_id":5610,"sender":"human","message":"I wanna build a hyperdrive","created_at":"2025-01-24T23:40:09.550367Z","output_tokens":null},{"deleted":0,"code_id":204817,"input_tokens":null,"id":104753,"project_id":5610,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-01-24T23:40:12.714888Z","output_tokens":null},{"deleted":0,"code_id":204817,"input_tokens":2490,"id":104754,"project_id":5610,"sender":"ai","message":"Great! Could you tell me a bit more about your hyperdrive project? What kind of project are you looking to create? Is it a game, a website, an animation, or something else? What features do you have in mind for your hyperdrive?","created_at":"2025-01-24T23:40:12.720374Z","output_tokens":56},{"deleted":0,"code_id":204818,"input_tokens":null,"id":104755,"project_id":5610,"sender":"human","message":"lets make stars zoom at me like star wars","created_at":"2025-01-24T23:40:25.399716Z","output_tokens":null},{"deleted":0,"code_id":204818,"input_tokens":2494,"id":104756,"project_id":5610,"sender":"ai","message":"That sounds like a great idea! We can create a starfield effect where stars zoom past the screen, similar to the hyperspace effect in Star Wars. This can give the illusion of traveling at high speed through space.\n\nTo get started, let me ask you a couple of questions:\n\n1. How fast do you want the stars to move? Should they all move at the same speed, or would you like some variation?\n2. Do you want the stars to start from a specific point in the canvas or appear randomly across the screen?","created_at":"2025-01-24T23:40:25.431359Z","output_tokens":123},{"deleted":0,"code_id":204818,"input_tokens":null,"id":104757,"project_id":5610,"sender":"human","message":"lots of white stars zooming at me","created_at":"2025-01-24T23:40:39.567316Z","output_tokens":null},{"deleted":0,"code_id":204818,"input_tokens":2493,"id":104758,"project_id":5610,"sender":"ai","message":"Great! We can create the effect of many white stars zooming towards you by using p5.js to animate them. Let's add this feature step by step.\n\nFirst, we'll create a class to represent the stars. Each star will have properties such as position, speed, and size. Then, we'll use the `draw` function to animate the stars moving towards the screen.\n\nLet's start by creating a Star class. Replace your current `script.js` with the following code:\n\n```javascript\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 100; i++) {\n stars.push(new Star());\n }\n}\n\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\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 this.pz = this.z;\n }\n\n update() {\n this.z -= 10; // Speed of the stars\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\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 let r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n let px = map(this.x / this.pz, 0, 1, 0, width);\n let py = map(this.y / this.pz, 0, 1, 0, height);\n\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n### How it works:\n- **Star Class**: Each star is initialized with random positions and depth (`z` value).\n- **update() Method**: Moves the stars towards the viewer by decreasing their `z` value. If a star reaches the viewer, it is reset to a new random position.\n- **show() Method**: Draws the stars and their trails to create a zooming effect.\n\nThis should give you the effect you're looking for! Let me know if you want to adjust anything.","created_at":"2025-01-24T23:40:39.572739Z","output_tokens":530},{"deleted":0,"code_id":204819,"input_tokens":null,"id":104759,"project_id":5610,"sender":"human","message":"i want more stars","created_at":"2025-01-24T23:41:00.526478Z","output_tokens":null},{"deleted":0,"code_id":204819,"input_tokens":2804,"id":104760,"project_id":5610,"sender":"ai","message":"To add more stars to your hyperdrive effect, you'll just need to increase the number of stars that you create in the `setup` function. Currently, you have 100 stars, but we can increase that to, say, 300 stars for a more intense effect.\n\nHere's what you need to change in your `script.js`:\n\n1. Find the line in the `setup` function where you create the stars.\n2. Change the number `100` to `300` (or any number you prefer).\n\nHere's the updated code for the `setup` function:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 300; i++) { // Increased from 100 to 300\n stars.push(new Star());\n }\n}\n```\n\n### How it works:\n- This change simply increases the number of stars in your starfield, making the zooming effect more pronounced.\n\nReplace the `setup` function in your existing `script.js` with the new code. Let me know how it looks!","created_at":"2025-01-24T23:41:00.531916Z","output_tokens":224},{"deleted":0,"code_id":204820,"input_tokens":null,"id":104761,"project_id":5610,"sender":"human","message":"well how do i make them go faster","created_at":"2025-01-24T23:41:25.140466Z","output_tokens":null},{"deleted":0,"code_id":204820,"input_tokens":2809,"id":104762,"project_id":5610,"sender":"ai","message":"To make the stars zoom towards you faster, you'll need to adjust the speed in the `update` method of the `Star` class. Currently, the speed is set to `10`. You can increase this value to make the stars move faster.\n\nHere's the updated code for the `update` method:\n\n```javascript\nupdate() {\n this.z -= 20; // Increased speed from 10 to 20\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.pz = this.z;\n }\n}\n```\n\n### How it works:\n- **Speed Adjustment**: Changing the `this.z -= 10;` to `this.z -= 20;` will double the speed at which the stars move towards you.\n\nReplace the `update` method in your existing `Star` class with the new code. Let me know how it looks!","created_at":"2025-01-24T23:41:25.187047Z","output_tokens":190}],"assets":[],"messages_sent":5,"comments":[],"steps":[]}