## Hyperspace Function Visualizer - A web-based tool for interactively creating and visualizing 3D parametric surfaces using JavaScript code. - Title: ∞ HYPERSPACE - Runs within the Abacus.ai ChatLLM application. ## User Interface & Core Functionality - **Main Layout:** - A top bar for global settings. - A resizable left panel with tabs for code, parameters, settings, and presets. - A main canvas area for 3D rendering. - **Top Bar Controls:** - **▶ Run (Ctrl+Enter):** Compiles and executes the user-provided code to generate the mesh. - **▶ Animate t:** Toggles time-based animation of the 't' parameter. - **Coord System:** Dropdown for coordinate systems. - Cartesian (xyz) (default) - Spherical (r,θ,φ) - Cylindrical (r,θ,z) - **Color Mode:** Dropdown for color processing. - RGB (default) - HSV - **Resolution:** Dropdown for mesh resolution. - 32 - 64 (default) - 128 - 256 - **Wireframe:** Toggles a wireframe overlay. - **Share URL:** Generates a shareable URL containing the current state (code, parameters). - **Canvas Area:** - Displays the 3D rendered object. - Powered by `three.js`. - **Controls:** - Drag: Rotate - Scroll: Zoom - Right-drag: Pan - Includes an FPS counter and an info overlay. ## Left Panel Tabs - **Code Tab:** - **Function Definition:** A text area for user-provided JavaScript code. - **Inputs:** An `input` object containing `u`, `v` (spatial), `t` (time), built-in math functions (`m`), and any user-defined extra parameters. - **Outputs:** An object with `x, y, z` for position and `r, g, b, a` for color (values 0-1). - **Default Code:** Generates a colorful torus knot. - `p = 3`, `q = 2` - `r = Math.cos(q * u) + 2` - `x = r * Math.cos(p * u)` - `y = r * Math.sin(p * u)` - `z = -Math.sin(q * u)` - **Error Box:** Displays compile or runtime errors from the user's code. - **Share Box:** Displays a generated shareable URL. - **Params Tab:** - **Spatial Parameters:** - **u range:** Min/Max values (default: -3.14159 to 3.14159). - **v range:** Min/Max values (default: -3.14159 to 3.14159). - **Time Parameter (t):** - **t slider:** Controls the time variable (default range: 0 to 6.2832). - **t speed:** Controls animation speed (default range: 0.1 to 5, default value: 1). - **Extra Parameters:** - Ability to add custom named parameters with min/max values. - These parameters are passed into the `input` object for the user's code. - **Settings Tab:** - **Rendering:** - Wireframe overlay (checkbox) - Double-sided surface (checkbox, checked by default) - Vertex colors (checkbox, checked by default) - Flat shading (checkbox) - Background color (color picker, default: `#05050f`) - **Camera:** - FOV (Field of View): number input, default 60. - Auto-rotate (checkbox) - **Export:** - Save Screenshot (PNG) button. - **Zoo Tab:** - **Mathematical Zoo:** A grid of preset functions. - Clicking an item loads its code and parameter ranges into the editor. - **Available Presets:** - Torus Knot: "p=3,q=2 knot" - Sphere: "Parametric UV sphere" - Torus: "Classic donut" - Klein Bottle: "Non-orientable surface" - Möbius Strip: "One-sided surface" - Shell: "Seashell spiral" - Hypersphere Slice: "4D sphere cross-section" - Wave Surface: "Animated 2D waves" - Trefoil Knot: "3-lobed knot" - Boy's Surface: "Projective plane immersion" - Dini's Surface: "Constant neg. curvature" - Lissajous 3D: "3D Lissajous figure" - Fractal Flower: "Blooming over time" - Perceptron: "Neural net surface" - Hyperboloid: "Ruled quadric surface" - Ocean Planet: "Animated ocean world" ## Technical Details - **Frontend Library:** `three.js` (r128) for WebGL rendering. - **Code Execution:** User code is evaluated via `new Function('input', code)`. - **Math Helpers:** A built-in math object `m` is available in the function scope, providing standard functions (`sin`, `cos`, `sqrt`, `pow`, etc.) and helpers like `clamp`, `lerp`, `smoothstep`. - **State Management:** The tool can encode its state (code, ranges, settings) into a Base64 string appended to the URL for sharing and persistence.

