Starry Night Sky

{"name":"Starry Night Sky","description":"Experience the mesmerizing beauty of shooting stars in a digital rendition of a starry night sky. Watch as the stars streak across the canvas in this captivating p5.js animation.","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-02-15T20:28:29.446242Z","updated_at":"2024-02-15T20:28:36.121365Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":639,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"var stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n for (var i = 0; i < 1000; i++) {\n stars[i] = new Star();\n }\n orbitControl();\n}\nfunction draw() {\n background(0, 0, 30);\n for (var i = 0; i < stars.length; i++) {\n stars[i].move();\n stars[i].draw();\n }\n orbitControl();\n\n}\nfunction Star() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(-width, width);\n this.speed = 0;\n this.size = 0;\n this.life = random(50, 100);\n}\nStar.prototype.move = function () {\n this.speed = map(this.z, 0, width, 4, 0);\n this.x += this.speed;\n this.y += this.speed;\n this.z -= this.speed;\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.life = random(50, 100);\n }\n this.life--;\n}\n\nStar.prototype.draw = function () {\n push();\n translate(this.x, this.y, this.z);\n this.size = map(this.z, 0, width, 16, 0);\n if (this.life > 0) {\n stroke(255);\n point(0, 0);\n } else {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(-width, width);\n this.life = random(50, 100);\n }\n pop();\n}","style.css":"","index.html":"\n\n\n\n \n \n Starry Night Sky\n \n \n \n \n\n\n\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":39782,"input_tokens":null,"id":22368,"project_id":639,"sender":"human","message":"recode the whole thing to be 3d with p5js orbitcontrols","created_at":"2024-02-15T20:34:47.797485Z","output_tokens":null},{"deleted":0,"code_id":39782,"input_tokens":null,"id":22369,"project_id":639,"sender":"ai","message":"Let's start by adding the necessary libraries for 3D rendering and controls:\n\nindex_html:\n```html\n\n\n\n\n \n \n Starry Night Sky\n \n \n \n \n\n\n\n \n\n\n\n```\n\nNext, we'll modify the setup function to create a 3D canvas and enable Orbit Controls:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n for (var i = 0; i < 100; i++) {\n stars[i] = new Star();\n }\n orbitControl();\n}\n```\n\n- `createCanvas(windowWidth, windowHeight, WEBGL);` creates a 3D canvas.\n- `orbitControl();` enables the orbit controls which allows you to navigate in 3D using the mouse.\n\nWe need to modify the Star object to have 3D coordinates:\n\n```javascript\nfunction Star() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(-width, width);\n this.speed = 0;\n this.size = 0;\n this.life = random(50, 100);\n}\n```\n\n- We're now generating random coordinates in 3D space.\n\nWe also need to adjust the `move` and `draw` functions to reflect the 3D nature of the stars:\n\n```javascript\nStar.prototype.move = function () {\n this.speed = map(this.z, 0, width, 4, 0);\n this.x += this.speed;\n this.y += this.speed;\n this.z -= this.speed;\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.life = random(50, 100);\n }\n this.life--;\n}\n\nStar.prototype.draw = function () {\n push();\n translate(this.x, this.y, this.z);\n this.size = map(this.z, 0, width, 16, 0);\n if (this.life > 0) {\n stroke(255);\n point(0, 0);\n } else {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(-width, width);\n this.life = random(50, 100);\n }\n pop();\n}\n```\n\n- The `move` function now updates the star's position in 3D space.\n- The `draw` function uses `push()` and `pop()` to isolate transformations and prevent them from affecting other objects. It uses `translate()` to move the drawing context to the star's position and `point(0, 0)` to draw the star at the translated position.\n- The star is reset to a new random position in 3D space when its life reaches 0. \n\nFinally, we will modify the `draw` function to clear the background and draw all the stars:\n\n```javascript\nfunction draw() {\n background(0, 0, 30);\n for (var i = 0; i < stars.length; i++) {\n stars[i].move();\n stars[i].draw();\n }\n}\n```\n\n- The `draw` function clears the background and then moves and draws all the stars.","created_at":"2024-02-15T20:34:47.802380Z","output_tokens":null}],"assets":[],"messages_sent":7,"comments":[],"steps":[{"title":"Animate shooting stars","step_number":1,"complete":false,"updated_at":"2024-02-15T20:28:29.451710","id":3469,"instruction":"Implement animation of shooting stars streaking across the night sky.","created_at":"2024-02-15T20:28:29.451709","project_id":639},{"title":"Twinkling effect","step_number":3,"complete":false,"updated_at":"2024-02-15T20:28:29.451836","id":3471,"instruction":"Add a subtle twinkling effect to the stars for a more realistic ambiance.","created_at":"2024-02-15T20:28:29.451835","project_id":639}]}