Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an interstellar journey with Hyperdrive Adventure! Navigate through vibrant galaxies and dodge obstacles while collecting stars for points. Use your skills to master the controls and aim for the highest score as you race through the cosmos!","photo":null,"view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-12-20T19:06:53.943081Z","updated_at":"2024-12-20T19:06:53.943082Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":5256,"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":"// Declare an array to hold the stars\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n\n // Create 800 stars\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0); // Set the background to black to simulate space\n\n // Update and display each star\n for (let i = 0; i < stars.length; i++) {\n let star = stars[i];\n star.z -= 10;\n\n if (star.z < 1) {\n star.z = width;\n star.x = random(-width, width);\n star.y = random(-height, height);\n star.pz = star.z;\n }\n\n fill(255);\n noStroke();\n\n let sx = map(star.x / star.z, 0, 1, 0, width);\n let sy = map(star.y / star.z, 0, 1, 0, height);\n\n let r = map(star.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n let px = map(star.x / star.pz, 0, 1, 0, width);\n let py = map(star.y / star.pz, 0, 1, 0, height);\n\n star.pz = star.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n\n// Star class to define properties and behavior of each star\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\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 build a hyperdrive","project_id":5256,"created_at":"2024-12-20T19:06:53.956042Z","output_tokens":null,"code_id":194533,"input_tokens":null,"id":97722},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":5256,"created_at":"2024-12-20T19:07:16.606992Z","output_tokens":null,"code_id":194534,"input_tokens":null,"id":97723},{"deleted":0,"sender":"ai","message":"Great! Could you tell me a bit more about your idea for the hyperdrive? Are you thinking of creating a game, a simulation, or something else? What kind of features or visuals do you have in mind for it?","project_id":5256,"created_at":"2024-12-20T19:07:16.614042Z","output_tokens":50,"code_id":194534,"input_tokens":2362,"id":97724},{"deleted":0,"sender":"human","message":"I want stars to zoom at me like star wars","project_id":5256,"created_at":"2024-12-20T19:07:25.454184Z","output_tokens":null,"code_id":194534,"input_tokens":null,"id":97725},{"deleted":0,"sender":"ai","message":"That sounds like a cool effect! We can create a starfield effect where stars zoom towards the screen, similar to the hyperspace effect in Star Wars. Let's get started on that.\n\nDo you have any specific preferences for how the stars should look or move? For example, do you want them to move faster or have different sizes?","project_id":5256,"created_at":"2024-12-20T19:07:25.461353Z","output_tokens":80,"code_id":194534,"input_tokens":2367,"id":97726},{"deleted":0,"sender":"human","message":"no lets just make them go fast!","project_id":5256,"created_at":"2024-12-20T19:07:33.466325Z","output_tokens":null,"code_id":194534,"input_tokens":null,"id":97727},{"deleted":0,"sender":"ai","message":"Alright, let's create a simple simulation where stars zoom towards you quickly, giving that hyperdrive effect. We'll use p5.js to create the stars and animate them.\n\nLet's start by setting up the stars. We'll create an array of stars and make them move towards the screen. I'll guide you through the process.\n\nFirst, we'll need to create a star class and initialize some stars. Let's add this to your `script.js`:\n\n```javascript\n// Declare an array to hold the stars\nlet stars = [];\n\n// Star class to define properties and behavior of each star\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```\n\nNow, let's initialize the stars in the `setup` function:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n\n // Create 800 stars\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n```\n\nNext, we'll update the `draw` function to animate the stars:\n\n```javascript\nfunction draw() {\n background(0); // Set the background to black to simulate space\n\n // Update and display each star\n for (let i = 0; i < stars.length; i++) {\n let star = stars[i];\n star.z -= 10;\n\n if (star.z < 1) {\n star.z = width;\n star.x = random(-width, width);\n star.y = random(-height, height);\n star.pz = star.z;\n }\n\n fill(255);\n noStroke();\n\n let sx = map(star.x / star.z, 0, 1, 0, width);\n let sy = map(star.y / star.z, 0, 1, 0, height);\n\n let r = map(star.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n let px = map(star.x / star.pz, 0, 1, 0, width);\n let py = map(star.y / star.pz, 0, 1, 0, height);\n\n star.pz = star.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n### How it works:\n- **Star Class**: Defines properties for each star, including position and depth.\n- **Setup Function**: Initializes stars and sets up the canvas.\n- **Draw Function**: Animates the stars by decreasing their depth, and redraws them each frame.\n\nTry replacing your existing `setup` and `draw` functions with these, and adding the `Star` class and `stars` array to your script. Let me know how it looks or if you have any questions!","project_id":5256,"created_at":"2024-12-20T19:07:33.473842Z","output_tokens":591,"code_id":194534,"input_tokens":2365,"id":97728}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}