Hyperspace Function Visualizer A web-based tool for interactively creating and visualizing 3D parametric surfaces using JavaScript code. Title: ∞ HYPERSPACE Runs within the Abacus.ai ChatLLM application. User Interface & Core Functionality Main Layout: A top bar for global settings. A resizable left panel with tabs for code, parameters, settings, and presets. A main canvas area for 3D rendering. Top Bar Controls: ▶ Run (Ctrl+Enter): Compiles and executes the user-provided code to generate the mesh. ▶ Animate t: Toggles time-based animation of the 't' parameter. Coord System: Dropdown for coordinate systems. Cartesian (xyz) (default) Spherical (r,θ,φ) Cylindrical (r,θ,z) Color Mode: Dropdown for color processing. RGB (default) HSV Resolution: Dropdown for mesh resolution. 32 64 (default) 128 256 Wireframe: Toggles a wireframe overlay. Share URL: Generates a shareable URL containing the current state (code, parameters). Canvas Area: Displays the 3D rendered object. Powered by three.js. Controls: Drag: Rotate Scroll: Zoom Right-drag: Pan Includes an FPS counter and an info overlay. Left Panel Tabs Code Tab: Function Definition: A text area for user-provided JavaScript code. Inputs: An input object containing u, v (spatial), t (time), built-in math functions (m), and any user-defined extra parameters. Outputs: An object with x, y, z for position and r, g, b, a for color (values 0-1). Default Code: Generates a colorful torus knot. p = 3, q = 2 r = Math.cos(q * u) + 2 x = r * Math.cos(p * u) y = r * Math.sin(p * u) z = -Math.sin(q * u) Error Box: Displays compile or runtime errors from the user's code. Share Box: Displays a generated shareable URL. Params Tab: Spatial Parameters: u range: Min/Max values (default: -3.14159 to 3.14159). v range: Min/Max values (default: -3.14159 to 3.14159). Time Parameter (t): t slider: Controls the time variable (default range: 0 to 6.2832). t speed: Controls animation speed (default range: 0.1 to 5, default value: 1). Extra Parameters: Ability to add custom named parameters with min/max values. These parameters are passed into the input object for the user's code. Settings Tab: Rendering: Wireframe overlay (checkbox) Double-sided surface (checkbox, checked by default) Vertex colors (checkbox, checked by default) Flat shading (checkbox) Background color (color picker, default: #05050f) Camera: FOV (Field of View): number input, default 60. Auto-rotate (checkbox) Export: Save Screenshot (PNG) button. Zoo Tab: Mathematical Zoo: A grid of preset functions. Clicking an item loads its code and parameter ranges into the editor. Available Presets: Torus Knot: "p=3,q=2 knot" Sphere: "Parametric UV sphere" Torus: "Classic donut" Klein Bottle: "Non-orientable surface" Möbius Strip: "One-sided surface" Shell: "Seashell spiral" Hypersphere Slice: "4D sphere cross-section" Wave Surface: "Animated 2D waves" Trefoil Knot: "3-lobed knot" Boy's Surface: "Projective plane immersion" Dini's Surface: "Constant neg. curvature" Lissajous 3D: "3D Lissajous figure" Fractal Flower: "Blooming over time" Perceptron: "Neural net surface" Hyperboloid: "Ruled quadric surface" Ocean Planet: "Animated ocean world" Technical Details Frontend Library: three.js (r128) for WebGL rendering. Code Execution: User code is evaluated via new Function('input', code). Math Helpers: A built-in math object m is available in the function scope, providing standard functions (sin, cos, sqrt, pow, etc.) and helpers like clamp, lerp, smoothstep. State Management: The tool can encode its state (code, ranges, settings) into a Base64 string appended to the URL for sharing and persistence.