StarZoom: A Galactic Adventure

{"name":"StarZoom: A Galactic Adventure","description":"Experience the iconic Star Wars intro scene like never before! Watch in awe as stars zoom towards you while the classic text crawl sets the stage for an epic galactic adventure.","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-04-08T20:02:50.149796Z","updated_at":"2024-04-08T20:02:50.149797Z","user_id":59,"status":"PRIVATE","parent_id":null,"id":1086,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","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 background(0);\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\n update() {\n this.z = this.z - 20;\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 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 let px = map(this.x / this.pz, 0, 1, 0, width);\n let 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","style.css":"","index.html":"\n\n\n \n \n StarZoom: A Galactic Adventure\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"code_id":62322,"input_tokens":null,"id":34376,"project_id":1086,"sender":"human","message":"Let's get started!","created_at":"2024-04-08T20:02:52.910989Z","output_tokens":null},{"deleted":0,"code_id":62322,"input_tokens":null,"id":34377,"project_id":1086,"sender":"ai","message":"```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 background(0);\n}\n```\n- Initializes an array `stars` to hold the star objects.\n- In the `setup` function, the canvas size is set to the window's width and height, and the background is set to black.\n- A loop creates 800 instances of the `Star` class (which we will define next) and stores them in the `stars` array.\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- Clears the screen and sets the background to black every frame.\n- Translates the origin (0,0) to the center of the canvas, so the stars will appear to be coming from the center of the screen.\n- Loops through each star in the `stars` array, updating its position and then displaying it.\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.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 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 let px = map(this.x / this.pz, 0, 1, 0, width);\n let 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- Defines a `Star` class with methods for updating its position (`update`) and displaying itself (`show`).\n- Each star is given a random position in 3D space (`x`, `y`, `z`) upon creation. The `pz` property is used to store the star's previous z-position for drawing purposes.\n- The `update` method moves the star towards the viewer by decreasing its `z` value and resets its position when it moves past the viewer.\n- The `show` method calculates the star's position on the 2D canvas based on its 3D position and draws an ellipse representing the star, and a line showing its trail.","created_at":"2024-04-08T20:02:52.926236Z","output_tokens":null}],"assets":[],"messages_sent":1,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-04-08T20:02:50.155943","id":5527,"title":"Dynamic Star Animations","instruction":"Create stunning star animations that zoom towards the user","created_at":"2024-04-08T20:02:50.155941","project_id":1086}]}