Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on a thrilling journey through the cosmos with Hyperdrive Adventure! Pilot your spaceship, dodge asteroids, and collect stars as you zoom through the galaxy. With simple controls and engaging gameplay, you'll learn programming while creating an out-of-this-world experience!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-01-20T18:33:36.471877Z","updated_at":"2025-01-20T18:33:36.471879Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":5543,"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 < 3000; i++) {\n stars.push(new Star());\n }\n}\n\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2); // Center the origin\n\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 }\n\n update() {\n this.z -= 10; // Speed of stars\n\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\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}\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 want to build a hyperdrive","project_id":5543,"created_at":"2025-01-20T18:33:36.482779Z","output_tokens":null,"code_id":203752,"input_tokens":null,"id":103775},{"deleted":0,"sender":"client_script","message":"Let's get started!\n Errors:\n","project_id":5543,"created_at":"2025-01-20T18:33:40.814316Z","output_tokens":null,"code_id":203752,"input_tokens":null,"id":103776},{"deleted":0,"sender":"ai","message":"That sounds exciting! Could you tell me a bit more about your project? Are you thinking of creating a game, a website, an animation, or something else involving a hyperdrive? What specific features or elements do you want to include?","project_id":5543,"created_at":"2025-01-20T18:33:40.820634Z","output_tokens":58,"code_id":203752,"input_tokens":2490,"id":103777},{"deleted":0,"sender":"human","message":"I want stars to zoom at me like star wars","project_id":5543,"created_at":"2025-01-20T18:33:50.354484Z","output_tokens":null,"code_id":203753,"input_tokens":null,"id":103778},{"deleted":0,"sender":"ai","message":"That sounds like a fun project! We can definitely create a starfield effect where stars zoom towards you, similar to the hyperspace effect in Star Wars. \n\nTo get started, could you let me know how you imagine the stars to look? Should they be simple dots, or do you want to use emojis or something else for the stars? Also, do you want to control the speed of the stars with any input, like a key or mouse movement?","project_id":5543,"created_at":"2025-01-20T18:33:50.365800Z","output_tokens":103,"code_id":203753,"input_tokens":2495,"id":103779},{"deleted":0,"sender":"human","message":"no just make them zoom at me","project_id":5543,"created_at":"2025-01-20T18:33:57.323970Z","output_tokens":null,"code_id":203753,"input_tokens":null,"id":103780},{"deleted":0,"sender":"ai","message":"Great! Let's create a starfield effect where stars zoom towards you. We'll use simple dots for the stars. I'll guide you on how to set this up.\n\nFirst, we'll need to create a class to represent each star and manage their movement. Let's start by updating your `script.js` file to include the Star class and update the `setup()` and `draw()` functions to handle the starfield effect.\n\nPlease replace the existing code in `script.js` with the following:\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); // Center the origin\n\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 }\n\n update() {\n this.z -= 10; // Speed of stars\n\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\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}\n```\n\n### How it works:\n- **Star class**: Represents each star with properties for position and depth (`z`). The `update()` method moves the star closer, and the `show()` method draws it on the canvas.\n- **setup() function**: Initializes the canvas and creates an array of stars.\n- **draw() function**: Clears the canvas and updates and displays each star every frame. The stars appear to move towards the center, creating a zooming effect.\n\nLet me know if you have any questions or if there's anything else you'd like to add!","project_id":5543,"created_at":"2025-01-20T18:33:57.378997Z","output_tokens":495,"code_id":203753,"input_tokens":2492,"id":103781},{"deleted":0,"sender":"human","message":"more stars","project_id":5543,"created_at":"2025-01-20T18:34:33.026255Z","output_tokens":null,"code_id":203754,"input_tokens":null,"id":103782},{"deleted":0,"sender":"ai","message":"To add more stars to your hyperdrive effect, you can simply increase the number of stars created in the `setup()` function. \n\nCurrently, you have 100 stars. Let's increase that to 200. Please replace the following line in the `setup()` function of your `script.js`:\n\n```javascript\nfor (let i = 0; i < 100; i++) {\n```\n\nWith this line:\n\n```javascript\nfor (let i = 0; i < 200; i++) {\n```\n\n### Updated `setup()` function:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 200; i++) { // Increased the number of stars to 200\n stars.push(new Star());\n }\n}\n```\n\n### How it works:\n- This change simply increases the number of stars in the starfield, making the zooming effect more pronounced.\n\nLet me know how that looks or if there's anything else you'd like to adjust!","project_id":5543,"created_at":"2025-01-20T18:34:33.056443Z","output_tokens":206,"code_id":203754,"input_tokens":2721,"id":103783},{"deleted":0,"sender":"client_script","message":"","project_id":5543,"created_at":"2025-01-20T18:34:58.705536Z","output_tokens":null,"code_id":203755,"input_tokens":null,"id":103784},{"deleted":0,"sender":"human","message":"what about adding a womrhole","project_id":5543,"created_at":"2025-01-20T18:35:04.641941Z","output_tokens":null,"code_id":203755,"input_tokens":null,"id":103785},{"deleted":0,"sender":"ai","message":"Adding a wormhole effect sounds like a fantastic idea! We can create a visual effect that represents the wormhole in the center of your canvas while the stars zoom past.\n\nTo do this, we'll create a simple circle that represents the wormhole. We'll make it pulsate for a more dynamic effect. Let's add this to your `draw()` function.\n\nPlease update your `script.js` file by adding a function for the wormhole and calling it in the `draw()` function. Replace the existing `draw()` function with the following:\n\n```javascript\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2); // Center the origin\n\n for (let star of stars) {\n star.update();\n star.show();\n }\n \n drawWormhole(); // Call the function to draw the wormhole\n}\n\nfunction drawWormhole() {\n noFill();\n stroke(255);\n strokeWeight(4);\n \n // Pulsating effect\n let time = millis() * 0.005; // Get the time in milliseconds for animation\n let radius = map(sin(time), -1, 1, 50, 100); // Calculate radius based on sine wave\n\n ellipse(0, 0, radius, radius); // Draw the wormhole at the center\n}\n```\n\n### How it works:\n- **drawWormhole() function**: This function draws a pulsating circle (the wormhole) at the center of the canvas. The radius changes over time to create a pulsating effect.\n- **Updated draw() function**: The wormhole is drawn after updating and showing the stars, ensuring it appears on top.\n\nLet me know how this looks or if there are any other features you'd like to add!","project_id":5543,"created_at":"2025-01-20T18:35:04.648200Z","output_tokens":385,"code_id":203755,"input_tokens":2727,"id":103786}],"assets":[],"messages_sent":5,"comments":[],"steps":[]}