Hyperspace Zoom

{"name":"Hyperspace Zoom","description":"Experience the thrill of hyperspace with zooming stars in this interactive web experience inspired by Star Wars.","photo":null,"view_count":9,"fork_count":0,"expires_at":null,"created_at":"2024-02-29T03:00:32.994726Z","updated_at":"2024-02-29T03:00:32.994727Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":747,"user":{"username":"nebwinters","id":1,"password_hash":null,"created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null,"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let stars = [];\nlet speed;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n speed = 0;\n}\n\nfunction draw() {\n speed = map(mouseX, 0, width, 0, 50);\n background(0);\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update(speed);\n stars[i].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 this.hue = random(360);\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 this.hue = random(360);\n }\n this.hue += 1;\n if (this.hue > 360) {\n this.hue = 0;\n }\n }\n\n show() {\n fill(this.hue, 255, 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 this.pz = this.z;\n\n stroke(this.hue, 255, 255);\n line(px, py, sx, sy);\n }\n}","style.css":"","index.html":"\n\n\n \n \n Hyperspace Zoom\n \n\n\n \n \n\n"},"chat_history":[{"code_id":46469,"sender":"human","deleted":0,"input_tokens":null,"id":25626,"message":"Let's get started!","project_id":747,"created_at":"2024-02-29T03:00:42.810497Z","output_tokens":null},{"code_id":46469,"sender":"ai","deleted":0,"input_tokens":null,"id":25627,"message":"Absolutely, let's dive in! To create a zooming stars effect, we first need to establish a star field. I'll guide you through creating and animating stars to simulate moving through space at varying speeds. We'll start by defining our stars, and then we'll create functionality to adjust their speed, giving the illusion of moving faster or slower through hyperspace.\n\nFirstly, we need to set up an array of stars and give each star random positions. We'll also need a function to move these stars towards the viewer to create the zooming effect. Let's start by defining a `Star` class and initializing an array of stars in our `setup` function. \n\n### Step 1: Define 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(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 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 this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy);\n }\n}\n```\n\n- The `Star` class defines a star with random initial positions (`x`, `y`) and a depth (`z`) which determines how close it is to the viewer.\n- The `update` method moves the star closer to the viewer, resetting its position if it moves past the viewer (creating a continuous flow of stars).\n- The `show` method maps the star's position to a 2D screen position and draws it, including a simple effect to simulate motion.\n\n### Step 2: Initialize Stars and Implement Animation\n\nNow, let's initialize our stars in the `setup` function and create a draw loop to animate them.\n\n```javascript\nlet stars = [];\nlet speed;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n speed = 0;\n}\n\nfunction draw() {\n speed = map(mouseX, 0, width, 0, 50);\n background(0);\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update(speed);\n stars[i].show();\n }\n}\n```\n\n- We define an array `stars` to hold our star objects and a variable `speed` to control their movement speed.\n- In `setup`, we fill the `stars` array with instances of `Star`, setting the canvas to fullscreen and initializing our speed to 0.\n- The `draw` function constantly updates and shows each star. The speed of the stars is mapped to the mouse's X position, allowing for dynamic control of the zoom effect.\n\nWith these steps, you've created a basic interactive hyperspace effect! You can adjust the speed of the stars by moving your mouse horizontally across the screen.","project_id":747,"created_at":"2024-02-29T03:00:42.816879Z","output_tokens":null},{"code_id":46472,"sender":"human","deleted":0,"input_tokens":null,"id":25628,"message":"can we make the stars rotate through different colors?","project_id":747,"created_at":"2024-02-29T03:01:55.796751Z","output_tokens":null},{"code_id":46472,"sender":"ai","deleted":0,"input_tokens":null,"id":25629,"message":"Yes, we can add color to the stars and make them rotate through different colors to make the animation more dynamic and visually appealing. We'll modify the `Star` class to include color properties and adjust the `show` method to use these colors when drawing the stars. \n\nLet's add a color property to the `Star` class and update the `show` method to change the star's color over time using the HSB (Hue, Saturation, Brightness) color mode for easy color cycling.\n\n### Step 1: Initialize Color Mode in Setup\n\nFirst, ensure the color mode is set to HSB in the `setup` function. This change allows us to easily cycle through hues for our stars.\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n speed = 0;\n}\n```\n\n- `colorMode(HSB)` sets the color mode to HSB, making it easier to cycle through colors by changing the hue value.\n\n### Step 2: Update the Star Class\n\nNext, we'll add a hue property to the `Star` class and update the `show` method to use this property. The hue will change as the star updates, creating a color rotation effect.\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 this.hue = random(360);\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 this.hue = random(360);\n }\n this.hue += 1;\n if (this.hue > 360) {\n this.hue = 0;\n }\n }\n\n show() {\n fill(this.hue, 255, 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 this.pz = this.z;\n\n stroke(this.hue, 255, 255);\n line(px, py, sx, sy);\n }\n}\n```\n\n- A new `hue` property is added in the constructor, initialized to a random value between 0 and 360 (the range of hues in HSB color mode).\n- In the `update` method, `this.hue` is incremented to slowly change the star's color over time. If `this.hue` exceeds 360, it resets to 0, creating a looping color effect.\n- The `show` method now uses `this.hue` for the star's fill and stroke colors, creating vibrant, changing colors for the stars.\n\nThese adjustments will make the stars rotate through different colors as they move, adding a captivating visual element to your hyperspace effect.","project_id":747,"created_at":"2024-02-29T03:01:55.803386Z","output_tokens":null}],"assets":[],"messages_sent":2,"comments":[],"steps":[{"title":"Customizable Speed","instruction":"Adjust the speed of the zooming stars to create your desired hyperspace effect.","created_at":"2024-02-29T03:00:33.006712","project_id":747,"step_number":0,"complete":false,"updated_at":"2024-02-29T03:00:33.006714","id":3923},{"title":"Dynamic Starfield Generation","instruction":"Create a dynamic starfield that continuously generates new stars to maintain the illusion of hyperspace travel.","created_at":"2024-02-29T03:00:33.006797","project_id":747,"step_number":1,"complete":false,"updated_at":"2024-02-29T03:00:33.006798","id":3924}]}