Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Prepare for an exhilarating journey through the cosmos in Hyperdrive Adventure! This interactive experience lets you navigate through space, dodge asteroids, and collect power-ups as you race against the clock. With simple user controls and dynamic visuals, you'll be immersed in a universe of excitement and challenges!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-01-23T22:38:50.815925Z","updated_at":"2025-01-23T22:38:50.815926Z","user_id":59,"status":"PRIVATE","parent_id":null,"id":5602,"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":"\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 5000; i++) { // You can adjust the number of stars\n stars.push(new Star());\n }\n background(0); // Black background for space\n}\n\nfunction draw() {\n background(0); // Refresh the background each frame\n translate(width / 2, height / 2); // Move origin to center\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 zoom\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); // Size of the star\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":[{"message":"I want to build a hyperdrive","project_id":5602,"created_at":"2025-01-23T22:38:50.830721Z","output_tokens":null,"sender":"human","code_id":204671,"deleted":0,"input_tokens":null,"id":104604},{"message":"Let's get started!\n Errors:\n","project_id":5602,"created_at":"2025-01-23T22:38:52.929313Z","output_tokens":null,"sender":"client_script","code_id":204671,"deleted":0,"input_tokens":null,"id":104605},{"message":"Great! You've got a basic setup with p5.js and a sky-blue background ready to go. \n\nCould you tell me a bit more about what you want your hyperdrive project to do? For example, do you envision it as a game, simulation, or something else? What kind of features or interactions are you thinking about?","project_id":5602,"created_at":"2025-01-23T22:38:52.936803Z","output_tokens":74,"sender":"ai","code_id":204671,"deleted":0,"input_tokens":2490,"id":104606},{"message":"stars that zoom at me like star wars","project_id":5602,"created_at":"2025-01-23T22:39:00.459707Z","output_tokens":null,"sender":"human","code_id":204672,"deleted":0,"input_tokens":null,"id":104607},{"message":"That sounds like a fun effect to create! It's definitely possible to make stars appear to zoom towards you, creating a hyperspace-like effect. Let's start by adding some stars to the screen and then make them move towards the viewer to give that zooming effect.\n\nHere are a couple of questions to help us get started:\n1. How many stars would you like to have on the screen at once?\n2. Do you want the stars to have any particular size or color, or should we start with basic white stars?","project_id":5602,"created_at":"2025-01-23T22:39:00.471041Z","output_tokens":121,"sender":"ai","code_id":204672,"deleted":0,"input_tokens":2493,"id":104608},{"message":"tons of stars little white dots that zoom at me lets code","project_id":5602,"created_at":"2025-01-23T22:39:12.652873Z","output_tokens":null,"sender":"human","code_id":204672,"deleted":0,"input_tokens":null,"id":104609},{"message":"Alright, let's create that hyperdrive effect with stars zooming towards you. We'll start by adding stars as small white dots on the screen, and then make them move towards the viewer.\n\nWe'll need to:\n1. Create a class for the stars to manage their position and movement.\n2. Initialize a group of stars.\n3. Update their positions to create the zoom effect.\n\nLet's get started by adding the star class and initializing the stars.\n\n```javascript\n// script.js\n\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 100; i++) { // You can adjust the number of stars\n stars.push(new Star());\n }\n background(0); // Black background for space\n}\n\nfunction draw() {\n background(0); // Refresh the background each frame\n translate(width / 2, height / 2); // Move origin to center\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 zoom\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); // Size of the star\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### Explanation:\n- **Star Class**: Manages each star's position and movement.\n- **Setup Function**: Initializes an array of stars.\n- **Draw Function**: Updates and displays each star, creating a zoom effect.\n\nTry this out and let me know how it looks! You can adjust the number of stars or their speed to get the effect just right.","project_id":5602,"created_at":"2025-01-23T22:39:12.660201Z","output_tokens":537,"sender":"ai","code_id":204672,"deleted":0,"input_tokens":2497,"id":104610},{"message":"i want more stars","project_id":5602,"created_at":"2025-01-23T22:39:41.997721Z","output_tokens":null,"sender":"human","code_id":204673,"deleted":0,"input_tokens":null,"id":104611},{"message":"To add more stars, you can simply increase the number in the loop where the stars are created in the `setup()` function. \n\nCurrently, you have this line:\n\n```javascript\nfor (let i = 0; i < 100; i++) { // You can adjust the number of stars\n```\n\nLet's change it to a higher number, like 300 for example. Here's the updated `setup()` function:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 300; i++) { // Increased the number of stars\n stars.push(new Star());\n }\n background(0); // Black background for space\n}\n```\n\n### Explanation:\n- **Increased Star Count**: Changing `100` to `300` will create more stars, enhancing the zoom effect.\n\nReplace your existing `setup()` function with this updated version, and then run your project again to see the difference! Let me know how it looks!","project_id":5602,"created_at":"2025-01-23T22:39:42.030759Z","output_tokens":213,"sender":"ai","code_id":204673,"deleted":0,"input_tokens":2837,"id":104612}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}