Starship Galaxy Zoom

{"name":"Starship Galaxy Zoom","description":"Experience the thrill of intergalactic travel as you pilot your starship through a galaxy filled with zooming stars and challenging obstacles. Collect power-ups, avoid asteroids, and unlock new levels to become the ultimate space navigator!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-02-07T04:41:36.362881Z","updated_at":"2024-02-07T04:41:36.362881Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":569,"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":"function setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n}\n\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 speed = map(mouseX, 0, width, 0, 20);\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\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.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 var red = map(this.z, 0, width, 255, 0);\n var blue = map(this.z, 0, width, 0, 255);\n fill(red, 0, blue);\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 stroke(red, 0, blue);\n line(px, py, sx, sy);\n }\n}","style.css":"","index.html":"\n\n\n \n \n Starship Galaxy Zoom\n \n \n\n\n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"Let's get started!","project_id":569,"created_at":"2024-02-07T04:41:40.767125Z","output_tokens":null,"code_id":36169,"input_tokens":null,"id":20522},{"deleted":0,"sender":"ai","message":"Great! To start off, let's create a Star class which will generate the stars with random positions and sizes. We'll also add a method to this class to move the stars towards the spaceship. \n\nHere's the code for the Star class:\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 - 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 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 stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n- The `constructor()` method is executed when we create new objects from this class. It initializes the stars with random x, y, and z positions. The z position is used to simulate depth.\n- The `update()` method is used to move the stars. The speed of the stars is inversely proportional to their z position, simulating the zoom effect. If a star gets too close (z < 1), we reset its position.\n- The `show()` method is used to display the stars. We calculate the star's position on the screen (sx, sy) based on its 3D coordinates (x, y, z) and create an ellipse at that position. We also draw a line from the previous position (px, py) to the current one, creating a streak effect.","project_id":569,"created_at":"2024-02-07T04:41:40.772170Z","output_tokens":null,"code_id":36169,"input_tokens":null,"id":20523},{"deleted":0,"sender":"human","message":"I don't see anything yet","project_id":569,"created_at":"2024-02-07T04:42:39.189414Z","output_tokens":null,"code_id":36171,"input_tokens":null,"id":20524},{"deleted":0,"sender":"ai","message":"That's because we haven't yet implemented the part where we create and animate the stars. Let's create an array of stars and animate them.\n\nHere is the code to do that:\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 speed = map(mouseX, 0, width, 0, 20);\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- We first declare an array `stars[]`.\n- In the `setup()` function, we initialize the canvas and fill the `stars[]` array with Star objects.\n- The `draw()` function is a built-in p5.js function that is continuously called by default. In this function, we set the speed of the stars based on the x position of the mouse, clear the background, translate the origin to the center of the canvas, and then update and display each star.\n- The speed of the stars is controlled by the mouse's x position. The further to the right the mouse is, the faster the stars move. This gives the player control over the speed of the spaceship.","project_id":569,"created_at":"2024-02-07T04:42:39.194511Z","output_tokens":null,"code_id":36171,"input_tokens":null,"id":20525},{"deleted":0,"sender":"human","message":"okay now let's make them change colors ","project_id":569,"created_at":"2024-02-07T04:43:25.054111Z","output_tokens":null,"code_id":36173,"input_tokens":null,"id":20526},{"deleted":0,"sender":"ai","message":"Sure, we can add color to the stars. Let's modify the `show()` method in the `Star` class to change the fill color based on the star's z position. Stars further away will appear blue, while those closer will appear red.\n\n```javascript\nclass Star {\n //...\n\n show() {\n var red = map(this.z, 0, width, 255, 0);\n var blue = map(this.z, 0, width, 0, 255);\n fill(red, 0, blue);\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 stroke(red, 0, blue);\n line(px, py, sx, sy);\n }\n}\n```\n\n- We've added two new variables in the `show()` method: `red` and `blue`. We're using the `map()` function to map the star's z position to a color value between 0 and 255.\n- We then pass these color values to the `fill()` and `stroke()` functions. `fill()` sets the color used to fill shapes, and `stroke()` sets the color used to draw lines and borders around shapes. \n- With this, stars closer to the spaceship (smaller z) will appear red, while those further away (larger z) will appear blue.","project_id":569,"created_at":"2024-02-07T04:43:25.059580Z","output_tokens":null,"code_id":36173,"input_tokens":null,"id":20527}],"assets":[],"messages_sent":3,"comments":[],"steps":[{"instruction":"Create a visual effect where stars zoom towards the spaceship, similar to the effect seen in Star Wars.","title":"Zooming Stars","created_at":"2024-02-07T04:41:36.367996","project_id":569,"step_number":0,"complete":false,"updated_at":"2024-02-07T04:41:36.367998","id":3205}]}