Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an intergalactic journey with Hyperdrive Adventure! Navigate through the cosmos as you dodge obstacles and collect star power-ups. Use your skills to master the hyperdrive engine and reach new galaxies. Get ready for a space race like no other!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-12T00:15:42.942226Z","updated_at":"2024-11-12T00:15:42.942227Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4538,"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); // Black background to simulate 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 // Position the star at random on the screen\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n this.z = random(windowWidth);\n }\n\n update() {\n // Move the star closer to the screen\n this.z -= 10;\n if (this.z < 1) {\n this.z = windowWidth;\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate the size and position of the star\n let sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n let sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n let r = map(this.z, 0, windowWidth, 16, 0);\n\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":[{"deleted":0,"sender":"human","message":"I wanna make a hyperdrive","project_id":4538,"created_at":"2024-11-12T00:15:42.953733Z","output_tokens":null,"code_id":182300,"input_tokens":null,"id":89225},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4538,"created_at":"2024-11-12T00:15:45.688538Z","output_tokens":null,"code_id":182300,"input_tokens":null,"id":89226},{"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, an animation, or something else? What do you imagine the hyperdrive doing?","project_id":4538,"created_at":"2024-11-12T00:15:45.694778Z","output_tokens":null,"code_id":182300,"input_tokens":null,"id":89227},{"deleted":0,"sender":"human","message":"I want stars to zoom at ame like star wars","project_id":4538,"created_at":"2024-11-12T00:15:56.049643Z","output_tokens":null,"code_id":182301,"input_tokens":null,"id":89228},{"deleted":0,"sender":"ai","message":"That sounds like a cool idea! We can create a starfield effect where stars zoom towards you, giving the impression of high-speed travel like in Star Wars. \n\nDo you have any specific ideas on how fast you want the stars to move, or how dense the starfield should be (i.e., how many stars you want on the screen)?","project_id":4538,"created_at":"2024-11-12T00:15:56.122882Z","output_tokens":null,"code_id":182301,"input_tokens":null,"id":89229},{"deleted":0,"sender":"human","message":"no lets go!","project_id":4538,"created_at":"2024-11-12T00:16:01.477624Z","output_tokens":null,"code_id":182301,"input_tokens":null,"id":89230},{"deleted":0,"sender":"ai","message":"Alright! Let's create a starfield effect where stars zoom towards you. We'll start by creating a class to represent each star and then add them to the screen. I'll guide you through the steps.\n\nFirst, let's add a class for the stars in your `script.js` file:\n\n```javascript\nclass Star {\n constructor() {\n // Position the star at random on the screen\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n this.z = random(windowWidth);\n }\n\n update() {\n // Move the star closer to the screen\n this.z -= 10;\n if (this.z < 1) {\n this.z = windowWidth;\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n // Calculate the size and position of the star\n let sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n let sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n let r = map(this.z, 0, windowWidth, 16, 0);\n\n ellipse(sx, sy, r, r);\n }\n}\n```\n\nNow, let's update the `setup` and `draw` functions to create and display these stars:\n\n```javascript\nlet 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); // Black background to simulate space\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n- **Star class**: Each star is positioned randomly on the screen and moves towards the viewer.\n- **update method**: Moves the star towards the viewer, resetting its position when it gets too close.\n- **show method**: Draws the star as a circle that gets larger as it comes closer.\n- **setup function**: Initializes 800 stars and sets the canvas size.\n- **draw function**: Continuously updates and displays stars, creating the zoom effect.","project_id":4538,"created_at":"2024-11-12T00:16:01.492437Z","output_tokens":null,"code_id":182301,"input_tokens":null,"id":89231}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}