Hyperstellar Zoom

{"name":"Hyperstellar Zoom","description":"Experience the exhilarating sensation of traveling through space at warp speed as the stars zoom towards you in Hyperstellar Zoom!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-04-19T02:27:25.084067Z","updated_at":"2024-04-19T02:27:25.084068Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":1220,"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 stars = Array(800).fill().map(() => new Star());\n}\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n let speed = map(mouseX, 0, width, 0, 50);\n stars.forEach(star => {\n star.update(speed);\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(speed) {\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 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 let 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\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 Hyperstellar Zoom\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"Let's get started!","project_id":1220,"created_at":"2024-04-19T02:27:27.405735Z","output_tokens":null,"code_id":68765,"input_tokens":null,"id":37101},{"deleted":0,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n stars = Array(800).fill().map(() => new Star());\n}\n```\n\n- Initializes a canvas that fills the whole window.\n- Creates an array of 800 `Star` objects to represent the stars in the star field.\n\n```javascript\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n stars.forEach(star => {\n star.update();\n star.show();\n });\n}\n```\n\n- Sets the background to black (`0`) for the space effect.\n- Moves the origin point to the center of the canvas to simulate movement towards the player.\n- Updates and displays each star in the `stars` array.\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 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 let 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\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n- Defines a `Star` class to create and manage properties and behaviors of each star.\n- Randomly places stars across the canvas and gives them a pseudo-3D movement effect towards the viewer.\n- Stars reset to a new position once they move past the viewer, creating a continuous flow of stars.\n- Draws each star as a circle and adds a tail effect to simulate motion blur as they move.","project_id":1220,"created_at":"2024-04-19T02:27:27.412799Z","output_tokens":null,"code_id":68765,"input_tokens":null,"id":37102},{"deleted":0,"sender":"human","message":"let's make it so the speed of the stars depends on my mouse position","project_id":1220,"created_at":"2024-04-19T02:28:40.935359Z","output_tokens":null,"code_id":68769,"input_tokens":null,"id":37103},{"deleted":0,"sender":"ai","message":"```javascript\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n let speed = map(mouseX, 0, width, 0, 50);\n stars.forEach(star => {\n star.update(speed);\n star.show();\n });\n}\n```\n\n- Modifies the `draw` function to calculate the speed of stars based on the mouse's X position.\n- The speed is determined using the `map` function, which converts the range of the mouse's X position (from 0 to the width of the canvas) to a new range (0 to 50).\n\n```javascript\nupdate(speed) {\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\n- Adjusts the `update` method in the `Star` class to accept a `speed` parameter.\n- Decreases the star's `z` position by the value of `speed`, making the stars move towards the viewer at a rate dependent on the mouse's X position.","project_id":1220,"created_at":"2024-04-19T02:28:40.948922Z","output_tokens":null,"code_id":68769,"input_tokens":null,"id":37104}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"instruction":"Create a dynamic star field in the background that moves towards the player's perspective.","title":"Dynamic Star Field","created_at":"2024-04-19T02:27:25.093339","project_id":1220,"step_number":0,"complete":false,"updated_at":"2024-04-19T02:27:25.093341","id":6427},{"instruction":"Implement a hyperdrive effect that can be activated by user input, causing the stars to zoom towards the player at high speed.","title":"Hyperdrive Effect","created_at":"2024-04-19T02:27:25.093420","project_id":1220,"step_number":1,"complete":false,"updated_at":"2024-04-19T02:27:25.093421","id":6428}]}