Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Experience the thrill of a hyperdrive journey as stars zoom towards you in this interactive animation. Customize your speed and immerse yourself in the depths of space with Hyperdrive Adventure!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-02-08T20:27:37.631617Z","updated_at":"2024-02-08T20:27:37.631618Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":580,"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":"var stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (var i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n let speed = document.getElementById('speedControl').value;\n for (var i = 0; i < stars.length; i++) {\n stars[i].move(speed);\n stars[i].show();\n }\n}\n\nfunction Star() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n this.speed = random(1, 3);\n\n this.move = function(speed) {\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 }\n }\n\n this.show = function() {\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 var r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n }\n}","style.css":"/* Add CSS styles here */","index.html":"\n\n\n\n \n \n Hyperdrive Adventure\n \n\n\n\n

\n\n \n

\n \n \n\n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"Let's get started!","project_id":580,"created_at":"2024-02-08T20:27:43.711122Z","output_tokens":null,"code_id":36796,"input_tokens":null,"id":20894},{"deleted":0,"sender":"ai","message":"Let's first create a simple star object to be used in our animation. We'll use the p5.js library to handle our canvas and animation, as it is simple and intuitive to use. \n\n```javascript\nfunction Star() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n this.speed = random(1, 3);\n\n this.move = function(speed) {\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 }\n }\n\n this.show = function() {\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 var r = map(this.z, 0, width, 16, 0);\n ellipse(sx, sy, r, r);\n }\n}\n```\n\n- We create a new object \"Star\" with random x, y, and z coordinates. The z coordinate is used to simulate depth.\n- The `move` function is used to update the z-coordinate of the star, making it appear as if the star is moving towards the viewer. If the star has passed the viewer (z < 1), it gets reset to a new random position.\n- The `show` function is used to draw the star on the canvas. The x and y coordinates are mapped to create the illusion of perspective. The size of the star (r) is also dependent on its z-coordinate, making stars that are \"closer\" appear larger.\n- The `speed` attribute is a random value between 1 and 3 that will be used to control the speed of the star.","project_id":580,"created_at":"2024-02-08T20:27:43.715840Z","output_tokens":null,"code_id":36796,"input_tokens":null,"id":20895},{"deleted":0,"sender":"human","message":"I don't see any stars yet","project_id":580,"created_at":"2024-02-08T20:28:31.511013Z","output_tokens":null,"code_id":36800,"input_tokens":null,"id":20898},{"deleted":0,"sender":"ai","message":"We've defined the Star object, but we haven't created any stars or added them to our animation yet. Let's do that next.\n\n```javascript\nvar stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (var i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0);\n translate(width / 2, height / 2);\n let speed = document.getElementById('speedControl').value;\n for (var i = 0; i < stars.length; i++) {\n stars[i].move(speed);\n stars[i].show();\n }\n}\n```\n\n- We start by creating an array `stars` where we'll store all our Star objects.\n- In the `setup` function, we create a new Star object for each iteration of the loop and store it in the `stars` array.\n- In the `draw` function, which is called continuously by p5.js, we first fill the background with black color using the `background` function.\n- We then translate the origin (0, 0) to the center of the canvas using the `translate` function. This is because by default, the origin in p5.js is at the top left corner, but for our animation, it's more intuitive to have the origin at the center.\n- We then iterate through each Star in the `stars` array, update its position using the `move` function, and draw it on the canvas using the `show` function. The speed of the star is controlled by the value of the 'speedControl' input element.","project_id":580,"created_at":"2024-02-08T20:28:31.517071Z","output_tokens":null,"code_id":36800,"input_tokens":null,"id":20899}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"instruction":"Create an animation of stars zooming towards the viewer to simulate a hyperdrive effect.","title":"Dynamic Star Animation","created_at":"2024-02-08T20:27:37.636131","project_id":580,"step_number":0,"complete":false,"updated_at":"2024-02-08T20:27:37.636133","id":3248},{"instruction":"Use random star sizes and colors to create a more dynamic and visually appealing effect.","title":"Random Star Sizes and Colors","created_at":"2024-02-08T20:27:37.636214","project_id":580,"step_number":1,"complete":false,"updated_at":"2024-02-08T20:27:37.636216","id":3249},{"instruction":"Incorporate a speed control option to allow users to adjust the speed of the hyperdrive animation.","title":"Speed Control Option","created_at":"2024-02-08T20:27:37.636278","project_id":580,"step_number":2,"complete":false,"updated_at":"2024-02-08T20:27:37.636280","id":3250}]}