Zooming Space Adventure

{"name":"Zooming Space Adventure","description":"Embark on a mesmerizing journey through the cosmos, where you can explore the wonders of space and witness the breathtaking star zoom effect. Zooming Space Adventure is an interactive experience that will leave you in awe as you navigate through the mesmerizing celestial spectacle.","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-04-22T17:48:40.367872Z","updated_at":"2024-04-22T17:48:40.367873Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":1246,"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 = [];\nconst numStars = 800;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n for (let i = 0; i < numStars; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0);\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 this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n this.pz = this.z;\n }\n\nupdate() {\n let speed = map(dist(mouseX, mouseY, width / 2, height / 2), 0, width / 2, 5, 50);\n this.z = this.z - speed;\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 const sx = map(this.x / this.z, 0, 1, 0, width);\n const sy = map(this.y / this.z, 0, 1, 0, height);\n\n const r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n const px = map(this.x / this.pz, 0, 1, 0, width);\n const py = map(this.y / this.pz, 0, 1, 0, height);\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 Zooming Space Adventure\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"Let's get started!","project_id":1246,"created_at":"2024-04-22T17:48:59.423063Z","output_tokens":null,"code_id":69734,"input_tokens":null,"id":37507},{"deleted":0,"sender":"ai","message":"To implement a visually captivating star zoom effect, we will create an array of stars and simulate movement towards them. This effect will create the illusion of depth and movement in the space scene. Let's start by defining a class for the stars and then update the `setup` and `draw` functions to include the star zoom effect.\n\nFirst, we need to define the star class. Add this code to your `script.js`:\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 - 20;\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 const sx = map(this.x / this.z, 0, 1, 0, width);\n const sy = map(this.y / this.z, 0, 1, 0, height);\n\n const r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n\n const px = map(this.x / this.pz, 0, 1, 0, width);\n const py = map(this.y / this.pz, 0, 1, 0, height);\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n- This class creates stars with random positions and sizes.\n- The `update` method moves the stars towards the viewer, creating the zoom effect, and resets them once they \"pass\" the viewer.\n- The `show` method draws the stars and their trails, enhancing the feeling of movement.\n\nNext, we'll update the `setup` and `draw` functions to use this Star class:\n\n```javascript\nlet stars = [];\nconst numStars = 800;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < numStars; i++) {\n stars[i] = new Star();\n }\n}\n```\n\n- This initializes a canvas and creates an array of stars to be displayed.\n\n```javascript\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n- The `draw` function repeatedly clears the canvas and redraws the stars, creating an animation.\n- `translate(width / 2, height / 2)` centers the zoom effect on the canvas, making the stars appear to come from the center of the screen.\n\nWith these changes, you'll have a basic star zoom effect that gives the impression of flying through space!","project_id":1246,"created_at":"2024-04-22T17:48:59.429146Z","output_tokens":null,"code_id":69734,"input_tokens":null,"id":37508},{"deleted":0,"sender":"human","message":"can we make it so the star speed depends on my mouse position","project_id":1246,"created_at":"2024-04-22T17:50:43.198071Z","output_tokens":null,"code_id":69738,"input_tokens":null,"id":37509},{"deleted":0,"sender":"ai","message":"To make the star speed depend on the mouse position, we'll modify the `Star` class's `update` method. We'll calculate the speed based on the mouse's distance from the center of the screen. The further the mouse is from the center, the faster the stars will move. Let's adjust the `update` method in the `Star` class:\n\n```javascript\nupdate() {\n let speed = map(dist(mouseX, mouseY, width / 2, height / 2), 0, width / 2, 5, 50);\n this.z = this.z - speed;\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\n- `speed` is determined by the distance between the mouse and the center of the screen, ranging from slow (5) to fast (50).\n- We use `dist(mouseX, mouseY, width / 2, height / 2)` to find the distance from the mouse to the screen's center.\n- The `map` function then scales this distance to a useful range of speeds.\n- The stars' `z` position is decreased by this `speed` value, adjusting how quickly they appear to move towards the viewer.\n\nWith this update, the stars' speed will dynamically change based on the mouse position, enhancing the interactive aspect of your Zooming Space Adventure.","project_id":1246,"created_at":"2024-04-22T17:50:43.204976Z","output_tokens":null,"code_id":69738,"input_tokens":null,"id":37510}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"instruction":"Implement a visually captivating star zoom effect that gives the impression of depth and movement in the space scene.","title":"Create mesmerizing star zoom effect","created_at":"2024-04-22T17:48:40.375039","project_id":1246,"step_number":0,"complete":false,"updated_at":"2024-04-22T17:48:40.375042","id":6584},{"instruction":"Generate a dynamic array of stars with varying sizes and colors to enhance the visual appeal of the space scene.","title":"Dynamic star generation","created_at":"2024-04-22T17:48:40.375115","project_id":1246,"step_number":1,"complete":false,"updated_at":"2024-04-22T17:48:40.375115","id":6585}]}