Space Warp Adventure

{"name":"Space Warp Adventure","description":"Embark on a thrilling space adventure as you zoom through a mesmerizing star field in this interactive web experience inspired by Star Wars. Control your spaceship with the arrow keys and feel the warp speed as the stars zoom towards you!","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-04-29T15:06:05.525285Z","updated_at":"2024-04-29T15:06:05.525287Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":1289,"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 = [];\nlet speed;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n speed = 20;\n}\n\nfunction draw() {\n background(0);\n speed = map(mouseX, 0, width, 0, 50);\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 - speed;\n if (this.z < 1) {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = width;\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n var sx = map(this.x / this.z, 0, 1, 0, width);\n var sy = map(this.y / this.z, 0, 1, 0, height);\n\n var r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n var px = map(this.x / this.pz, 0, 1, 0, width);\n var 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":"","index.html":"\n\n\n \n \n Space Warp Adventure\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"Let's get started!","project_id":1289,"created_at":"2024-04-29T15:06:11.794052Z","output_tokens":null,"code_id":72425,"input_tokens":null,"id":38919},{"deleted":0,"sender":"ai","message":"```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 - speed;\n if (this.z < 1) {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = width;\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255);\n noStroke();\n\n var sx = map(this.x / this.z, 0, 1, 0, width);\n var sy = map(this.y / this.z, 0, 1, 0, height);\n\n var r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n var px = map(this.x / this.pz, 0, 1, 0, width);\n var 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- This class represents each star in the star field. Stars are initialized with random positions and a depth (`z`) value.\n- The `update` method moves the star towards the viewer, simulating warp speed. When a star moves past the viewer, it's repositioned to a new random location.\n- The `show` method draws each star as an ellipse and creates a tail effect by drawing a line from its previous position to its current position, enhancing the warp speed visual.\n\n```javascript\nlet stars = [];\nlet speed;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n speed = 20;\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- Initializes an array of stars and sets the canvas size to fill the browser window.\n- In the `setup` function, it populates the `stars` array with instances of the `Star` class and sets the initial speed.\n- The `draw` function updates and displays all stars on the canvas. It shifts the origin to the center of the canvas and clears the background each frame, creating the illusion of moving through space.","project_id":1289,"created_at":"2024-04-29T15:06:11.800936Z","output_tokens":null,"code_id":72425,"input_tokens":null,"id":38920},{"deleted":0,"sender":"human","message":"lets make the speed of the stars based on my mouse position","project_id":1289,"created_at":"2024-04-29T15:07:05.873483Z","output_tokens":null,"code_id":72428,"input_tokens":null,"id":38921},{"deleted":0,"sender":"ai","message":"```javascript\nfunction draw() {\n background(0);\n speed = map(mouseX, 0, width, 0, 50);\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- `speed` is now dynamically set based on the `mouseX` position, using the `map` function to convert the range of the mouse's X position to a range of speeds.\n- As you move the mouse horizontally across the screen, the speed of the stars will change, allowing for interactive control of the scene's velocity.\n- This modification makes the star field's movement speed responsive to user input, enhancing the interactive experience.","project_id":1289,"created_at":"2024-04-29T15:07:05.890448Z","output_tokens":null,"code_id":72428,"input_tokens":null,"id":38922}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"instruction":"Implement a visually stunning star field as the backdrop for the space scene.","title":"Create a mesmerizing star field","created_at":"2024-04-29T15:06:05.531944","project_id":1289,"step_number":0,"complete":false,"updated_at":"2024-04-29T15:06:05.531945","id":6834},{"instruction":"Create the effect of stars zooming towards the user as they move through space, simulating warp speed.","title":"Implement star zoom effect","created_at":"2024-04-29T15:06:05.531999","project_id":1289,"step_number":1,"complete":false,"updated_at":"2024-04-29T15:06:05.532000","id":6835},{"instruction":"Create a dynamic visual effect to simulate the sensation of warp speed as the stars zoom towards the spaceship.","title":"Add warp speed effect","created_at":"2024-04-29T15:06:05.532040","project_id":1289,"step_number":2,"complete":false,"updated_at":"2024-04-29T15:06:05.532041","id":6836}]}