Hyperdrive Starfield

{"name":"Hyperdrive Starfield","description":"Experience the thrill of a hyperspace jump as stars zoom towards you in this mesmerizing Star Wars-inspired screen.","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-04-04T21:45:31.798955Z","updated_at":"2024-04-04T21:45:31.798956Z","user_id":59,"status":"PRIVATE","parent_id":null,"id":1049,"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 = [];\nlet numStars = 800;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < numStars; i++) {\n stars.push(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 }\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 }\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}","style.css":"","index.html":"\n\n\n \n \n Hyperdrive Starfield\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"code_id":60516,"input_tokens":null,"id":33388,"project_id":1049,"sender":"human","message":"Let's get started!","created_at":"2024-04-04T21:45:37.936007Z","output_tokens":null},{"deleted":0,"code_id":60516,"input_tokens":null,"id":33389,"project_id":1049,"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 }\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 }\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}\n```\n\n- This `Star` class represents each star in the hyperspace animation. Each star has a random starting position (`x`, `y`) and a depth (`z`) which simulates how far away it is.\n- The `update` method moves the star closer to the viewer by reducing its `z` value. If a star moves past the viewer (when `z` < 1), it is reset to a new position at the far end of the field.\n- The `show` method draws the star on the canvas. It uses the `map` function to calculate the star's screen position (`sx`, `sy`) and size (`r`) based on its `z` value, creating the illusion of movement towards the viewer. The closer the star, the bigger it appears.","created_at":"2024-04-04T21:45:37.942469Z","output_tokens":null},{"deleted":0,"code_id":60518,"input_tokens":null,"id":33390,"project_id":1049,"sender":"human","message":"I don't see anything","created_at":"2024-04-04T21:46:13.574042Z","output_tokens":null},{"deleted":0,"code_id":60518,"input_tokens":null,"id":33391,"project_id":1049,"sender":"ai","message":"```javascript\nlet stars = [];\nlet numStars = 800;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < numStars; i++) {\n stars.push(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```\n\n- The `setup` function now initializes an array `stars` with 800 `Star` objects, creating multiple stars for the animation.\n- The `draw` function is introduced, which continuously renders the stars on the canvas. It first sets the background to black (`background(0)`) to clear previous frames, creating the illusion of movement.\n- `translate(width / 2, height / 2)` shifts the origin to the center of the canvas, so the stars move towards the center of the screen, enhancing the hyperspace jump effect.\n- Each star in the `stars` array is updated and drawn every frame, creating dynamic animation as they move towards the viewer.","created_at":"2024-04-04T21:46:13.580070Z","output_tokens":null}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-04-04T21:45:31.805294","id":5297,"title":"Dynamic Star Animation","instruction":"Create a dynamic animation of stars zooming towards the viewer, giving the illusion of a hyperspace jump.","created_at":"2024-04-04T21:45:31.805292","project_id":1049}]}