Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an intergalactic journey with Hyperdrive Adventure! Navigate your spaceship through a colorful cosmos, dodging asteroids and collecting stars. Use your skills to chart a course through the stars and see how far you can go in this exciting space adventure!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-12T20:27:08.566601Z","updated_at":"2024-11-12T20:27:08.566603Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4565,"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":"let stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].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 = this.z - 10; // Speed of the star\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}","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 wanna make a hyperdrive","project_id":4565,"created_at":"2024-11-12T20:27:08.584299Z","output_tokens":null,"code_id":182819,"input_tokens":null,"id":89470},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4565,"created_at":"2024-11-12T20:27:10.849466Z","output_tokens":null,"code_id":182819,"input_tokens":null,"id":89471},{"deleted":0,"sender":"ai","message":"Great! Could you tell me more about your hyperdrive project? Are you thinking of creating a game, a visual animation, or something else? What kind of features would you like to include?","project_id":4565,"created_at":"2024-11-12T20:27:10.858402Z","output_tokens":null,"code_id":182819,"input_tokens":null,"id":89472},{"deleted":0,"sender":"human","message":"Like star wars, I want the stars to zoom at me","project_id":4565,"created_at":"2024-11-12T20:27:20.715625Z","output_tokens":null,"code_id":182820,"input_tokens":null,"id":89473},{"deleted":0,"sender":"ai","message":"That sounds like a cool idea! Creating a starfield effect where stars zoom toward you can definitely give that hyperdrive feel. We'll use simple shapes or emojis to represent the stars.\n\nTo start, could you tell me how you imagine the stars behaving? For example, how fast should they move, and do you want them to change color or size as they get closer?","project_id":4565,"created_at":"2024-11-12T20:27:20.724872Z","output_tokens":null,"code_id":182820,"input_tokens":null,"id":89474},{"deleted":0,"sender":"human","message":"just zoom!","project_id":4565,"created_at":"2024-11-12T20:27:26.976513Z","output_tokens":null,"code_id":182820,"input_tokens":null,"id":89475},{"deleted":0,"sender":"ai","message":"Got it! Let's create a simple zooming star effect. We'll make stars appear to come towards the viewer by increasing their size as they move across the screen.\n\nFirst, we'll create a class to represent each star and then update the `draw` function to move and display them.\n\nLet's start by adding a global array to hold the stars and a class to handle the star behavior in `script.js`. \n\n```javascript\nlet stars = [];\n```\n\n```javascript\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 = this.z - 10; // Speed of the star\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\nNow, update the `setup` and `draw` functions to create and display the stars:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].show();\n }\n}\n```\n\n- **`let stars = [];`**: This initializes an array to store star objects.\n- **`class Star`**: Defines a star's position and behavior, including how it moves towards the viewer.\n- **`update` method**: Moves the star forward and resets its position when it reaches the viewer.\n- **`show` method**: Draws the star as a point with a trail, creating a zoom effect.\n- **`setup` and `draw` functions**: Initialize and animate the stars across the canvas. \n\nTry adding this code and see how the stars zoom towards you!","project_id":4565,"created_at":"2024-11-12T20:27:26.985845Z","output_tokens":null,"code_id":182820,"input_tokens":null,"id":89476},{"deleted":0,"sender":"human","message":"make it go faster when i move my mouse to the right","project_id":4565,"created_at":"2024-11-12T20:28:12.876769Z","output_tokens":null,"code_id":182830,"input_tokens":null,"id":89477},{"deleted":0,"sender":"ai","message":"Alright! To make the stars zoom faster when you move your mouse to the right, we can adjust the speed based on the mouse's x-position. We'll modify the `update` method in the `Star` class to increase the speed depending on where the mouse is located.\n\nFirst, let's add a new variable to control the speed and then modify the `update` method accordingly.\n\nHere’s how you can do it:\n\n1. Add a global variable for speed at the top of your `script.js`:\n\n```javascript\nlet speed = 10; // Base speed of the stars\n```\n\n2. Update the `update` method in the `Star` class to use the mouse's x-position to change the speed:\n\n```javascript\nupdate() {\n this.z = this.z - speed; // Speed of the star\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 // Adjust speed based on mouse position\n speed = map(mouseX, 0, width, 10, 50); // Maps mouseX to a speed range\n}\n```\n\n### Changes to the Code:\n- **Global Speed Variable**: This sets a base speed for the stars.\n- **Speed Adjustment**: The `speed` variable is adjusted based on the mouse's x-position. As you move your mouse to the right, the stars will zoom faster.\n\nMake these changes in your `script.js`, and you should see the stars zooming faster when you move the mouse to the right!","project_id":4565,"created_at":"2024-11-12T20:28:12.885426Z","output_tokens":null,"code_id":182830,"input_tokens":null,"id":89478}],"assets":[],"messages_sent":5,"comments":[],"steps":[]}