Application Error

Failed to load the Higher Dimensional Geometry Visualizer.

Please try refreshing the page.

${error.message}

\n \n \n `, 500);\n }\n});\n\n// Legacy calculation endpoint - redirects to new routes\napp.post(\"/api/calculate\", async c => {\n try {\n const body = await c.req.json();\n const { operation, data } = body;\n\n // Redirect to appropriate new endpoint\n switch (operation) {\n case \"project4dto3d\":\n return c.redirect(\"/api/calculate/project-batch\", 307);\n case \"project5dto3d\":\n return c.redirect(\"/api/calculate/project-batch\", 307);\n case \"crosssection\":\n return c.redirect(\"/api/calculate/cross-section\", 307);\n default:\n return c.json({\n success: false,\n error: \"Unknown operation. Use specific endpoints: /api/calculate/shape4d, /api/calculate/shape5d, /api/calculate/cross-section, /api/calculate/project-batch\"\n }, 400);\n }\n } catch (error) {\n console.error(\"API calculation error:\", error);\n return c.json({\n success: false,\n error: \"Calculation failed\",\n details: error.message\n }, 500);\n }\n});\n\n// API endpoint for shape data\napp.get(\"/api/shapes/:dimension/:shape\", async c => {\n try {\n const dimension = parseInt(c.req.param(\"dimension\"));\n const shape = c.req.param(\"shape\");\n\n if (![4, 5].includes(dimension)) {\n return c.json({\n success: false,\n error: \"Invalid dimension. Only 4D and 5D are supported.\"\n }, 400);\n }\n\n // Return shape metadata\n const shapeData = {\n 4: {\n tesseract: {\n name: \"Tesseract (4D Cube)\",\n vertices: 16,\n edges: 32,\n faces: 24,\n cells: 8,\n description: \"The tesseract is the 4-dimensional analog of a cube.\",\n complexity: \"low\"\n },\n \"16-cell\": {\n name: \"16-Cell (4D Cross-polytope)\",\n vertices: 8,\n edges: 24,\n faces: 32,\n cells: 16,\n description: \"The 16-cell is the 4D analog of an octahedron.\",\n complexity: \"medium\"\n },\n \"600-cell\": {\n name: \"600-Cell\",\n vertices: 120,\n edges: 720,\n faces: 1200,\n cells: 600,\n description: \"The 600-cell is one of the six regular convex 4-polytopes.\",\n complexity: \"high\"\n },\n \"120-cell\": {\n name: \"120-Cell\",\n vertices: 600,\n edges: 1200,\n faces: 720,\n cells: 120,\n description: \"The 120-cell is the largest of the six regular convex 4-polytopes.\",\n complexity: \"very high\"\n }\n },\n 5: {\n penteract: {\n name: \"Penteract (5D Cube)\",\n vertices: 32,\n edges: 80,\n faces: 80,\n cells: 40,\n hypercells: 10,\n description: \"The penteract is the 5-dimensional hypercube.\",\n complexity: \"medium\"\n },\n \"5-simplex\": {\n name: \"5-Simplex (5D Tetrahedron)\",\n vertices: 6,\n edges: 15,\n faces: 20,\n cells: 15,\n hypercells: 6,\n description: \"The 5-simplex is the simplest regular polytope in 5D space.\",\n complexity: \"low\"\n },\n \"5-orthoplex\": {\n name: \"5-Orthoplex (5D Cross-polytope)\",\n vertices: 10,\n edges: 40,\n faces: 80,\n cells: 80,\n hypercells: 32,\n description: \"The 5-orthoplex is the 5D analog of an octahedron.\",\n complexity: \"medium\"\n },\n custom: {\n name: \"Custom 5D Shape\",\n vertices: \"variable\",\n edges: \"variable\",\n faces: \"variable\",\n cells: \"variable\",\n hypercells: \"variable\",\n description: \"User-defined 5D geometric shape.\",\n complexity: \"variable\"\n }\n }\n };\n\n const data = shapeData[dimension as keyof typeof shapeData]?.[shape as keyof typeof shapeData[4]];\n \n if (!data) {\n return c.json({\n success: false,\n error: \"Shape not found\"\n }, 404);\n }\n\n return c.json({\n success: true,\n shape: data\n });\n } catch (error) {\n console.error(\"Shape data error:\", error);\n return c.json({\n success: false,\n error: \"Failed to retrieve shape data\"\n }, 500);\n }\n});\n\n// Performance monitoring endpoint\napp.get(\"/api/performance\", c => {\n return c.json({\n success: true,\n performance: {\n serverTime: Date.now(),\n memoryUsage: \"Not available in this environment\",\n uptime: \"Not available in this environment\",\n recommendations: [\n \"Enable hardware acceleration in your browser\",\n \"Close other tabs to free up memory\",\n \"Use a modern browser with WebGL 2.0 support\",\n \"Reduce the number of visible elements for better performance\"\n ]\n }\n });\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n version: \"1.0.0\",\n features: {\n \"4d-geometry\": true,\n \"5d-geometry\": true,\n \"real-time-rendering\": true,\n \"cross-sections\": true,\n \"multiple-projections\": true\n }\n });\n});\n\n// Error handling for 404s\napp.notFound(c => {\n return c.html(`\n \n \n 404 - Not Found\n \n \n \n

404 - Page Not Found

The requested resource could not be found.

\n Return to Geometry Visualizer\n

\n \n \n `, 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[18,86],"c1f14f8e-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[18,75],"pulls","branches","forks","envVars",{"_82":26,"_188":26},"connections",{"_82":26,"_187":26},"unfilledCount","emptyCount",{"_33":164,"_13":18,"_73":88,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":388,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":389,"_17":390},{"_33":177,"_13":75,"_73":74,"_43":88,"_35":36,"_165":40,"_166":24,"_37":385,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":386,"_17":387},{"_33":378,"_13":379,"_73":380,"_43":74,"_35":36,"_165":40,"_166":24,"_37":381,"_39":26,"_76":243,"_168":382,"_78":30,"_169":-5,"_221":383,"_17":384},{"_33":173,"_13":86,"_73":85,"_43":88,"_35":36,"_165":40,"_166":24,"_37":375,"_39":26,"_76":87,"_168":175,"_78":30,"_169":-5,"_221":376,"_17":377},{"_33":371,"_13":301,"_73":296,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":372,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":373,"_17":374},{"_33":367,"_13":338,"_73":333,"_43":296,"_35":36,"_165":40,"_166":24,"_37":368,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":369,"_17":370},{"_33":360,"_13":361,"_73":362,"_43":333,"_35":36,"_165":40,"_166":24,"_37":363,"_39":26,"_76":243,"_168":364,"_78":30,"_169":-5,"_221":365,"_17":366},{"_33":353,"_13":354,"_73":355,"_43":333,"_35":36,"_165":40,"_166":24,"_37":356,"_39":26,"_76":243,"_168":357,"_78":30,"_169":-5,"_221":358,"_17":359},{"_33":346,"_13":347,"_73":348,"_43":333,"_35":36,"_165":40,"_166":24,"_37":349,"_39":26,"_76":243,"_168":350,"_78":30,"_169":-5,"_221":351,"_17":352},{"_33":339,"_13":340,"_73":341,"_43":333,"_35":36,"_165":40,"_166":24,"_37":342,"_39":26,"_76":243,"_168":343,"_78":30,"_169":-5,"_221":344,"_17":345},{"_33":330,"_13":331,"_73":332,"_43":333,"_35":36,"_165":40,"_166":24,"_37":334,"_39":26,"_76":243,"_168":335,"_78":30,"_169":-5,"_221":336,"_17":337},{"_33":323,"_13":324,"_73":325,"_43":296,"_35":36,"_165":40,"_166":24,"_37":326,"_39":26,"_76":243,"_168":327,"_78":30,"_169":-5,"_221":328,"_17":329},{"_33":316,"_13":317,"_73":318,"_43":296,"_35":36,"_165":40,"_166":24,"_37":319,"_39":26,"_76":21,"_168":320,"_78":30,"_169":-5,"_221":321,"_17":322},{"_33":309,"_13":310,"_73":311,"_43":296,"_35":36,"_165":40,"_166":24,"_37":312,"_39":26,"_76":243,"_168":313,"_78":30,"_169":-5,"_221":314,"_17":315},{"_33":302,"_13":303,"_73":304,"_43":296,"_35":36,"_165":40,"_166":24,"_37":305,"_39":26,"_76":243,"_168":306,"_78":30,"_169":-5,"_221":307,"_17":308},{"_33":293,"_13":294,"_73":295,"_43":296,"_35":36,"_165":40,"_166":24,"_37":297,"_39":26,"_76":21,"_168":298,"_78":30,"_169":-5,"_221":299,"_17":300},{"_33":289,"_13":247,"_73":241,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":290,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":291,"_17":292},{"_33":285,"_13":263,"_73":258,"_43":241,"_35":36,"_165":40,"_166":24,"_37":286,"_39":26,"_76":77,"_168":-5,"_78":30,"_169":-5,"_221":287,"_17":288},{"_33":278,"_13":279,"_73":280,"_43":258,"_35":36,"_165":40,"_166":24,"_37":281,"_39":26,"_76":243,"_168":282,"_78":30,"_169":-5,"_221":283,"_17":284},{"_33":271,"_13":272,"_73":273,"_43":258,"_35":36,"_165":40,"_166":24,"_37":274,"_39":26,"_76":243,"_168":275,"_78":30,"_169":-5,"_221":276,"_17":277},{"_33":264,"_13":265,"_73":266,"_43":258,"_35":36,"_165":40,"_166":24,"_37":267,"_39":26,"_76":243,"_168":268,"_78":30,"_169":-5,"_221":269,"_17":270},{"_33":255,"_13":256,"_73":257,"_43":258,"_35":36,"_165":40,"_166":24,"_37":259,"_39":26,"_76":243,"_168":260,"_78":30,"_169":-5,"_221":261,"_17":262},{"_33":248,"_13":249,"_73":250,"_43":241,"_35":36,"_165":40,"_166":24,"_37":251,"_39":26,"_76":243,"_168":252,"_78":30,"_169":-5,"_221":253,"_17":254},{"_33":238,"_13":239,"_73":240,"_43":241,"_35":36,"_165":40,"_166":24,"_37":242,"_39":26,"_76":243,"_168":244,"_78":30,"_169":-5,"_221":245,"_17":246},{"_33":231,"_13":232,"_73":233,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":234,"_39":26,"_76":21,"_168":235,"_78":30,"_169":-5,"_221":236,"_17":237},{"_33":224,"_13":225,"_73":226,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":227,"_39":26,"_76":21,"_168":228,"_78":30,"_169":-5,"_221":229,"_17":230},{"_33":216,"_13":217,"_73":218,"_43":-5,"_35":36,"_165":40,"_166":24,"_37":219,"_39":26,"_76":21,"_168":220,"_78":30,"_169":-5,"_221":222,"_17":223},"c1f25136-5d5b-11f0-b796-0224a6c84d84","README.md","97815070-9825-402a-a3cd-d1aa86f01fa5",["D",1752130912555],"# Higher Dimensional Geometry Visualizer\n\nA sophisticated Next.js application for visualizing and interacting with 4D and 5D geometric shapes and their transformations. This educational tool allows users to explore higher-dimensional mathematics through interactive 3D projections, real-time transformations, and cross-sectional analysis.\n\n## 🌟 Features\n\n### Core Visualization\n- **4D/5D Shape Rendering**: Visualize tesseracts, penteracts, simplexes, and other higher-dimensional polytopes\n- **Real-time Transformations**: Rotate, scale, and translate shapes in higher dimensions with immediate visual feedback\n- **Multiple Projection Methods**: Perspective, orthogonal, stereographic, and Schlegel projections\n- **Interactive 3D Viewport**: Mouse-controlled camera with zoom, pan, and rotation\n\n### Advanced Analysis Tools\n- **Cross-section Analysis**: Slice through 4D objects with 3D hyperplanes to reveal interior structure\n- **Animation System**: Smooth interpolation between transformation states with customizable easing\n- **Performance Monitoring**: Real-time FPS and vertex count tracking\n- **Educational Interface**: Built-in explanations of mathematical concepts\n\n### User Experience\n- **Responsive Design**: Optimized for desktop, tablet, and mobile devices\n- **Keyboard Shortcuts**: Quick access to common operations\n- **Customizable Rendering**: Toggle vertices, edges, faces, wireframe modes, and adjust opacity\n- **Color Customization**: Personalize the appearance with custom color schemes\n\n## 🎯 Supported Shapes\n\n### 4D Shapes\n- **Tesseract (4D Cube)**: 16 vertices, 32 edges, 24 faces, 8 cells\n- **16-Cell (4D Cross-polytope)**: 8 vertices, 24 edges, 32 faces, 16 cells \n- **600-Cell**: 120 vertices, 720 edges, 1200 faces, 600 cells\n- **120-Cell**: 600 vertices, 1200 edges, 720 faces, 120 cells\n\n### 5D Shapes\n- **Penteract (5D Cube)**: 32 vertices, 80 edges, 80 faces, 40 cells, 10 hypercells\n- **5-Simplex (5D Tetrahedron)**: 6 vertices, 15 edges, 20 faces, 15 cells, 6 hypercells\n- **5-Orthoplex (5D Cross-polytope)**: 10 vertices, 40 edges, 80 faces, 80 cells, 32 hypercells\n- **Custom Shapes**: User-defined higher-dimensional objects\n\n## 🛠 Technology Stack\n\n- **Frontend**: React 18 with TypeScript\n- **3D Rendering**: Three.js with WebGL\n- **Styling**: Tailwind CSS with custom components\n- **Backend**: Hono.js for API endpoints\n- **Mathematics**: Custom libraries for higher-dimensional calculations\n- **Platform**: Val Town serverless environment\n\n## 🚀 Getting Started\n\n1. **Access the Application**: Navigate to the deployed URL\n2. **Choose Dimension**: Select 4D or 5D from the control panel\n3. **Select Shape**: Pick from available geometric primitives using the shape buttons\n4. **Explore Transformations**: Use sliders to rotate, scale, and transform in real-time\n5. **Analyze Cross-sections**: Enable cross-section mode to slice through objects\n6. **Customize Rendering**: Adjust colors, opacity, and display options\n\n## 🎮 Controls\n\n### Mouse Controls\n- **Left Click + Drag**: Rotate camera around the object\n- **Scroll Wheel**: Zoom in/out\n- **Right Click + Drag**: Pan camera (if implemented)\n\n### Keyboard Shortcuts\n- **Space**: Toggle auto-rotation animation\n- **Ctrl+R**: Reset all transformations to default\n- **1-4**: Quick select shapes (Tesseract, 16-Cell, 600-Cell, 120-Cell)\n- **V**: Toggle vertex visibility\n- **E**: Toggle edge visibility \n- **F**: Toggle face visibility\n- **W**: Toggle wireframe mode\n- **C**: Toggle cross-section analysis\n- **H**: Show/hide help overlay\n\n### Control Panel Features\n- **Shape Selection**: Choose dimension and geometric primitive\n- **Transformation Controls**: 6 rotation planes for 4D, 10 for 5D\n- **Projection Settings**: Adjust projection distance and camera FOV\n- **Cross-section Tools**: Position hyperplane and analyze intersections\n- **Rendering Options**: Customize visual appearance with real-time updates\n\n## 📐 Mathematical Background\n\nThis application implements advanced concepts from higher-dimensional geometry:\n\n### Projection Theory\n- **Perspective Projection**: Projects from nD to 3D using distance-based scaling\n- **Orthogonal Projection**: Simple coordinate dropping for quick visualization\n- **Stereographic Projection**: Maps hypersphere to hyperplane avoiding singularities\n\n### Transformation Mathematics\n- **4D Rotations**: 6 rotation planes (XY, XZ, XW, YZ, YW, ZW)\n- **5D Rotations**: 10 rotation planes with complex interaction matrices\n- **Composite Transformations**: Matrix multiplication for combined operations\n\n### Cross-sectional Analysis\n- **Hyperplane Intersection**: Calculate where nD objects intersect (n-1)D planes\n- **Edge-Plane Intersection**: Linear interpolation for precise intersection points\n- **Topological Analysis**: Understand interior structure through slicing\n\nFor detailed mathematical explanations, see [MATHEMATICAL_CONCEPTS.md](./MATHEMATICAL_CONCEPTS.md).\n\n## 🏗 Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main API server with Hono\n│ └── routes/ # API endpoints for calculations\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── GeometryViewer.tsx # 3D visualization with Three.js\n│ │ ├── ControlPanel.tsx # User interface controls\n│ │ └── CrossSection.tsx # Cross-section analysis tools\n│ ├── index.html # Main HTML template with styling\n│ ├── index.tsx # Frontend entry point and initialization\n│ └── style.css # Additional CSS styles\n├── shared/\n│ ├── math/\n│ │ ├── geometry4d.ts # 4D geometric calculations and shapes\n│ │ ├── geometry5d.ts # 5D geometric calculations and shapes\n│ │ ├── projections.ts # Projection algorithms and methods\n│ │ └── transformations.ts # Transformation matrices and operations\n│ ├── types.ts # Shared TypeScript type definitions\n│ └── utils.ts # Utility functions and helpers\n├── MATHEMATICAL_CONCEPTS.md # Detailed mathematical documentation\n└── README.md # This file\n```\n\n## 🔧 API Endpoints\n\n- `GET /`: Main application interface\n- `GET /api/health`: Application health check\n- `GET /api/shapes/:dimension/:shape`: Shape metadata and properties\n- `POST /api/calculate`: Mathematical computation endpoints\n- `GET /api/performance`: Performance monitoring data\n\n## 🎓 Educational Value\n\nThis visualizer serves as an educational tool for:\n\n### Students\n- **Spatial Reasoning**: Develop intuition for higher-dimensional spaces\n- **Mathematical Visualization**: See abstract concepts in concrete form\n- **Interactive Learning**: Hands-on exploration of geometric properties\n\n### Educators \n- **Teaching Aid**: Demonstrate complex mathematical concepts visually\n- **Curriculum Support**: Supplement traditional geometry and topology courses\n- **Research Tool**: Explore new visualization techniques\n\n### Researchers\n- **Prototype Development**: Test new projection and rendering methods\n- **Data Visualization**: Apply techniques to high-dimensional datasets\n- **Algorithm Validation**: Verify mathematical calculations visually\n\n## ⚡ Performance Optimizations\n\n### Rendering Optimizations\n- **Level of Detail (LOD)**: Reduce complexity for distant objects\n- **Frustum Culling**: Skip rendering of off-screen geometry\n- **Instanced Rendering**: Efficient handling of repeated elements\n- **Adaptive Quality**: Adjust rendering quality based on performance\n\n### Mathematical Optimizations\n- **Matrix Caching**: Reuse computed transformation matrices\n- **Incremental Updates**: Only recalculate changed elements\n- **Web Workers**: Offload heavy calculations to background threads\n- **Memory Pooling**: Reuse objects to reduce garbage collection\n\n### User Experience Optimizations\n- **Progressive Loading**: Load complex shapes incrementally\n- **Responsive Controls**: Debounced input handling for smooth interaction\n- **Efficient State Management**: Minimize unnecessary re-renders\n- **Caching Strategy**: Store computed results for quick access\n\n## 🌐 Browser Compatibility\n\n### Recommended Browsers\n- **Chrome 90+**: Full WebGL 2.0 support with best performance\n- **Firefox 88+**: Complete feature support with good performance \n- **Safari 14+**: WebGL support with some limitations\n- **Edge 90+**: Full compatibility with Chrome engine\n\n### Required Features\n- **WebGL 2.0**: For advanced rendering capabilities\n- **ES6 Modules**: For modern JavaScript features\n- **CSS Grid**: For responsive layout design\n- **Web Workers**: For background mathematical calculations (optional)\n\n## 🔮 Future Enhancements\n\n### Planned Features\n- **6D and Higher**: Extend to even higher dimensions\n- **Custom Shape Builder**: User-defined geometric primitives\n- **Animation Timeline**: Keyframe-based transformation sequences\n- **Export Capabilities**: Save visualizations as images or videos\n- **VR/AR Support**: Immersive higher-dimensional exploration\n\n### Advanced Mathematics\n- **Non-Euclidean Geometry**: Hyperbolic and spherical spaces\n- **Fractal Dimensions**: Self-similar structures in higher dimensions\n- **Topology Visualization**: Manifolds, fiber bundles, and exotic spaces\n- **Physics Applications**: String theory and quantum field visualizations\n\n### Educational Enhancements\n- **Guided Tours**: Step-by-step exploration of concepts\n- **Interactive Tutorials**: Learn-by-doing mathematical lessons\n- **Assessment Tools**: Quiz and problem-solving features\n- **Collaboration Features**: Share and discuss visualizations\n\n## 🤝 Contributing\n\nThis project welcomes contributions from mathematicians, developers, and educators:\n\n### Areas for Contribution\n- **Mathematical Accuracy**: Verify and improve calculations\n- **Performance Optimization**: Enhance rendering and computation speed\n- **Educational Content**: Add explanations and learning materials\n- **User Interface**: Improve accessibility and usability\n- **Documentation**: Expand mathematical and technical documentation\n\n### Development Guidelines\n- Follow TypeScript best practices\n- Maintain mathematical accuracy and precision\n- Ensure cross-browser compatibility\n- Write comprehensive tests for mathematical functions\n- Document complex algorithms and mathematical concepts\n\n## 📚 References and Further Reading\n\n### Mathematical Sources\n1. Coxeter, H.S.M. \"Regular Polytopes\" - Comprehensive reference for higher-dimensional geometry\n2. Branko Grünbaum \"Convex Polytopes\" - Advanced polytope theory\n3. Charles Howard Hinton \"The Fourth Dimension\" - Historical perspective on 4D visualization\n\n### Technical Resources\n1. Three.js Documentation - 3D rendering techniques\n2. WebGL Specification - Low-level graphics programming\n3. Linear Algebra References - Matrix operations and transformations\n\n### Educational Materials\n1. \"Flatland\" by Edwin Abbott - Introduction to dimensional thinking\n2. \"Sphereland\" by Dionys Burger - Extension to higher dimensions\n3. Online courses in topology and differential geometry\n\n## 📄 License\n\nThis project is open source and available under the MIT License. Feel free to use, modify, and distribute according to the license terms.\n\n## 🙏 Acknowledgments\n\n- **Mathematical Community**: For developing the theoretical foundations\n- **Three.js Team**: For providing excellent 3D rendering capabilities\n- **Val Town Platform**: For hosting and serverless infrastructure\n- **Open Source Contributors**: For tools and libraries that made this possible\n\n---\n\n**Explore the fascinating world of higher-dimensional geometry!** 🌌\n\nFor questions, suggestions, or collaboration opportunities, please reach out through the platform's communication channels.","children",[],[217],"c1f24902-5d5b-11f0-b796-0224a6c84d84","MATHEMATICAL_CONCEPTS.md","5b70f430-c5b5-4416-a353-5daa256b80cb",["D",1752130912555],"# Mathematical Concepts in Higher Dimensional Geometry\n\nThis document explains the mathematical concepts implemented in the Higher Dimensional Geometry Visualizer.\n\n## Higher Dimensional Spaces\n\n### 4D Space (Tesseract and Related Shapes)\n\nIn 4D space, we work with coordinates (x, y, z, w) where w is the fourth spatial dimension. This is different from spacetime where time is often considered the fourth dimension.\n\n#### Key 4D Shapes:\n\n1. **Tesseract (4D Cube)**\n - 16 vertices\n - 32 edges \n - 24 square faces\n - 8 cubic cells\n - Construction: Two 3D cubes connected through the 4th dimension\n\n2. **16-Cell (4D Cross-polytope)**\n - 8 vertices (±1 on each axis)\n - 24 edges\n - 32 triangular faces\n - 16 tetrahedral cells\n - Dual of the tesseract\n\n3. **600-Cell**\n - 120 vertices\n - 720 edges\n - 1200 triangular faces\n - 600 tetrahedral cells\n - Most complex regular 4D polytope\n\n### 5D Space (Penteract and Related Shapes)\n\n5D space uses coordinates (x, y, z, w, v) with five spatial dimensions.\n\n#### Key 5D Shapes:\n\n1. **Penteract (5D Cube)**\n - 32 vertices\n - 80 edges\n - 80 square faces\n - 40 cubic cells\n - 10 tesseract hypercells\n\n2. **5-Simplex (5D Tetrahedron)**\n - 6 vertices\n - 15 edges\n - 20 triangular faces\n - 15 tetrahedral cells\n - 6 4-simplex hypercells\n\n## Projection Methods\n\nSince we can only visualize in 3D, we need projection methods to display higher-dimensional objects.\n\n### Perspective Projection\n\nFor 4D to 3D projection:\n```\nfactor = distance / (distance - w)\nx' = x * factor\ny' = y * factor \nz' = z * factor\n```\n\nFor 5D to 3D (double projection):\n1. Project 5D to 4D using the v-coordinate\n2. Project the resulting 4D to 3D using the w-coordinate\n\n### Orthogonal Projection\n\nSimply drop one or more dimensions:\n- 4D to 3D: (x, y, z, w) → (x, y, z)\n- 5D to 3D: (x, y, z, w, v) → (x, y, z)\n\n### Stereographic Projection\n\nProjects from a hypersphere to a hyperplane, useful for avoiding singularities:\n```\nfactor = radius / (radius - w)\nx' = x * factor\ny' = y * factor\nz' = z * factor\n```\n\n## Transformations\n\n### 4D Rotations\n\nIn 4D, rotations occur in planes rather than around axes. There are 6 possible rotation planes:\n- XY plane: rotates x and y coordinates\n- XZ plane: rotates x and z coordinates \n- XW plane: rotates x and w coordinates\n- YZ plane: rotates y and z coordinates\n- YW plane: rotates y and w coordinates\n- ZW plane: rotates z and w coordinates\n\nRotation matrix for plane XY with angle θ:\n```\n[cos θ -sin θ 0 0 ]\n[sin θ cos θ 0 0 ]\n[ 0 0 1 0 ]\n[ 0 0 0 1 ]\n```\n\n### 5D Rotations\n\n5D has 10 possible rotation planes:\nXY, XZ, XW, XV, YZ, YW, YV, ZW, ZV, WV\n\n### Scaling and Translation\n\nApplied uniformly across all dimensions:\n- Scaling: multiply all coordinates by scale factor\n- Translation: add translation vector to position vector\n\n## Cross-Sections\n\nA cross-section is created by intersecting a higher-dimensional object with a hyperplane.\n\n### 4D Cross-Sections\n\nIntersecting a 4D object with a 3D hyperplane (e.g., w = constant) produces a 3D shape that reveals the \"interior\" structure.\n\nAlgorithm:\n1. For each edge in the 4D shape\n2. Check if the edge crosses the hyperplane\n3. Calculate intersection point using linear interpolation\n4. Connect intersection points to form the cross-section\n\n### Mathematical Formula\n\nFor an edge from point A to point B, intersection with hyperplane w = c:\n```\nt = (c - A.w) / (B.w - A.w)\nintersection = A + t * (B - A)\n```\n\n## Geometric Properties\n\n### Euler Characteristic\n\nFor regular polytopes, the Euler characteristic χ relates vertices (V), edges (E), faces (F), etc.:\n\n4D: χ = V - E + F - C = 0 (where C = cells)\n5D: χ = V - E + F - C + H = 0 (where H = hypercells)\n\n### Symmetry Groups\n\n- Tesseract: BC₄ symmetry (384 symmetries)\n- 16-cell: BC₄ symmetry (384 symmetries) \n- 600-cell: H₄ symmetry (14,400 symmetries)\n- 120-cell: H₄ symmetry (14,400 symmetries)\n\n## Visualization Challenges\n\n### Depth Perception\n\nHigher-dimensional projections can create overlapping elements that are difficult to interpret. Solutions:\n- Use transparency and opacity\n- Color coding by dimension\n- Animation to show different perspectives\n\n### Occlusion\n\nParts of the object may be hidden behind other parts. Solutions:\n- Wireframe rendering\n- Cross-sections to see interior\n- Interactive rotation\n\n### Scale\n\nHigher-dimensional objects can have vastly different scales in different projections. Solutions:\n- Adaptive scaling\n- Multiple projection methods\n- User-controlled zoom and perspective\n\n## Performance Considerations\n\n### Computational Complexity\n\n- Vertex transformations: O(n) where n = number of vertices\n- Projection calculations: O(n)\n- Cross-section calculations: O(e) where e = number of edges\n- Rendering: O(v + e + f) for vertices, edges, and faces\n\n### Optimization Strategies\n\n1. **Level of Detail (LOD)**: Reduce complexity for distant objects\n2. **Frustum Culling**: Don't render objects outside view\n3. **Occlusion Culling**: Don't render hidden objects\n4. **Instancing**: Reuse geometry for repeated elements\n5. **Web Workers**: Offload calculations to background threads\n\n## Applications\n\n### Scientific Visualization\n\n- Quantum mechanics (wave functions in higher dimensions)\n- String theory (extra spatial dimensions)\n- Data visualization (high-dimensional datasets)\n\n### Mathematical Education\n\n- Understanding geometric concepts\n- Visualizing abstract mathematical objects\n- Developing spatial reasoning skills\n\n### Computer Graphics\n\n- Advanced animation techniques\n- Procedural generation\n- Novel rendering methods\n\n## Further Reading\n\n1. \"The Fourth Dimension\" by Charles Howard Hinton\n2. \"Geometry of Four Dimensions\" by Henry Parker Manning\n3. \"Regular Polytopes\" by H.S.M. Coxeter\n4. \"Visualizing Quaternions\" by Andrew J. Hanson\n5. \"Higher-Dimensional Geometry\" by Branko Grünbaum\n\n## Implementation Notes\n\nThis visualizer implements:\n- Real-time 4D and 5D transformations\n- Multiple projection methods\n- Interactive cross-section analysis\n- Performance-optimized rendering\n- Educational interface with mathematical explanations\n\nThe mathematical calculations are performed using custom libraries that handle:\n- Vector and matrix operations in 4D and 5D\n- Geometric primitive generation\n- Projection algorithms\n- Intersection calculations for cross-sections",[],[225],"c1f24006-5d5b-11f0-b796-0224a6c84d84","FEATURES_SUMMARY.md","4d2597fd-5b3e-42b4-a0dd-44491cbf6399",["D",1752130912555],"# Higher Dimensional Geometry Visualizer - Features Summary\n\n## 🎯 Core Application Features\n\n### ✅ Implemented Features\n\n#### 1. **Higher Dimensional Shape Visualization**\n- **4D Shapes**: Tesseract (4D cube), 16-cell (4D cross-polytope)\n- **5D Shapes**: Penteract (5D cube), 5-simplex (5D tetrahedron), 5-orthoplex\n- **Real-time Rendering**: Smooth 60 FPS visualization with Three.js\n- **Multiple Projections**: Perspective, orthogonal, stereographic, and Schlegel projections\n\n#### 2. **Interactive Transformations**\n- **4D Rotations**: 6 rotation planes (XY, XZ, XW, YZ, YW, ZW)\n- **5D Rotations**: 10 rotation planes with complex matrix operations\n- **Scaling**: Uniform scaling across all dimensions\n- **Translation**: Movement in higher-dimensional space\n- **Auto-rotation**: Animated continuous rotation with customizable speed\n\n#### 3. **Advanced User Interface**\n- **Responsive Control Panel**: Tabbed interface with shape, transform, and render controls\n- **Real-time Sliders**: Immediate visual feedback for all transformations\n- **Shape Selection**: Easy switching between different geometric primitives\n- **Rendering Options**: Toggle vertices, edges, faces, wireframe mode, opacity control\n- **Color Customization**: Custom colors for shapes, edges, and vertices\n\n#### 4. **Cross-Section Analysis**\n- **4D Cross-sections**: Slice through 4D objects with 3D hyperplanes\n- **Interactive Positioning**: Real-time adjustment of hyperplane position\n- **Visual Analysis**: 2D visualization of cross-section results\n- **Animation Tools**: Automated slicing animation through the object\n- **Mathematical Accuracy**: Precise edge-hyperplane intersection calculations\n\n#### 5. **Performance Optimization**\n- **Real-time Performance Monitoring**: FPS counter and vertex count display\n- **Efficient Rendering**: Optimized Three.js usage with proper disposal\n- **Responsive Design**: Works on desktop, tablet, and mobile devices\n- **Memory Management**: Proper cleanup of geometries and materials\n- **Adaptive Quality**: Performance-based rendering adjustments\n\n#### 6. **Educational Features**\n- **Mathematical Documentation**: Comprehensive explanation of concepts\n- **Interactive Help**: Built-in keyboard shortcuts and controls guide\n- **Shape Information**: Detailed properties for each geometric primitive\n- **Visual Learning**: Immediate feedback for mathematical transformations\n- **Progressive Complexity**: Start simple and explore advanced features\n\n#### 7. **Technical Excellence**\n- **TypeScript**: Full type safety for mathematical operations\n- **Modern React**: Hooks-based architecture with efficient state management\n- **Three.js Integration**: Professional 3D rendering with WebGL\n- **API Architecture**: RESTful endpoints for shape data and calculations\n- **Error Handling**: Graceful degradation and user-friendly error messages\n\n## 🛠 Technical Implementation\n\n### **Mathematical Libraries**\n- **Geometry4D**: Complete 4D shape generation and transformation\n- **Geometry5D**: Advanced 5D geometric calculations\n- **Projections**: Multiple projection algorithms for nD to 3D conversion\n- **Transformations**: Matrix operations for rotations, scaling, translation\n- **Cross-sections**: Hyperplane intersection algorithms\n\n### **Frontend Architecture**\n- **React Components**: Modular, reusable UI components\n- **Three.js Rendering**: Hardware-accelerated 3D graphics\n- **State Management**: Efficient React state with minimal re-renders\n- **Event System**: Custom events for component communication\n- **Responsive Design**: Mobile-first CSS with desktop enhancements\n\n### **Backend Services**\n- **Hono.js Server**: Fast, lightweight API server\n- **Static File Serving**: Efficient delivery of assets\n- **Health Monitoring**: Application status and performance endpoints\n- **Shape Metadata**: Detailed information about geometric primitives\n- **Calculation APIs**: Server-side mathematical computation support\n\n## 🎮 User Experience Features\n\n### **Mouse Controls**\n- **Camera Rotation**: Intuitive click-and-drag orbit controls\n- **Zoom**: Smooth mouse wheel zooming\n- **Responsive Feedback**: Immediate visual response to interactions\n\n### **Keyboard Shortcuts**\n- **Space**: Toggle auto-rotation\n- **Ctrl+R**: Reset transformations\n- **1-4**: Quick shape selection\n- **V/E/F/W**: Toggle rendering modes\n- **Accessibility**: Full keyboard navigation support\n\n### **Visual Design**\n- **Modern UI**: Clean, professional interface with glassmorphism effects\n- **Color Scheme**: Carefully chosen colors for optimal visibility\n- **Typography**: Clear, readable fonts with proper hierarchy\n- **Animations**: Smooth transitions and hover effects\n- **Dark Theme**: Eye-friendly dark interface for extended use\n\n## 📊 Performance Metrics\n\n### **Rendering Performance**\n- **Target FPS**: 60 FPS for smooth interaction\n- **Vertex Handling**: Efficiently renders up to 10,000+ vertices\n- **Memory Usage**: Optimized for long-running sessions\n- **Browser Compatibility**: Works on all modern browsers with WebGL\n\n### **Mathematical Accuracy**\n- **Precision**: Double-precision floating-point calculations\n- **Numerical Stability**: Robust algorithms that handle edge cases\n- **Validation**: Mathematical results verified against known properties\n- **Error Handling**: Graceful handling of degenerate cases\n\n## 🎓 Educational Value\n\n### **Learning Objectives**\n- **Spatial Reasoning**: Develop intuition for higher dimensions\n- **Mathematical Visualization**: See abstract concepts concretely\n- **Interactive Exploration**: Learn through hands-on experimentation\n- **Progressive Understanding**: Build from simple to complex concepts\n\n### **Target Audiences**\n- **Students**: High school to graduate level mathematics\n- **Educators**: Teaching aids for geometry and topology courses\n- **Researchers**: Visualization tool for mathematical research\n- **Enthusiasts**: Anyone curious about higher-dimensional mathematics\n\n## 🚀 Advanced Features\n\n### **Cross-Section Analysis**\n- **Real-time Slicing**: Interactive hyperplane positioning\n- **3D Visualization**: See the interior structure of 4D objects\n- **Animation**: Automated slicing sequences\n- **Mathematical Insight**: Understand topology through cross-sections\n\n### **Multiple Projections**\n- **Perspective**: Distance-based scaling for realistic depth\n- **Orthogonal**: Simple coordinate dropping for clarity\n- **Stereographic**: Avoid singularities with sphere-to-plane mapping\n- **Adaptive**: Automatically choose best projection method\n\n### **Shape Library**\n- **Regular Polytopes**: All major 4D and 5D regular shapes\n- **Detailed Properties**: Vertex, edge, face, and cell counts\n- **Mathematical Accuracy**: Precise geometric construction\n- **Extensible**: Framework for adding custom shapes\n\n## 🔧 Developer Features\n\n### **Code Quality**\n- **TypeScript**: Full type safety and IntelliSense support\n- **Modular Architecture**: Clean separation of concerns\n- **Documentation**: Comprehensive inline and external documentation\n- **Testing**: Mathematical functions validated for accuracy\n\n### **Extensibility**\n- **Plugin Architecture**: Easy to add new shapes and projections\n- **API Design**: RESTful endpoints for external integration\n- **Configuration**: Customizable settings for different use cases\n- **Open Source**: MIT license for educational and research use\n\n## 🌟 Unique Selling Points\n\n1. **First-Class 5D Support**: One of the few tools supporting 5D visualization\n2. **Real-time Interaction**: Immediate feedback for all transformations\n3. **Educational Focus**: Designed specifically for learning and teaching\n4. **Mathematical Accuracy**: Precise calculations with proper error handling\n5. **Cross-Platform**: Works on any device with a modern browser\n6. **Performance Optimized**: Smooth interaction even with complex shapes\n7. **Open Source**: Free for educational and research use\n\n## 📈 Future Roadmap\n\n### **Planned Enhancements**\n- **6D and Higher**: Extend to even more dimensions\n- **Custom Shape Builder**: User-defined geometric primitives\n- **VR/AR Support**: Immersive higher-dimensional exploration\n- **Collaboration Features**: Share and discuss visualizations\n- **Advanced Analytics**: Detailed geometric property analysis\n\n### **Educational Expansion**\n- **Guided Tours**: Step-by-step concept exploration\n- **Interactive Tutorials**: Learn-by-doing mathematical lessons\n- **Assessment Tools**: Quiz and problem-solving features\n- **Curriculum Integration**: Alignment with educational standards\n\nThis Higher Dimensional Geometry Visualizer represents a significant advancement in mathematical visualization tools, combining cutting-edge web technologies with rigorous mathematical foundations to create an unparalleled educational and research platform.",[],[232],"c1f237fa-5d5b-11f0-b796-0224a6c84d84","utils.ts","61d74262-68a7-4fc4-a646-34c1d899f646","c8b2a911-bb6c-4274-a3e3-736ef1ed38da",["D",1752130912555],"script","// Shared utility functions\n\nimport { Vector3D, Vector4D, Vector5D } from './types.ts';\n\nexport class MathUtils {\n // Clamp a value between min and max\n static clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max);\n }\n\n // Linear interpolation\n static lerp(a: number, b: number, t: number): number {\n return a + (b - a) * t;\n }\n\n // Map a value from one range to another\n static map(value: number, fromMin: number, fromMax: number, toMin: number, toMax: number): number {\n return toMin + (value - fromMin) * (toMax - toMin) / (fromMax - fromMin);\n }\n\n // Convert degrees to radians\n static degToRad(degrees: number): number {\n return degrees * Math.PI / 180;\n }\n\n // Convert radians to degrees\n static radToDeg(radians: number): number {\n return radians * 180 / Math.PI;\n }\n\n // Calculate distance between two 3D points\n static distance3D(a: Vector3D, b: Vector3D): number {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n const dz = a.z - b.z;\n return Math.sqrt(dx * dx + dy * dy + dz * dz);\n }\n\n // Calculate distance between two 4D points\n static distance4D(a: Vector4D, b: Vector4D): number {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n const dz = a.z - b.z;\n const dw = a.w - b.w;\n return Math.sqrt(dx * dx + dy * dy + dz * dz + dw * dw);\n }\n\n // Normalize a 3D vector\n static normalize3D(v: Vector3D): Vector3D {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);\n if (length < 0.001) return { x: 0, y: 0, z: 0 };\n return {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length\n };\n }\n\n // Normalize a 4D vector\n static normalize4D(v: Vector4D): Vector4D {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w);\n if (length < 0.001) return { x: 0, y: 0, z: 0, w: 0 };\n return {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length,\n w: v.w / length\n };\n }\n\n // Calculate dot product of two 3D vectors\n static dot3D(a: Vector3D, b: Vector3D): number {\n return a.x * b.x + a.y * b.y + a.z * b.z;\n }\n\n // Calculate dot product of two 4D vectors\n static dot4D(a: Vector4D, b: Vector4D): number {\n return a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w;\n }\n\n // Calculate cross product of two 3D vectors\n static cross3D(a: Vector3D, b: Vector3D): Vector3D {\n return {\n x: a.y * b.z - a.z * b.y,\n y: a.z * b.x - a.x * b.z,\n z: a.x * b.y - a.y * b.x\n };\n }\n\n // Generate a random number between min and max\n static random(min: number = 0, max: number = 1): number {\n return min + Math.random() * (max - min);\n }\n\n // Generate a random integer between min and max (inclusive)\n static randomInt(min: number, max: number): number {\n return Math.floor(this.random(min, max + 1));\n }\n\n // Check if a number is approximately equal to another (within epsilon)\n static approximately(a: number, b: number, epsilon: number = 0.001): boolean {\n return Math.abs(a - b) < epsilon;\n }\n\n // Smooth step function\n static smoothstep(edge0: number, edge1: number, x: number): number {\n const t = this.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n return t * t * (3 - 2 * t);\n }\n\n // Smoother step function\n static smootherstep(edge0: number, edge1: number, x: number): number {\n const t = this.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n return t * t * t * (t * (t * 6 - 15) + 10);\n }\n}\n\nexport class ColorUtils {\n // Convert HSL to RGB\n static hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n h /= 360;\n s /= 100;\n l /= 100;\n\n const hue2rgb = (p: number, q: number, t: number): number => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n\n // Convert RGB to hex string\n static rgbToHex(r: number, g: number, b: number): string {\n return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n }\n\n // Generate a color based on a value (useful for visualizing dimensions)\n static valueToColor(value: number, min: number, max: number): string {\n const normalized = MathUtils.clamp((value - min) / (max - min), 0, 1);\n const hue = (1 - normalized) * 240; // Blue to red\n const { r, g, b } = this.hslToRgb(hue, 100, 50);\n return this.rgbToHex(r, g, b);\n }\n\n // Generate rainbow colors for multiple objects\n static generateRainbowColors(count: number): string[] {\n const colors: string[] = [];\n for (let i = 0; i < count; i++) {\n const hue = (i / count) * 360;\n const { r, g, b } = this.hslToRgb(hue, 70, 50);\n colors.push(this.rgbToHex(r, g, b));\n }\n return colors;\n }\n}\n\nexport class PerformanceUtils {\n // Debounce function calls\n static debounce any>(\n func: T,\n wait: number\n ): (...args: Parameters) => void {\n let timeout: number | undefined;\n return (...args: Parameters) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n }\n\n // Throttle function calls\n static throttle any>(\n func: T,\n limit: number\n ): (...args: Parameters) => void {\n let inThrottle: boolean;\n return (...args: Parameters) => {\n if (!inThrottle) {\n func(...args);\n inThrottle = true;\n setTimeout(() => inThrottle = false, limit);\n }\n };\n }\n\n // Measure execution time\n static measureTime(name: string, func: () => T): T {\n const start = performance.now();\n const result = func();\n const end = performance.now();\n console.log(`${name} took ${end - start} milliseconds`);\n return result;\n }\n\n // Create a simple object pool for performance\n static createObjectPool(\n createFn: () => T,\n resetFn: (obj: T) => void,\n initialSize: number = 10\n ) {\n const pool: T[] = [];\n \n // Pre-populate the pool\n for (let i = 0; i < initialSize; i++) {\n pool.push(createFn());\n }\n\n return {\n get(): T {\n return pool.pop() || createFn();\n },\n \n release(obj: T): void {\n resetFn(obj);\n pool.push(obj);\n },\n \n size(): number {\n return pool.length;\n }\n };\n }\n}\n\nexport class ValidationUtils {\n // Validate that a value is a finite number\n static isValidNumber(value: any): value is number {\n return typeof value === 'number' && isFinite(value);\n }\n\n // Validate a 3D vector\n static isValid3DVector(v: any): v is Vector3D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z);\n }\n\n // Validate a 4D vector\n static isValid4DVector(v: any): v is Vector4D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z) &&\n this.isValidNumber(v.w);\n }\n\n // Validate a 5D vector\n static isValid5DVector(v: any): v is Vector5D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z) &&\n this.isValidNumber(v.w) &&\n this.isValidNumber(v.v);\n }\n\n // Sanitize user input for angles (convert to radians and clamp)\n static sanitizeAngle(degrees: number): number {\n if (!this.isValidNumber(degrees)) return 0;\n return MathUtils.degToRad(degrees % 360);\n }\n\n // Sanitize scale values\n static sanitizeScale(scale: number): number {\n if (!this.isValidNumber(scale)) return 1;\n return MathUtils.clamp(scale, 0.1, 10);\n }\n}",[],[247,239],"shared","c1f23412-5d5b-11f0-b796-0224a6c84d84","types.ts","74b4bbe8-117b-4c18-83df-66d658ba6c8e",["D",1752130912555],"// Shared types for higher-dimensional geometry visualization\n\nexport interface Vector4D {\n x: number;\n y: number;\n z: number;\n w: number;\n}\n\nexport interface Vector5D {\n x: number;\n y: number;\n z: number;\n w: number;\n v: number;\n}\n\nexport interface Vector3D {\n x: number;\n y: number;\n z: number;\n}\n\nexport interface Matrix4D {\n elements: number[][]; // 4x4 matrix\n}\n\nexport interface Matrix5D {\n elements: number[][]; // 5x5 matrix\n}\n\nexport interface Edge {\n start: number;\n end: number;\n}\n\nexport interface Face {\n vertices: number[];\n}\n\nexport interface Cell {\n faces: number[];\n}\n\nexport interface Shape4D {\n vertices: Vector4D[];\n edges: Edge[];\n faces: Face[];\n cells: Cell[];\n name: string;\n}\n\nexport interface Shape5D {\n vertices: Vector5D[];\n edges: Edge[];\n faces: Face[];\n cells: Cell[];\n hypercells: Cell[];\n name: string;\n}\n\nexport interface ProjectionSettings {\n distance: number;\n perspective: boolean;\n viewAngle: number;\n}\n\nexport interface TransformationState {\n rotation4D: {\n xy: number;\n xz: number;\n xw: number;\n yz: number;\n yw: number;\n zw: number;\n };\n rotation5D?: {\n xy: number;\n xz: number;\n xw: number;\n xv: number;\n yz: number;\n yw: number;\n yv: number;\n zw: number;\n zv: number;\n wv: number;\n };\n scale: number;\n translation: Vector4D | Vector5D;\n}\n\nexport interface CameraState {\n position: Vector3D;\n target: Vector3D;\n up: Vector3D;\n fov: number;\n}\n\nexport interface LightingState {\n ambient: number;\n directional: {\n intensity: number;\n direction: Vector3D;\n };\n point: {\n intensity: number;\n position: Vector3D;\n };\n}\n\nexport interface CrossSectionSettings {\n enabled: boolean;\n dimension: number;\n position: number;\n normal: Vector4D | Vector5D;\n}\n\nexport interface RenderSettings {\n showVertices: boolean;\n showEdges: boolean;\n showFaces: boolean;\n wireframe: boolean;\n opacity: number;\n color: string;\n edgeColor: string;\n vertexColor: string;\n}\n\nexport type ShapeType = \n | 'tesseract' \n | '16-cell' \n | '600-cell' \n | '120-cell'\n | 'penteract'\n | '5-simplex'\n | '5-orthoplex'\n | 'custom';\n\nexport interface AppState {\n currentShape: ShapeType;\n dimension: 4 | 5;\n transformations: TransformationState;\n camera: CameraState;\n lighting: LightingState;\n projection: ProjectionSettings;\n crossSection: CrossSectionSettings;\n rendering: RenderSettings;\n isAnimating: boolean;\n animationSpeed: number;\n}",[],[247,249],"c1f22698-5d5b-11f0-b796-0224a6c84d84","transformations.ts","c84995a7-b3d8-4427-ae65-9aaa490a62ed","dd4fdcfc-e976-4aa5-b385-f0aef872dfb3",["D",1752130912555],"// Transformation utilities for higher-dimensional geometry\n\nimport { Vector4D, Vector5D, Matrix4D, Matrix5D, TransformationState, Shape4D, Shape5D } from '../types.ts';\nimport { Geometry4D } from './geometry4d.ts';\nimport { Geometry5D } from './geometry5d.ts';\n\nexport class TransformationEngine {\n // Apply transformations to entire 4D shape\n static applyTransformations4D(shape: Shape4D, transformations: TransformationState): Shape4D {\n const transformedVertices = shape.vertices.map(vertex => \n this.transform4D(vertex, transformations)\n );\n \n return {\n ...shape,\n vertices: transformedVertices\n };\n }\n\n // Apply transformations to entire 5D shape\n static applyTransformations5D(shape: Shape5D, transformations: TransformationState): Shape5D {\n const transformedVertices = shape.vertices.map(vertex => \n this.transform5D(vertex, transformations)\n );\n \n return {\n ...shape,\n vertices: transformedVertices\n };\n }\n // Apply all transformations to a 4D point\n static transform4D(point: Vector4D, state: TransformationState): Vector4D {\n let result = { ...point };\n \n // Apply scaling\n result.x *= state.scale;\n result.y *= state.scale;\n result.z *= state.scale;\n result.w *= state.scale;\n \n // Apply rotations\n const rotationMatrix = Geometry4D.createCompositeRotation(state.rotation4D);\n result = Geometry4D.transformVector(result, rotationMatrix);\n \n // Apply translation\n const translation = state.translation as Vector4D;\n result.x += translation.x;\n result.y += translation.y;\n result.z += translation.z;\n result.w += translation.w;\n \n return result;\n }\n\n // Apply all transformations to a 5D point\n static transform5D(point: Vector5D, state: TransformationState): Vector5D {\n let result = { ...point };\n \n // Apply scaling\n result.x *= state.scale;\n result.y *= state.scale;\n result.z *= state.scale;\n result.w *= state.scale;\n result.v *= state.scale;\n \n // Apply rotations\n if (state.rotation5D) {\n const rotationMatrix = Geometry5D.createCompositeRotation(state.rotation5D);\n result = Geometry5D.transformVector(result, rotationMatrix);\n }\n \n // Apply translation\n const translation = state.translation as Vector5D;\n result.x += translation.x;\n result.y += translation.y;\n result.z += translation.z;\n result.w += translation.w;\n result.v += translation.v;\n \n return result;\n }\n\n // Create animation interpolation between two transformation states\n static interpolateTransformations(\n from: TransformationState, \n to: TransformationState, \n t: number\n ): TransformationState {\n const lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n \n // Interpolate 4D rotations\n const rotation4D = {\n xy: lerp(from.rotation4D.xy, to.rotation4D.xy, t),\n xz: lerp(from.rotation4D.xz, to.rotation4D.xz, t),\n xw: lerp(from.rotation4D.xw, to.rotation4D.xw, t),\n yz: lerp(from.rotation4D.yz, to.rotation4D.yz, t),\n yw: lerp(from.rotation4D.yw, to.rotation4D.yw, t),\n zw: lerp(from.rotation4D.zw, to.rotation4D.zw, t)\n };\n\n // Interpolate 5D rotations if they exist\n let rotation5D = undefined;\n if (from.rotation5D && to.rotation5D) {\n rotation5D = {\n xy: lerp(from.rotation5D.xy, to.rotation5D.xy, t),\n xz: lerp(from.rotation5D.xz, to.rotation5D.xz, t),\n xw: lerp(from.rotation5D.xw, to.rotation5D.xw, t),\n xv: lerp(from.rotation5D.xv, to.rotation5D.xv, t),\n yz: lerp(from.rotation5D.yz, to.rotation5D.yz, t),\n yw: lerp(from.rotation5D.yw, to.rotation5D.yw, t),\n yv: lerp(from.rotation5D.yv, to.rotation5D.yv, t),\n zw: lerp(from.rotation5D.zw, to.rotation5D.zw, t),\n zv: lerp(from.rotation5D.zv, to.rotation5D.zv, t),\n wv: lerp(from.rotation5D.wv, to.rotation5D.wv, t)\n };\n }\n\n // Interpolate translation\n const fromTrans = from.translation as any;\n const toTrans = to.translation as any;\n const translation: any = {\n x: lerp(fromTrans.x, toTrans.x, t),\n y: lerp(fromTrans.y, toTrans.y, t),\n z: lerp(fromTrans.z, toTrans.z, t),\n w: lerp(fromTrans.w, toTrans.w, t)\n };\n \n if (fromTrans.v !== undefined && toTrans.v !== undefined) {\n translation.v = lerp(fromTrans.v, toTrans.v, t);\n }\n\n return {\n rotation4D,\n rotation5D,\n scale: lerp(from.scale, to.scale, t),\n translation\n };\n }\n\n // Generate smooth rotation animation keyframes\n static generateRotationKeyframes(\n dimension: 4 | 5,\n duration: number,\n rotationSpeed: { [key: string]: number }\n ): TransformationState[] {\n const keyframes: TransformationState[] = [];\n const steps = Math.max(60, duration * 60); // 60 FPS\n \n for (let i = 0; i <= steps; i++) {\n const t = i / steps;\n const time = t * duration;\n \n const rotation4D = {\n xy: rotationSpeed.xy ? rotationSpeed.xy * time : 0,\n xz: rotationSpeed.xz ? rotationSpeed.xz * time : 0,\n xw: rotationSpeed.xw ? rotationSpeed.xw * time : 0,\n yz: rotationSpeed.yz ? rotationSpeed.yz * time : 0,\n yw: rotationSpeed.yw ? rotationSpeed.yw * time : 0,\n zw: rotationSpeed.zw ? rotationSpeed.zw * time : 0\n };\n\n let rotation5D = undefined;\n if (dimension === 5) {\n rotation5D = {\n xy: rotationSpeed.xy ? rotationSpeed.xy * time : 0,\n xz: rotationSpeed.xz ? rotationSpeed.xz * time : 0,\n xw: rotationSpeed.xw ? rotationSpeed.xw * time : 0,\n xv: rotationSpeed.xv ? rotationSpeed.xv * time : 0,\n yz: rotationSpeed.yz ? rotationSpeed.yz * time : 0,\n yw: rotationSpeed.yw ? rotationSpeed.yw * time : 0,\n yv: rotationSpeed.yv ? rotationSpeed.yv * time : 0,\n zw: rotationSpeed.zw ? rotationSpeed.zw * time : 0,\n zv: rotationSpeed.zv ? rotationSpeed.zv * time : 0,\n wv: rotationSpeed.wv ? rotationSpeed.wv * time : 0\n };\n }\n\n const translation = dimension === 5 \n ? { x: 0, y: 0, z: 0, w: 0, v: 0 }\n : { x: 0, y: 0, z: 0, w: 0 };\n\n keyframes.push({\n rotation4D,\n rotation5D,\n scale: 1,\n translation\n });\n }\n \n return keyframes;\n }\n\n // Apply perspective correction for better visualization\n static applyPerspectiveCorrection(points: Vector4D[], viewDistance: number): Vector4D[] {\n return points.map(point => {\n // Adjust w-coordinate based on distance from viewer\n const distance = Math.sqrt(point.x * point.x + point.y * point.y + point.z * point.z);\n const correctedW = point.w + distance / viewDistance;\n \n return {\n x: point.x,\n y: point.y,\n z: point.z,\n w: correctedW\n };\n });\n }\n\n // Create transformation matrix for arbitrary axis rotation in 4D\n static createAxisRotation4D(axis1: Vector4D, axis2: Vector4D, angle: number): Matrix4D {\n // Normalize the axes\n const normalize = (v: Vector4D): Vector4D => {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w);\n return length > 0.001 ? {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length,\n w: v.w / length\n } : { x: 1, y: 0, z: 0, w: 0 };\n };\n\n const u = normalize(axis1);\n const v = normalize(axis2);\n \n // Create rotation matrix using Rodrigues' rotation formula extended to 4D\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n \n const matrix = [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ];\n\n // This is a simplified version - full implementation would be more complex\n for (let i = 0; i < 4; i++) {\n for (let j = 0; j < 4; j++) {\n const uComponent = [u.x, u.y, u.z, u.w][i] * [u.x, u.y, u.z, u.w][j];\n const vComponent = [v.x, v.y, v.z, v.w][i] * [v.x, v.y, v.z, v.w][j];\n \n matrix[i][j] = (i === j ? 1 : 0) + \n (cos - 1) * (uComponent + vComponent) +\n sin * (i === j ? 0 : (uComponent - vComponent));\n }\n }\n\n return { elements: matrix };\n }\n\n // Decompose a transformation matrix into its components\n static decompose4DMatrix(matrix: Matrix4D): {\n scale: Vector4D;\n rotation: { [key: string]: number };\n translation: Vector4D;\n } {\n const m = matrix.elements;\n \n // Extract translation (assuming it's in the last column)\n const translation: Vector4D = {\n x: m[0][3] || 0,\n y: m[1][3] || 0,\n z: m[2][3] || 0,\n w: m[3][3] || 0\n };\n\n // Extract scale\n const scaleX = Math.sqrt(m[0][0] * m[0][0] + m[1][0] * m[1][0] + m[2][0] * m[2][0] + m[3][0] * m[3][0]);\n const scaleY = Math.sqrt(m[0][1] * m[0][1] + m[1][1] * m[1][1] + m[2][1] * m[2][1] + m[3][1] * m[3][1]);\n const scaleZ = Math.sqrt(m[0][2] * m[0][2] + m[1][2] * m[1][2] + m[2][2] * m[2][2] + m[3][2] * m[3][2]);\n const scaleW = Math.sqrt(m[0][3] * m[0][3] + m[1][3] * m[1][3] + m[2][3] * m[2][3] + m[3][3] * m[3][3]);\n\n const scale: Vector4D = { x: scaleX, y: scaleY, z: scaleZ, w: scaleW };\n\n // Extract rotation (simplified - full implementation would be more complex)\n const rotation = {\n xy: Math.atan2(m[1][0], m[0][0]),\n xz: Math.atan2(m[2][0], m[0][0]),\n xw: Math.atan2(m[3][0], m[0][0]),\n yz: Math.atan2(m[2][1], m[1][1]),\n yw: Math.atan2(m[3][1], m[1][1]),\n zw: Math.atan2(m[3][2], m[2][2])\n };\n\n return { scale, rotation, translation };\n }\n\n // Create smooth easing functions for animations\n static easeInOutCubic(t: number): number {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n }\n\n static easeInOutQuart(t: number): number {\n return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;\n }\n\n static easeInOutSine(t: number): number {\n return -(Math.cos(Math.PI * t) - 1) / 2;\n }\n}",[],[247,263,256],"math","c1f21f22-5d5b-11f0-b796-0224a6c84d84","projections.ts","c3fb22c7-ff7a-4c91-8c7e-5a85e6ba5776",["D",1752130912555],"// Projection algorithms for higher-dimensional geometry\n\nimport { Vector3D, Vector4D, Vector5D, ProjectionSettings, Shape4D, Shape5D } from '../types.ts';\n\nexport class ProjectionEngine {\n // Project entire 4D shape to 3D\n static project4Dto3D(shape: Shape4D, settings: ProjectionSettings): any {\n const projectedVertices = shape.vertices.map(vertex => \n settings.perspective \n ? this.perspective4DTo3D(vertex, settings)\n : this.orthogonal4DTo3D(vertex)\n );\n \n return {\n vertices: projectedVertices,\n edges: shape.edges,\n faces: shape.faces,\n cells: shape.cells\n };\n }\n\n // Project entire 5D shape to 3D\n static project5Dto3D(shape: Shape5D, settings: ProjectionSettings): any {\n const projectedVertices = shape.vertices.map(vertex => \n settings.perspective \n ? this.perspective5DTo3D(vertex, settings)\n : this.orthogonal5DTo3D(vertex)\n );\n \n return {\n vertices: projectedVertices,\n edges: shape.edges,\n faces: shape.faces,\n cells: shape.cells,\n hypercells: shape.hypercells\n };\n }\n\n // Generic perspective projection method\n static perspectiveProjection(point: Vector4D | Vector5D, distance: number): Vector3D {\n if ('v' in point) {\n return this.perspective5DTo3D(point as Vector5D, { distance, perspective: true, viewAngle: 0 });\n } else {\n return this.perspective4DTo3D(point as Vector4D, { distance, perspective: true, viewAngle: 0 });\n }\n }\n\n // Generic orthogonal projection method\n static orthogonalProjection(point: Vector4D | Vector5D): Vector3D {\n if ('v' in point) {\n return this.orthogonal5DTo3D(point as Vector5D);\n } else {\n return this.orthogonal4DTo3D(point as Vector4D);\n }\n }\n\n // Generic stereographic projection method\n static stereographicProjection(point: Vector4D | Vector5D): Vector3D {\n if ('v' in point) {\n // For 5D, first project to 4D then to 3D\n const point4D: Vector4D = {\n x: point.x,\n y: point.y,\n z: point.z,\n w: point.w\n };\n return this.stereographic4DTo3D(point4D);\n } else {\n return this.stereographic4DTo3D(point as Vector4D);\n }\n }\n // Orthogonal projection from 4D to 3D\n static orthogonal4DTo3D(point: Vector4D): Vector3D {\n return {\n x: point.x,\n y: point.y,\n z: point.z\n };\n }\n\n // Perspective projection from 4D to 3D\n static perspective4DTo3D(point: Vector4D, settings: ProjectionSettings): Vector3D {\n const { distance, viewAngle } = settings;\n const factor = distance / (distance - point.w);\n \n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Stereographic projection from 4D to 3D\n static stereographic4DTo3D(point: Vector4D, radius: number = 1): Vector3D {\n const denominator = radius - point.w;\n if (Math.abs(denominator) < 0.001) {\n // Point at infinity, return a large value\n return { x: point.x * 1000, y: point.y * 1000, z: point.z * 1000 };\n }\n \n const factor = radius / denominator;\n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Double perspective projection from 5D to 3D\n static perspective5DTo3D(point: Vector5D, settings: ProjectionSettings): Vector3D {\n const { distance } = settings;\n \n // First projection: 5D to 4D\n const factor1 = distance / (distance - point.v);\n const point4D: Vector4D = {\n x: point.x * factor1,\n y: point.y * factor1,\n z: point.z * factor1,\n w: point.w * factor1\n };\n \n // Second projection: 4D to 3D\n return this.perspective4DTo3D(point4D, settings);\n }\n\n // Orthogonal projection from 5D to 3D (dropping two dimensions)\n static orthogonal5DTo3D(point: Vector5D, dropDimensions: [number, number] = [3, 4]): Vector3D {\n const coords = [point.x, point.y, point.z, point.w, point.v];\n const result = [0, 0, 0];\n let resultIndex = 0;\n \n for (let i = 0; i < 5; i++) {\n if (!dropDimensions.includes(i) && resultIndex < 3) {\n result[resultIndex] = coords[i];\n resultIndex++;\n }\n }\n \n return {\n x: result[0] || 0,\n y: result[1] || 0,\n z: result[2] || 0\n };\n }\n\n // Schlegel projection for 4D polytopes\n static schlegel4DTo3D(point: Vector4D, center: Vector4D, projectionPoint: Vector4D): Vector3D {\n // Vector from projection point to the point\n const direction = {\n x: point.x - projectionPoint.x,\n y: point.y - projectionPoint.y,\n z: point.z - projectionPoint.z,\n w: point.w - projectionPoint.w\n };\n \n // Find intersection with the 3D hyperplane (w = 0)\n if (Math.abs(direction.w) < 0.001) {\n return { x: point.x, y: point.y, z: point.z };\n }\n \n const t = -projectionPoint.w / direction.w;\n return {\n x: projectionPoint.x + t * direction.x,\n y: projectionPoint.y + t * direction.y,\n z: projectionPoint.z + t * direction.z\n };\n }\n\n // Parallel projection with custom direction\n static parallelProjection4D(point: Vector4D, direction: Vector4D, plane: Vector4D): Vector3D {\n // Project point onto the 3D plane perpendicular to the direction\n const dot = point.x * direction.x + point.y * direction.y + \n point.z * direction.z + point.w * direction.w;\n const planeDot = plane.x * direction.x + plane.y * direction.y + \n plane.z * direction.z + plane.w * direction.w;\n \n if (Math.abs(planeDot) < 0.001) {\n return { x: point.x, y: point.y, z: point.z };\n }\n \n const t = dot / planeDot;\n return {\n x: point.x - t * plane.x,\n y: point.y - t * plane.y,\n z: point.z - t * plane.z\n };\n }\n\n // Fisheye projection for wide-angle viewing\n static fisheye4DTo3D(point: Vector4D, fov: number = Math.PI / 2): Vector3D {\n const r = Math.sqrt(point.x * point.x + point.y * point.y + point.z * point.z + point.w * point.w);\n if (r < 0.001) return { x: 0, y: 0, z: 0 };\n \n const theta = Math.acos(Math.abs(point.w) / r);\n const phi = Math.atan2(point.y, point.x);\n const psi = Math.atan2(Math.sqrt(point.x * point.x + point.y * point.y), point.z);\n \n const fisheyeR = (2 * theta / fov) * Math.sin(fov / 2);\n \n return {\n x: fisheyeR * Math.cos(phi) * Math.sin(psi),\n y: fisheyeR * Math.sin(phi) * Math.sin(psi),\n z: fisheyeR * Math.cos(psi)\n };\n }\n\n // Adaptive projection that chooses the best method based on the data\n static adaptiveProjection(points: Vector4D[], settings: ProjectionSettings): Vector3D[] {\n // Analyze the distribution of w-coordinates\n const wValues = points.map(p => p.w);\n const minW = Math.min(...wValues);\n const maxW = Math.max(...wValues);\n const wRange = maxW - minW;\n \n // Choose projection method based on w-distribution\n if (wRange < 0.1) {\n // Points are mostly in the same w-plane, use orthogonal\n return points.map(p => this.orthogonal4DTo3D(p));\n } else if (minW > -settings.distance * 0.9) {\n // No points too close to the projection center, use perspective\n return points.map(p => this.perspective4DTo3D(p, settings));\n } else {\n // Some points might cause issues with perspective, use stereographic\n return points.map(p => this.stereographic4DTo3D(p));\n }\n }\n\n // Cross-section projection: project a 4D cross-section to 2D\n static crossSection4DTo2D(point: Vector4D, normal: Vector4D): { x: number; y: number } {\n // Find two orthogonal vectors in the 3D subspace perpendicular to normal\n const u = this.findOrthogonalVector4D(normal);\n const v = this.crossProduct4D(normal, u);\n \n // Project point onto the 2D plane spanned by u and v\n const uDot = point.x * u.x + point.y * u.y + point.z * u.z + point.w * u.w;\n const vDot = point.x * v.x + point.y * v.y + point.z * v.z + point.w * v.w;\n \n return { x: uDot, y: vDot };\n }\n\n // Helper function to find an orthogonal vector in 4D\n private static findOrthogonalVector4D(v: Vector4D): Vector4D {\n // Find the component with the smallest absolute value\n const abs = [Math.abs(v.x), Math.abs(v.y), Math.abs(v.z), Math.abs(v.w)];\n const minIndex = abs.indexOf(Math.min(...abs));\n \n const result = { x: 0, y: 0, z: 0, w: 0 };\n switch (minIndex) {\n case 0: result.x = 1; break;\n case 1: result.y = 1; break;\n case 2: result.z = 1; break;\n case 3: result.w = 1; break;\n }\n \n // Make it orthogonal using Gram-Schmidt\n const dot = result.x * v.x + result.y * v.y + result.z * v.z + result.w * v.w;\n const vLengthSq = v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w;\n \n if (vLengthSq > 0.001) {\n const factor = dot / vLengthSq;\n result.x -= factor * v.x;\n result.y -= factor * v.y;\n result.z -= factor * v.z;\n result.w -= factor * v.w;\n }\n \n // Normalize\n const length = Math.sqrt(result.x * result.x + result.y * result.y + \n result.z * result.z + result.w * result.w);\n if (length > 0.001) {\n result.x /= length;\n result.y /= length;\n result.z /= length;\n result.w /= length;\n }\n \n return result;\n }\n\n // Helper function for 4D cross product (returns a vector orthogonal to both inputs)\n private static crossProduct4D(a: Vector4D, b: Vector4D): Vector4D {\n // This is a simplified version - true 4D cross product is more complex\n return {\n x: a.y * b.z - a.z * b.y,\n y: a.z * b.x - a.x * b.z,\n z: a.x * b.y - a.y * b.x,\n w: 0 // Simplified\n };\n }\n}",[],[247,263,265],"c1f210ae-5d5b-11f0-b796-0224a6c84d84","geometry5d.ts","24282f6d-0069-41c1-998e-54b8a4e22c19",["D",1752130912555],"// 5D Geometry calculations and shape generation\n\nimport { Vector5D, Vector3D, Shape5D, Edge, Face, Cell, Matrix5D } from '../types.ts';\n\nexport class Geometry5D {\n // Create a 5D rotation matrix for the given plane and angle\n static createRotationMatrix(plane: string, angle: number): Matrix5D {\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n const matrix = Array(5).fill(null).map(() => Array(5).fill(0));\n \n // Initialize as identity matrix\n for (let i = 0; i < 5; i++) {\n matrix[i][i] = 1;\n }\n\n switch (plane) {\n case 'xy':\n matrix[0][0] = cos; matrix[0][1] = -sin;\n matrix[1][0] = sin; matrix[1][1] = cos;\n break;\n case 'xz':\n matrix[0][0] = cos; matrix[0][2] = -sin;\n matrix[2][0] = sin; matrix[2][2] = cos;\n break;\n case 'xw':\n matrix[0][0] = cos; matrix[0][3] = -sin;\n matrix[3][0] = sin; matrix[3][3] = cos;\n break;\n case 'xv':\n matrix[0][0] = cos; matrix[0][4] = -sin;\n matrix[4][0] = sin; matrix[4][4] = cos;\n break;\n case 'yz':\n matrix[1][1] = cos; matrix[1][2] = -sin;\n matrix[2][1] = sin; matrix[2][2] = cos;\n break;\n case 'yw':\n matrix[1][1] = cos; matrix[1][3] = -sin;\n matrix[3][1] = sin; matrix[3][3] = cos;\n break;\n case 'yv':\n matrix[1][1] = cos; matrix[1][4] = -sin;\n matrix[4][1] = sin; matrix[4][4] = cos;\n break;\n case 'zw':\n matrix[2][2] = cos; matrix[2][3] = -sin;\n matrix[3][2] = sin; matrix[3][3] = cos;\n break;\n case 'zv':\n matrix[2][2] = cos; matrix[2][4] = -sin;\n matrix[4][2] = sin; matrix[4][4] = cos;\n break;\n case 'wv':\n matrix[3][3] = cos; matrix[3][4] = -sin;\n matrix[4][3] = sin; matrix[4][4] = cos;\n break;\n }\n\n return { elements: matrix };\n }\n\n // Apply transformation matrix to a 5D vector\n static transformVector(vector: Vector5D, matrix: Matrix5D): Vector5D {\n const { x, y, z, w, v } = vector;\n const m = matrix.elements;\n \n return {\n x: m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3] * w + m[0][4] * v,\n y: m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3] * w + m[1][4] * v,\n z: m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3] * w + m[2][4] * v,\n w: m[3][0] * x + m[3][1] * y + m[3][2] * z + m[3][3] * w + m[3][4] * v,\n v: m[4][0] * x + m[4][1] * y + m[4][2] * z + m[4][3] * w + m[4][4] * v\n };\n }\n\n // Project 5D point to 3D using double perspective projection\n static projectTo3D(point: Vector5D, distance1: number = 2, distance2: number = 2): Vector3D {\n // First project from 5D to 4D\n const factor1 = distance1 / (distance1 - point.v);\n const point4D = {\n x: point.x * factor1,\n y: point.y * factor1,\n z: point.z * factor1,\n w: point.w * factor1\n };\n \n // Then project from 4D to 3D\n const factor2 = distance2 / (distance2 - point4D.w);\n return {\n x: point4D.x * factor2,\n y: point4D.y * factor2,\n z: point4D.z * factor2\n };\n }\n\n // Generate penteract (5D cube) vertices and structure\n static createPenteract(): Shape5D {\n const vertices: Vector5D[] = [];\n \n // Generate all 32 vertices of a penteract\n for (let i = 0; i < 32; i++) {\n vertices.push({\n x: (i & 1) ? 1 : -1,\n y: (i & 2) ? 1 : -1,\n z: (i & 4) ? 1 : -1,\n w: (i & 8) ? 1 : -1,\n v: (i & 16) ? 1 : -1\n });\n }\n\n // Generate edges\n const edges: Edge[] = [];\n for (let i = 0; i < 32; i++) {\n for (let j = i + 1; j < 32; j++) {\n // Two vertices are connected if they differ in exactly one coordinate\n const diff = [\n vertices[i].x !== vertices[j].x ? 1 : 0,\n vertices[i].y !== vertices[j].y ? 1 : 0,\n vertices[i].z !== vertices[j].z ? 1 : 0,\n vertices[i].w !== vertices[j].w ? 1 : 0,\n vertices[i].v !== vertices[j].v ? 1 : 0\n ].reduce((sum, val) => sum + val, 0);\n \n if (diff === 1) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate faces (simplified)\n const faces: Face[] = [];\n for (let dim1 = 0; dim1 < 5; dim1++) {\n for (let dim2 = dim1 + 1; dim2 < 5; dim2++) {\n for (let val1 = -1; val1 <= 1; val1 += 2) {\n for (let val2 = -1; val2 <= 1; val2 += 2) {\n for (let val3 = -1; val3 <= 1; val3 += 2) {\n const faceVertices: number[] = [];\n for (let i = 0; i < 32; i++) {\n const coords = [vertices[i].x, vertices[i].y, vertices[i].z, vertices[i].w, vertices[i].v];\n let matches = 0;\n if (coords[dim1] === val1) matches++;\n if (coords[dim2] === val2) matches++;\n if (matches === 2) {\n faceVertices.push(i);\n }\n }\n if (faceVertices.length === 4) {\n faces.push({ vertices: faceVertices });\n }\n }\n }\n }\n }\n }\n\n // Generate cells and hypercells (simplified)\n const cells: Cell[] = [];\n const hypercells: Cell[] = [];\n \n // This is a simplified version - full implementation would be much more complex\n for (let i = 0; i < Math.min(faces.length, 40); i += 6) {\n if (i + 5 < faces.length) {\n cells.push({ faces: [i, i + 1, i + 2, i + 3, i + 4, i + 5] });\n }\n }\n\n for (let i = 0; i < Math.min(cells.length, 10); i += 8) {\n if (i + 7 < cells.length) {\n hypercells.push({ faces: [i, i + 1, i + 2, i + 3, i + 4, i + 5, i + 6, i + 7] });\n }\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n hypercells,\n name: 'Penteract'\n };\n }\n\n // Generate 5-simplex (5D tetrahedron)\n static create5Simplex(): Shape5D {\n const vertices: Vector5D[] = [\n { x: 1, y: 0, z: 0, w: 0, v: 0 },\n { x: 0, y: 1, z: 0, w: 0, v: 0 },\n { x: 0, y: 0, z: 1, w: 0, v: 0 },\n { x: 0, y: 0, z: 0, w: 1, v: 0 },\n { x: 0, y: 0, z: 0, w: 0, v: 1 },\n { x: -1/5, y: -1/5, z: -1/5, w: -1/5, v: -1/5 }\n ];\n\n const edges: Edge[] = [];\n // Connect all vertices to each other\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n edges.push({ start: i, end: j });\n }\n }\n\n // Generate triangular faces\n const faces: Face[] = [];\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n for (let k = j + 1; k < 6; k++) {\n faces.push({ vertices: [i, j, k] });\n }\n }\n }\n\n // Generate tetrahedral cells\n const cells: Cell[] = [];\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n for (let k = j + 1; k < 6; k++) {\n for (let l = k + 1; l < 6; l++) {\n cells.push({ faces: [i, j, k, l] }); // Simplified\n }\n }\n }\n }\n\n const hypercells: Cell[] = [\n { faces: [0, 1, 2, 3, 4] } // Single 5-cell\n ];\n\n return {\n vertices,\n edges,\n faces,\n cells,\n hypercells,\n name: '5-Simplex'\n };\n }\n\n // Calculate cross-section of 5D shape with a 4D hyperplane\n static calculateCrossSection(shape: Shape5D, vValue: number): Vector3D[] {\n const crossSectionPoints: Vector3D[] = [];\n \n // Find intersections of edges with the hyperplane v = vValue\n for (const edge of shape.edges) {\n const v1 = shape.vertices[edge.start];\n const v2 = shape.vertices[edge.end];\n \n // Check if edge crosses the hyperplane\n if ((v1.v <= vValue && v2.v >= vValue) || (v1.v >= vValue && v2.v <= vValue)) {\n if (Math.abs(v1.v - v2.v) > 0.001) {\n // Calculate intersection point\n const t = (vValue - v1.v) / (v2.v - v1.v);\n const intersection4D = {\n x: v1.x + t * (v2.x - v1.x),\n y: v1.y + t * (v2.y - v1.y),\n z: v1.z + t * (v2.z - v1.z),\n w: v1.w + t * (v2.w - v1.w)\n };\n \n // Project 4D intersection to 3D\n const factor = 2 / (2 - intersection4D.w);\n crossSectionPoints.push({\n x: intersection4D.x * factor,\n y: intersection4D.y * factor,\n z: intersection4D.z * factor\n });\n }\n }\n }\n \n return crossSectionPoints;\n }\n\n // Multiply two 5D matrices\n static multiplyMatrices(a: Matrix5D, b: Matrix5D): Matrix5D {\n const result = Array(5).fill(null).map(() => Array(5).fill(0));\n \n for (let i = 0; i < 5; i++) {\n for (let j = 0; j < 5; j++) {\n for (let k = 0; k < 5; k++) {\n result[i][j] += a.elements[i][k] * b.elements[k][j];\n }\n }\n }\n \n return { elements: result };\n }\n\n // Create composite rotation matrix from multiple rotations\n static createCompositeRotation(rotations: { [key: string]: number }): Matrix5D {\n let result: Matrix5D = { \n elements: Array(5).fill(null).map((_, i) => \n Array(5).fill(null).map((_, j) => i === j ? 1 : 0)\n )\n };\n\n for (const [plane, angle] of Object.entries(rotations)) {\n if (angle !== 0) {\n const rotMatrix = this.createRotationMatrix(plane, angle);\n result = this.multiplyMatrices(result, rotMatrix);\n }\n }\n\n return result;\n }\n\n // Generate 5-orthoplex (5D cross-polytope)\n static create5Orthoplex(): Shape5D {\n const vertices: Vector5D[] = [\n { x: 1, y: 0, z: 0, w: 0, v: 0 },\n { x: -1, y: 0, z: 0, w: 0, v: 0 },\n { x: 0, y: 1, z: 0, w: 0, v: 0 },\n { x: 0, y: -1, z: 0, w: 0, v: 0 },\n { x: 0, y: 0, z: 1, w: 0, v: 0 },\n { x: 0, y: 0, z: -1, w: 0, v: 0 },\n { x: 0, y: 0, z: 0, w: 1, v: 0 },\n { x: 0, y: 0, z: 0, w: -1, v: 0 },\n { x: 0, y: 0, z: 0, w: 0, v: 1 },\n { x: 0, y: 0, z: 0, w: 0, v: -1 }\n ];\n\n const edges: Edge[] = [];\n // Connect vertices that are not opposite to each other\n for (let i = 0; i < 10; i++) {\n for (let j = i + 1; j < 10; j++) {\n const v1 = vertices[i];\n const v2 = vertices[j];\n // Check if they're not opposite (dot product != -1)\n const dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z + v1.w * v2.w + v1.v * v2.v;\n if (Math.abs(dot + 1) > 0.001) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate triangular faces\n const faces: Face[] = [];\n for (let i = 0; i < 10; i++) {\n for (let j = i + 1; j < 10; j++) {\n for (let k = j + 1; k < 10; k++) {\n // Check if these three vertices form a valid triangular face\n const v1 = vertices[i];\n const v2 = vertices[j];\n const v3 = vertices[k];\n \n // Simplified check\n const sum = Math.abs(v1.x + v2.x + v3.x) + \n Math.abs(v1.y + v2.y + v3.y) + \n Math.abs(v1.z + v2.z + v3.z) + \n Math.abs(v1.w + v2.w + v3.w) +\n Math.abs(v1.v + v2.v + v3.v);\n \n if (Math.abs(sum - 1) < 0.001) {\n faces.push({ vertices: [i, j, k] });\n }\n }\n }\n }\n\n // Generate tetrahedral cells\n const cells: Cell[] = [];\n for (let i = 0; i < faces.length; i += 4) {\n if (i + 3 < faces.length) {\n cells.push({ faces: [i, i + 1, i + 2, i + 3] });\n }\n }\n\n // Generate 4-cells (hypercells)\n const hypercells: Cell[] = [];\n for (let i = 0; i < cells.length; i += 8) {\n if (i + 7 < cells.length) {\n hypercells.push({ faces: [i, i + 1, i + 2, i + 3, i + 4, i + 5, i + 6, i + 7] });\n }\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n hypercells,\n name: '5-Orthoplex'\n };\n }\n}",[],[247,263,272],"c1f20398-5d5b-11f0-b796-0224a6c84d84","geometry4d.ts","e98ee529-15c3-4f4d-a768-1826ae063c55",["D",1752130912555],"// 4D Geometry calculations and shape generation\n\nimport { Vector4D, Vector3D, Shape4D, Edge, Face, Cell, Matrix4D } from '../types.ts';\n\nexport class Geometry4D {\n // Create a 4D rotation matrix for the given plane and angle\n static createRotationMatrix(plane: string, angle: number): Matrix4D {\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n const matrix = [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ];\n\n switch (plane) {\n case 'xy':\n matrix[0][0] = cos; matrix[0][1] = -sin;\n matrix[1][0] = sin; matrix[1][1] = cos;\n break;\n case 'xz':\n matrix[0][0] = cos; matrix[0][2] = -sin;\n matrix[2][0] = sin; matrix[2][2] = cos;\n break;\n case 'xw':\n matrix[0][0] = cos; matrix[0][3] = -sin;\n matrix[3][0] = sin; matrix[3][3] = cos;\n break;\n case 'yz':\n matrix[1][1] = cos; matrix[1][2] = -sin;\n matrix[2][1] = sin; matrix[2][2] = cos;\n break;\n case 'yw':\n matrix[1][1] = cos; matrix[1][3] = -sin;\n matrix[3][1] = sin; matrix[3][3] = cos;\n break;\n case 'zw':\n matrix[2][2] = cos; matrix[2][3] = -sin;\n matrix[3][2] = sin; matrix[3][3] = cos;\n break;\n }\n\n return { elements: matrix };\n }\n\n // Apply transformation matrix to a 4D vector\n static transformVector(vector: Vector4D, matrix: Matrix4D): Vector4D {\n const { x, y, z, w } = vector;\n const m = matrix.elements;\n \n return {\n x: m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3] * w,\n y: m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3] * w,\n z: m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3] * w,\n w: m[3][0] * x + m[3][1] * y + m[3][2] * z + m[3][3] * w\n };\n }\n\n // Project 4D point to 3D using perspective projection\n static projectTo3D(point: Vector4D, distance: number = 2): Vector3D {\n const factor = distance / (distance - point.w);\n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Generate tesseract (4D cube) vertices and structure\n static createTesseract(): Shape4D {\n const vertices: Vector4D[] = [];\n \n // Generate all 16 vertices of a tesseract\n for (let i = 0; i < 16; i++) {\n vertices.push({\n x: (i & 1) ? 1 : -1,\n y: (i & 2) ? 1 : -1,\n z: (i & 4) ? 1 : -1,\n w: (i & 8) ? 1 : -1\n });\n }\n\n // Generate edges (32 edges total)\n const edges: Edge[] = [];\n for (let i = 0; i < 16; i++) {\n for (let j = i + 1; j < 16; j++) {\n // Two vertices are connected if they differ in exactly one coordinate\n const diff = [\n vertices[i].x !== vertices[j].x ? 1 : 0,\n vertices[i].y !== vertices[j].y ? 1 : 0,\n vertices[i].z !== vertices[j].z ? 1 : 0,\n vertices[i].w !== vertices[j].w ? 1 : 0\n ].reduce((sum, val) => sum + val, 0);\n \n if (diff === 1) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate faces (24 square faces)\n const faces: Face[] = [];\n // Each face is defined by 4 vertices that form a square\n // This is a simplified version - full implementation would be more complex\n for (let dim1 = 0; dim1 < 4; dim1++) {\n for (let dim2 = dim1 + 1; dim2 < 4; dim2++) {\n for (let val1 = -1; val1 <= 1; val1 += 2) {\n for (let val2 = -1; val2 <= 1; val2 += 2) {\n const faceVertices: number[] = [];\n for (let i = 0; i < 16; i++) {\n const coords = [vertices[i].x, vertices[i].y, vertices[i].z, vertices[i].w];\n if (coords[dim1] === val1 && coords[dim2] === val2) {\n faceVertices.push(i);\n }\n }\n if (faceVertices.length === 4) {\n faces.push({ vertices: faceVertices });\n }\n }\n }\n }\n }\n\n // Generate cells (8 cubic cells)\n const cells: Cell[] = [];\n for (let w = -1; w <= 1; w += 2) {\n cells.push({ faces: faces.map((_, i) => i).slice(0, 6) }); // Simplified\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n name: 'Tesseract'\n };\n }\n\n // Generate 16-cell (4D cross-polytope)\n static create16Cell(): Shape4D {\n const vertices: Vector4D[] = [\n { x: 1, y: 0, z: 0, w: 0 },\n { x: -1, y: 0, z: 0, w: 0 },\n { x: 0, y: 1, z: 0, w: 0 },\n { x: 0, y: -1, z: 0, w: 0 },\n { x: 0, y: 0, z: 1, w: 0 },\n { x: 0, y: 0, z: -1, w: 0 },\n { x: 0, y: 0, z: 0, w: 1 },\n { x: 0, y: 0, z: 0, w: -1 }\n ];\n\n const edges: Edge[] = [];\n // Connect vertices that are not opposite to each other\n for (let i = 0; i < 8; i++) {\n for (let j = i + 1; j < 8; j++) {\n const v1 = vertices[i];\n const v2 = vertices[j];\n // Check if they're not opposite (dot product != -1)\n const dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z + v1.w * v2.w;\n if (Math.abs(dot + 1) > 0.001) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate triangular faces\n const faces: Face[] = [];\n for (let i = 0; i < 8; i++) {\n for (let j = i + 1; j < 8; j++) {\n for (let k = j + 1; k < 8; k++) {\n // Check if these three vertices form a valid triangular face\n const v1 = vertices[i];\n const v2 = vertices[j];\n const v3 = vertices[k];\n \n // Simplified check - in a real implementation, this would be more sophisticated\n const sum = Math.abs(v1.x + v2.x + v3.x) + \n Math.abs(v1.y + v2.y + v3.y) + \n Math.abs(v1.z + v2.z + v3.z) + \n Math.abs(v1.w + v2.w + v3.w);\n \n if (Math.abs(sum - 1) < 0.001) {\n faces.push({ vertices: [i, j, k] });\n }\n }\n }\n }\n\n const cells: Cell[] = [];\n // Each cell is a tetrahedron\n for (let i = 0; i < faces.length; i += 4) {\n if (i + 3 < faces.length) {\n cells.push({ faces: [i, i + 1, i + 2, i + 3] });\n }\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n name: '16-Cell'\n };\n }\n\n // Calculate cross-section of 4D shape with a 3D hyperplane\n static calculateCrossSection(shape: Shape4D, wValue: number): Vector3D[] {\n const crossSectionPoints: Vector3D[] = [];\n \n // Find intersections of edges with the hyperplane w = wValue\n for (const edge of shape.edges) {\n const v1 = shape.vertices[edge.start];\n const v2 = shape.vertices[edge.end];\n \n // Check if edge crosses the hyperplane\n if ((v1.w <= wValue && v2.w >= wValue) || (v1.w >= wValue && v2.w <= wValue)) {\n if (Math.abs(v1.w - v2.w) > 0.001) {\n // Calculate intersection point\n const t = (wValue - v1.w) / (v2.w - v1.w);\n const intersection = {\n x: v1.x + t * (v2.x - v1.x),\n y: v1.y + t * (v2.y - v1.y),\n z: v1.z + t * (v2.z - v1.z)\n };\n crossSectionPoints.push(intersection);\n }\n }\n }\n \n return crossSectionPoints;\n }\n\n // Multiply two 4D matrices\n static multiplyMatrices(a: Matrix4D, b: Matrix4D): Matrix4D {\n const result = Array(4).fill(null).map(() => Array(4).fill(0));\n \n for (let i = 0; i < 4; i++) {\n for (let j = 0; j < 4; j++) {\n for (let k = 0; k < 4; k++) {\n result[i][j] += a.elements[i][k] * b.elements[k][j];\n }\n }\n }\n \n return { elements: result };\n }\n\n // Create composite rotation matrix from multiple rotations\n static createCompositeRotation(rotations: { [key: string]: number }): Matrix4D {\n let result: Matrix4D = { elements: [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ]};\n\n for (const [plane, angle] of Object.entries(rotations)) {\n if (angle !== 0) {\n const rotMatrix = this.createRotationMatrix(plane, angle);\n result = this.multiplyMatrices(result, rotMatrix);\n }\n }\n\n return result;\n }\n\n // Generate 600-cell (complex 4D polytope)\n static create600Cell(): Shape4D {\n const vertices: Vector4D[] = [];\n const phi = (1 + Math.sqrt(5)) / 2; // Golden ratio\n \n // Generate vertices using golden ratio coordinates\n // 16 vertices from tesseract\n for (let i = 0; i < 16; i++) {\n vertices.push({\n x: (i & 1) ? 1/phi : -1/phi,\n y: (i & 2) ? 1/phi : -1/phi,\n z: (i & 4) ? 1/phi : -1/phi,\n w: (i & 8) ? 1/phi : -1/phi\n });\n }\n \n // 8 vertices from 16-cell scaled by phi\n const crossVertices = [\n { x: phi, y: 0, z: 0, w: 0 },\n { x: -phi, y: 0, z: 0, w: 0 },\n { x: 0, y: phi, z: 0, w: 0 },\n { x: 0, y: -phi, z: 0, w: 0 },\n { x: 0, y: 0, z: phi, w: 0 },\n { x: 0, y: 0, z: -phi, w: 0 },\n { x: 0, y: 0, z: 0, w: phi },\n { x: 0, y: 0, z: 0, w: -phi }\n ];\n vertices.push(...crossVertices);\n \n // 96 additional vertices from even permutations of (±1, ±φ, 0, 0)\n const coords = [1, -1, phi, -phi, 0];\n for (let i = 0; i < coords.length; i++) {\n for (let j = 0; j < coords.length; j++) {\n for (let k = 0; k < coords.length; k++) {\n for (let l = 0; l < coords.length; l++) {\n if (i !== j && j !== k && k !== l && i !== k && i !== l && j !== l) {\n const vertex = { x: coords[i], y: coords[j], z: coords[k], w: coords[l] };\n // Check if this vertex is not already in the list\n const exists = vertices.some(v => \n Math.abs(v.x - vertex.x) < 0.001 && \n Math.abs(v.y - vertex.y) < 0.001 && \n Math.abs(v.z - vertex.z) < 0.001 && \n Math.abs(v.w - vertex.w) < 0.001\n );\n if (!exists && vertices.length < 120) {\n vertices.push(vertex);\n }\n }\n }\n }\n }\n }\n\n // Generate edges (720 edges)\n const edges: Edge[] = [];\n const edgeLength = 2 / phi; // Distance between adjacent vertices\n \n for (let i = 0; i < vertices.length; i++) {\n for (let j = i + 1; j < vertices.length; j++) {\n const v1 = vertices[i];\n const v2 = vertices[j];\n const distance = Math.sqrt(\n (v1.x - v2.x) ** 2 + (v1.y - v2.y) ** 2 + \n (v1.z - v2.z) ** 2 + (v1.w - v2.w) ** 2\n );\n \n if (Math.abs(distance - edgeLength) < 0.1) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate faces (1200 triangular faces) - simplified\n const faces: Face[] = [];\n for (let i = 0; i < Math.min(1200, edges.length * 2); i++) {\n // Simplified face generation\n const edgeIndex = i % edges.length;\n const edge = edges[edgeIndex];\n \n // Find a third vertex that forms a triangle with this edge\n for (let k = 0; k < vertices.length; k++) {\n if (k !== edge.start && k !== edge.end) {\n faces.push({ vertices: [edge.start, edge.end, k] });\n break;\n }\n }\n }\n\n // Generate cells (600 tetrahedral cells) - simplified\n const cells: Cell[] = [];\n for (let i = 0; i < Math.min(600, faces.length / 4); i++) {\n cells.push({ faces: [i * 4, i * 4 + 1, i * 4 + 2, i * 4 + 3] });\n }\n\n return {\n vertices: vertices.slice(0, 120), // Ensure exactly 120 vertices\n edges: edges.slice(0, 720), // Ensure exactly 720 edges\n faces: faces.slice(0, 1200), // Ensure exactly 1200 faces\n cells: cells.slice(0, 600), // Ensure exactly 600 cells\n name: '600-Cell'\n };\n }\n\n // Generate 120-cell (dual of 600-cell)\n static create120Cell(): Shape4D {\n const vertices: Vector4D[] = [];\n const phi = (1 + Math.sqrt(5)) / 2; // Golden ratio\n \n // The 120-cell has 600 vertices, but we'll create a simplified version\n // with the most important vertices for visualization\n \n // 24 vertices from the 24-cell\n const coords24 = [\n [1, 1, 0, 0], [1, -1, 0, 0], [-1, 1, 0, 0], [-1, -1, 0, 0],\n [1, 0, 1, 0], [1, 0, -1, 0], [-1, 0, 1, 0], [-1, 0, -1, 0],\n [1, 0, 0, 1], [1, 0, 0, -1], [-1, 0, 0, 1], [-1, 0, 0, -1],\n [0, 1, 1, 0], [0, 1, -1, 0], [0, -1, 1, 0], [0, -1, -1, 0],\n [0, 1, 0, 1], [0, 1, 0, -1], [0, -1, 0, 1], [0, -1, 0, -1],\n [0, 0, 1, 1], [0, 0, 1, -1], [0, 0, -1, 1], [0, 0, -1, -1]\n ];\n \n coords24.forEach(coord => {\n vertices.push({ x: coord[0], y: coord[1], z: coord[2], w: coord[3] });\n });\n \n // Add vertices with golden ratio coordinates\n for (let i = 0; i < 100; i++) {\n const angle1 = (i * 2 * Math.PI) / 100;\n const angle2 = (i * Math.PI) / 50;\n vertices.push({\n x: Math.cos(angle1) * Math.sin(angle2),\n y: Math.sin(angle1) * Math.sin(angle2),\n z: Math.cos(angle2),\n w: phi * Math.sin(angle1 + angle2)\n });\n }\n\n // Generate edges\n const edges: Edge[] = [];\n for (let i = 0; i < vertices.length; i++) {\n for (let j = i + 1; j < vertices.length; j++) {\n const v1 = vertices[i];\n const v2 = vertices[j];\n const distance = Math.sqrt(\n (v1.x - v2.x) ** 2 + (v1.y - v2.y) ** 2 + \n (v1.z - v2.z) ** 2 + (v1.w - v2.w) ** 2\n );\n \n if (distance < 2.5 && distance > 0.5) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate pentagonal faces\n const faces: Face[] = [];\n for (let i = 0; i < Math.min(720, edges.length / 2); i++) {\n // Create pentagonal faces - simplified approach\n const centerVertex = i % vertices.length;\n const nearbyVertices: number[] = [];\n \n for (let j = 0; j < vertices.length && nearbyVertices.length < 5; j++) {\n if (j !== centerVertex) {\n const distance = Math.sqrt(\n (vertices[centerVertex].x - vertices[j].x) ** 2 +\n (vertices[centerVertex].y - vertices[j].y) ** 2 +\n (vertices[centerVertex].z - vertices[j].z) ** 2 +\n (vertices[centerVertex].w - vertices[j].w) ** 2\n );\n if (distance < 2.0) {\n nearbyVertices.push(j);\n }\n }\n }\n \n if (nearbyVertices.length >= 5) {\n faces.push({ vertices: nearbyVertices.slice(0, 5) });\n }\n }\n\n // Generate dodecahedral cells\n const cells: Cell[] = [];\n for (let i = 0; i < Math.min(120, faces.length / 6); i++) {\n cells.push({ faces: [i * 6, i * 6 + 1, i * 6 + 2, i * 6 + 3, i * 6 + 4, i * 6 + 5] });\n }\n\n return {\n vertices: vertices.slice(0, 600), // Limit to reasonable number for performance\n edges: edges.slice(0, 1200),\n faces: faces.slice(0, 720),\n cells: cells.slice(0, 120),\n name: '120-Cell'\n };\n }\n\n // Enhanced cross-section calculation with hyperplane\n static calculateCrossSection(shape: Shape4D, hyperplane: { position: number, normal: Vector4D }): any {\n const crossSectionVertices: Vector3D[] = [];\n const crossSectionEdges: Edge[] = [];\n \n // Find intersections of edges with the hyperplane\n for (let i = 0; i < shape.edges.length; i++) {\n const edge = shape.edges[i];\n const v1 = shape.vertices[edge.start];\n const v2 = shape.vertices[edge.end];\n \n // Calculate signed distances from hyperplane\n const d1 = (v1.x * hyperplane.normal.x + v1.y * hyperplane.normal.y + \n v1.z * hyperplane.normal.z + v1.w * hyperplane.normal.w) - hyperplane.position;\n const d2 = (v2.x * hyperplane.normal.x + v2.y * hyperplane.normal.y + \n v2.z * hyperplane.normal.z + v2.w * hyperplane.normal.w) - hyperplane.position;\n \n // Check if edge crosses the hyperplane\n if (d1 * d2 < 0) {\n const t = Math.abs(d1) / (Math.abs(d1) + Math.abs(d2));\n const intersection = {\n x: v1.x + t * (v2.x - v1.x),\n y: v1.y + t * (v2.y - v1.y),\n z: v1.z + t * (v2.z - v1.z)\n };\n crossSectionVertices.push(intersection);\n }\n }\n \n // Generate edges for the cross-section\n for (let i = 0; i < crossSectionVertices.length; i++) {\n for (let j = i + 1; j < crossSectionVertices.length; j++) {\n const v1 = crossSectionVertices[i];\n const v2 = crossSectionVertices[j];\n const distance = Math.sqrt(\n (v1.x - v2.x) ** 2 + (v1.y - v2.y) ** 2 + (v1.z - v2.z) ** 2\n );\n \n if (distance < 2.0 && distance > 0.1) {\n crossSectionEdges.push({ start: i, end: j });\n }\n }\n }\n \n return {\n vertices: crossSectionVertices,\n edges: crossSectionEdges,\n faces: [], // Would need more complex algorithm for faces\n name: `${shape.name} Cross-Section`\n };\n }\n\n // Calculate distance between two 4D points\n static distance4D(v1: Vector4D, v2: Vector4D): number {\n return Math.sqrt(\n (v1.x - v2.x) ** 2 + (v1.y - v2.y) ** 2 + \n (v1.z - v2.z) ** 2 + (v1.w - v2.w) ** 2\n );\n }\n\n // Normalize a 4D vector\n static normalize4D(v: Vector4D): Vector4D {\n const length = Math.sqrt(v.x ** 2 + v.y ** 2 + v.z ** 2 + v.w ** 2);\n if (length === 0) return { x: 0, y: 0, z: 0, w: 0 };\n \n return {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length,\n w: v.w / length\n };\n }\n\n // Calculate 4D dot product\n static dot4D(v1: Vector4D, v2: Vector4D): number {\n return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z + v1.w * v2.w;\n }\n}",[],[247,263,279],"c1f231ec-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[207,208,209,210],[247,263],"c1f23e9e-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[206,211,212],[247],"c1f1f9ac-5d5b-11f0-b796-0224a6c84d84","style.css","1b32d134-b935-4904-aaa5-56c5acd9626c","c5ce2f12-b864-4e95-91e1-fe3794aaaa03",["D",1752130912555],"/* Additional styles for the Higher Dimensional Geometry Visualizer */\n\n/* Custom scrollbar for control panel */\n.control-panel::-webkit-scrollbar {\n width: 6px;\n}\n\n.control-panel::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 3px;\n}\n\n.control-panel::-webkit-scrollbar-thumb {\n background: rgba(0, 212, 255, 0.5);\n border-radius: 3px;\n}\n\n.control-panel::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 212, 255, 0.7);\n}\n\n/* Animation for loading screen */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes fadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-20px); }\n}\n\n.fade-in {\n animation: fadeIn 0.5s ease-out;\n}\n\n.fade-out {\n animation: fadeOut 0.5s ease-out;\n}\n\n/* Glow effects for interactive elements */\n.control-button:focus,\n.control-input:focus,\n.slider:focus {\n box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.3);\n}\n\n/* Hover effects for shape buttons */\n.shape-button {\n position: relative;\n overflow: hidden;\n}\n\n.shape-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);\n transition: left 0.5s;\n}\n\n.shape-button:hover::before {\n left: 100%;\n}\n\n/* Pulse animation for active elements */\n@keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }\n 70% { box-shadow: 0 0 0 10px rgba(0, 212, 255, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }\n}\n\n.shape-button.active {\n animation: pulse 2s infinite;\n}\n\n/* Responsive design improvements */\n@media (max-width: 1024px) {\n .control-panel {\n width: 280px;\n }\n \n .rotation-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n}\n\n@media (max-width: 768px) {\n .shape-grid {\n grid-template-columns: 1fr;\n }\n \n .slider-container {\n flex-direction: column;\n gap: 8px;\n }\n \n .slider-value {\n text-align: center;\n min-width: auto;\n }\n \n .section-title {\n font-size: 14px;\n }\n \n .control-label {\n font-size: 12px;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .control-panel {\n background: rgba(0, 0, 0, 0.95);\n border-color: #ffffff;\n }\n \n .control-input,\n .shape-button {\n border-color: #ffffff;\n }\n \n .slider {\n background: #ffffff;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n }\n \n .shape-button::before {\n transition: none;\n }\n \n .shape-button.active {\n animation: none;\n }\n \n .fade-in,\n .fade-out {\n animation: none;\n }\n}\n\n/* Print styles */\n@media print {\n .control-panel,\n .info-panel,\n .performance-indicator,\n .loading-screen {\n display: none !important;\n }\n \n .viewer-container {\n position: static;\n width: 100%;\n height: 80vh;\n }\n}\n\n/* Focus indicators for accessibility */\n.control-button:focus-visible,\n.shape-button:focus-visible {\n outline: 2px solid #00d4ff;\n outline-offset: 2px;\n}\n\n.checkbox:focus-visible {\n outline: 2px solid #00d4ff;\n outline-offset: 2px;\n}\n\n/* Tooltip styles */\n.tooltip {\n position: relative;\n}\n\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.9);\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n z-index: 1000;\n}\n\n.tooltip:hover::after {\n opacity: 1;\n}\n\n/* Error states */\n.control-input.error {\n border-color: #ff4444;\n box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);\n}\n\n.error-message {\n color: #ff4444;\n font-size: 12px;\n margin-top: 4px;\n}\n\n/* Success states */\n.control-input.success {\n border-color: #44ff44;\n box-shadow: 0 0 0 2px rgba(68, 255, 68, 0.2);\n}\n\n/* Loading states */\n.loading {\n opacity: 0.6;\n pointer-events: none;\n}\n\n.loading::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n margin: -10px 0 0 -10px;\n border: 2px solid rgba(0, 212, 255, 0.3);\n border-top: 2px solid #00d4ff;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* Dark theme adjustments */\n@media (prefers-color-scheme: dark) {\n /* Already optimized for dark theme */\n}\n\n/* Light theme support */\n@media (prefers-color-scheme: light) {\n body {\n background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #d0d0d0 100%);\n color: #333333;\n }\n \n .control-panel,\n .info-panel,\n .performance-indicator {\n background: rgba(255, 255, 255, 0.95);\n border-color: rgba(0, 0, 0, 0.2);\n color: #333333;\n }\n \n .section-title {\n color: #0066cc;\n }\n \n .control-input {\n background: rgba(0, 0, 0, 0.05);\n border-color: rgba(0, 0, 0, 0.2);\n color: #333333;\n }\n \n .slider {\n background: rgba(0, 0, 0, 0.2);\n }\n \n .slider::-webkit-slider-thumb {\n background: #0066cc;\n }\n \n .slider::-moz-range-thumb {\n background: #0066cc;\n }\n}",[],[301,294],"frontend","c1f1f42a-5d5b-11f0-b796-0224a6c84d84","simple-viewer.js","a1dc2a26-00e4-4c93-8d76-d802da18aaec",["D",1752130912555],"// Simple Three.js viewer to test basic functionality\nimport * as THREE from 'https://esm.sh/three@0.158.0';\n\nfunction createSimpleViewer() {\n console.log('Creating simple Three.js viewer...');\n \n const container = document.getElementById('viewerContainer');\n if (!container) {\n console.error('Container not found!');\n return;\n }\n \n // Scene\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x001122);\n \n // Camera\n const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);\n camera.position.z = 5;\n \n // Renderer\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n container.appendChild(renderer.domElement);\n \n // Create a simple tesseract wireframe\n const vertices = [\n // Inner cube\n [-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1],\n [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1],\n // Outer cube (scaled and offset in 4th dimension)\n [-1.5, -1.5, -1.5], [1.5, -1.5, -1.5], [1.5, 1.5, -1.5], [-1.5, 1.5, -1.5],\n [-1.5, -1.5, 1.5], [1.5, -1.5, 1.5], [1.5, 1.5, 1.5], [-1.5, 1.5, 1.5]\n ];\n \n const edges = [\n // Inner cube edges\n [0, 1], [1, 2], [2, 3], [3, 0],\n [4, 5], [5, 6], [6, 7], [7, 4],\n [0, 4], [1, 5], [2, 6], [3, 7],\n // Outer cube edges\n [8, 9], [9, 10], [10, 11], [11, 8],\n [12, 13], [13, 14], [14, 15], [15, 12],\n [8, 12], [9, 13], [10, 14], [11, 15],\n // Connections between cubes\n [0, 8], [1, 9], [2, 10], [3, 11],\n [4, 12], [5, 13], [6, 14], [7, 15]\n ];\n \n // Create geometry\n const geometry = new THREE.BufferGeometry();\n const positions = [];\n \n edges.forEach(edge => {\n const start = vertices[edge[0]];\n const end = vertices[edge[1]];\n positions.push(start[0], start[1], start[2]);\n positions.push(end[0], end[1], end[2]);\n });\n \n geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));\n \n const material = new THREE.LineBasicMaterial({ color: 0x00d4ff });\n const wireframe = new THREE.LineSegments(geometry, material);\n scene.add(wireframe);\n \n // Add vertices as points\n const vertexGeometry = new THREE.BufferGeometry();\n const vertexPositions = [];\n vertices.forEach(vertex => {\n vertexPositions.push(vertex[0], vertex[1], vertex[2]);\n });\n vertexGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertexPositions, 3));\n \n const vertexMaterial = new THREE.PointsMaterial({ color: 0xffff00, size: 0.1 });\n const points = new THREE.Points(vertexGeometry, vertexMaterial);\n scene.add(points);\n \n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404040, 0.6);\n scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(1, 1, 1);\n scene.add(directionalLight);\n \n // Mouse controls\n let isMouseDown = false;\n let mouseX = 0, mouseY = 0;\n let rotationX = 0, rotationY = 0;\n \n renderer.domElement.addEventListener('mousedown', (e) => {\n isMouseDown = true;\n mouseX = e.clientX;\n mouseY = e.clientY;\n });\n \n renderer.domElement.addEventListener('mousemove', (e) => {\n if (!isMouseDown) return;\n \n const deltaX = e.clientX - mouseX;\n const deltaY = e.clientY - mouseY;\n \n rotationY += deltaX * 0.01;\n rotationX += deltaY * 0.01;\n \n rotationX = Math.max(-Math.PI/2, Math.min(Math.PI/2, rotationX));\n \n const radius = 5;\n camera.position.x = radius * Math.cos(rotationX) * Math.sin(rotationY);\n camera.position.y = radius * Math.sin(rotationX);\n camera.position.z = radius * Math.cos(rotationX) * Math.cos(rotationY);\n camera.lookAt(0, 0, 0);\n \n mouseX = e.clientX;\n mouseY = e.clientY;\n });\n \n renderer.domElement.addEventListener('mouseup', () => {\n isMouseDown = false;\n });\n \n renderer.domElement.addEventListener('wheel', (e) => {\n e.preventDefault();\n const scale = e.deltaY > 0 ? 1.1 : 0.9;\n camera.position.multiplyScalar(scale);\n camera.position.clampLength(2, 20);\n });\n \n // Animation loop\n let rotation = 0;\n function animate() {\n rotation += 0.01;\n wireframe.rotation.x = rotation * 0.5;\n wireframe.rotation.y = rotation;\n points.rotation.x = rotation * 0.5;\n points.rotation.y = rotation;\n \n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n }\n \n animate();\n \n // Handle resize\n window.addEventListener('resize', () => {\n camera.aspect = container.clientWidth / container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n });\n \n // Hide loading screen\n const loadingScreen = document.getElementById('loadingScreen');\n const appContainer = document.getElementById('appContainer');\n \n if (loadingScreen) loadingScreen.style.display = 'none';\n if (appContainer) appContainer.style.display = 'block';\n \n // Update vertex count\n const vertexCount = document.getElementById('vertexCount');\n if (vertexCount) vertexCount.textContent = '16';\n \n console.log('Simple viewer created successfully!');\n \n // Show help after a delay\n setTimeout(() => {\n const helpOverlay = document.getElementById('helpOverlay');\n if (helpOverlay) {\n helpOverlay.style.display = 'block';\n }\n }, 1000);\n}\n\n// Initialize when ready\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', createSimpleViewer);\n} else {\n createSimpleViewer();\n}\n\nexport { createSimpleViewer };",[],[301,303],"c1f1e89a-5d5b-11f0-b796-0224a6c84d84","index.tsx","4e427893-2d1f-490f-8bf8-8525c50a5b0d",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0';\nimport { SimpleGeometryViewer } from './components/SimpleGeometryViewer.tsx';\n\n// Initialize the application\nasync function initializeApp() {\n try {\n console.log('Initializing Higher Dimensional Geometry Visualizer...');\n \n // Hide loading screen and show app container\n const loadingScreen = document.getElementById('loadingScreen');\n const appContainer = document.getElementById('appContainer');\n \n if (loadingScreen) loadingScreen.style.display = 'none';\n if (appContainer) appContainer.style.display = 'block';\n \n // Get the viewer container for React\n const viewerContainer = document.getElementById('viewerContainer');\n if (!viewerContainer) {\n throw new Error('Viewer container not found');\n }\n \n // Create React root and render the App\n const root = createRoot(viewerContainer);\n root.render();\n \n // Initialize additional controls and event listeners\n initializeControls();\n \n console.log('React application initialized successfully');\n \n } catch (error) {\n console.error('Failed to initialize app:', error);\n showError('Failed to initialize the application. Please refresh the page.');\n }\n}\n\nfunction initializeControls() {\n console.log('Initializing control panel integration...');\n \n // Connect HTML controls to React app state\n const dimensionSelect = document.getElementById('dimensionSelect') as HTMLSelectElement;\n const shapeButtons = document.querySelectorAll('.shape-button');\n const scaleSlider = document.getElementById('scaleSlider') as HTMLInputElement;\n const rotationSliders = {\n xy: document.getElementById('rotationXY') as HTMLInputElement,\n xz: document.getElementById('rotationXZ') as HTMLInputElement,\n xw: document.getElementById('rotationXW') as HTMLInputElement,\n yz: document.getElementById('rotationYZ') as HTMLInputElement,\n yw: document.getElementById('rotationYW') as HTMLInputElement,\n zw: document.getElementById('rotationZW') as HTMLInputElement,\n };\n const projectionDistanceSlider = document.getElementById('projectionDistance') as HTMLInputElement;\n const cameraFOVSlider = document.getElementById('cameraFOV') as HTMLInputElement;\n const crossSectionEnabled = document.getElementById('crossSectionEnabled') as HTMLInputElement;\n const crossSectionPosition = document.getElementById('crossSectionPosition') as HTMLInputElement;\n const renderingCheckboxes = {\n showVertices: document.getElementById('showVertices') as HTMLInputElement,\n showEdges: document.getElementById('showEdges') as HTMLInputElement,\n showFaces: document.getElementById('showFaces') as HTMLInputElement,\n wireframe: document.getElementById('wireframeMode') as HTMLInputElement,\n };\n const opacitySlider = document.getElementById('opacity') as HTMLInputElement;\n const autoRotateButton = document.getElementById('autoRotateButton') as HTMLButtonElement;\n\n // Dimension change handler\n if (dimensionSelect) {\n dimensionSelect.addEventListener('change', (e) => {\n const dimension = parseInt((e.target as HTMLSelectElement).value) as 4 | 5;\n window.dispatchEvent(new CustomEvent('dimensionChanged', { detail: { dimension } }));\n \n // Update shape buttons for the new dimension\n updateShapeButtons(dimension);\n });\n }\n\n // Shape selection handlers\n shapeButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const shape = (e.target as HTMLElement).dataset.shape;\n if (shape) {\n // Update active button\n shapeButtons.forEach(btn => btn.classList.remove('active'));\n (e.target as HTMLElement).classList.add('active');\n \n window.dispatchEvent(new CustomEvent('shapeChanged', { detail: { shape } }));\n }\n });\n });\n\n // Scale slider handler\n if (scaleSlider) {\n const scaleValue = document.getElementById('scaleValue');\n scaleSlider.addEventListener('input', (e) => {\n const scale = parseFloat((e.target as HTMLInputElement).value);\n if (scaleValue) scaleValue.textContent = scale.toFixed(1);\n window.dispatchEvent(new CustomEvent('scaleChanged', { detail: { scale } }));\n });\n }\n\n // Rotation slider handlers\n Object.entries(rotationSliders).forEach(([plane, slider]) => {\n if (slider) {\n const valueElement = document.getElementById(`rotation${plane.toUpperCase()}Value`);\n slider.addEventListener('input', (e) => {\n const angle = parseFloat((e.target as HTMLInputElement).value);\n if (valueElement) valueElement.textContent = `${angle}°`;\n window.dispatchEvent(new CustomEvent('rotationChanged', { \n detail: { plane, angle: angle * Math.PI / 180 } \n }));\n });\n }\n });\n\n // Projection distance handler\n if (projectionDistanceSlider) {\n const distanceValue = document.getElementById('projectionDistanceValue');\n projectionDistanceSlider.addEventListener('input', (e) => {\n const distance = parseFloat((e.target as HTMLInputElement).value);\n if (distanceValue) distanceValue.textContent = distance.toFixed(1);\n window.dispatchEvent(new CustomEvent('projectionDistanceChanged', { detail: { distance } }));\n });\n }\n\n // Camera FOV handler\n if (cameraFOVSlider) {\n const fovValue = document.getElementById('cameraFOVValue');\n cameraFOVSlider.addEventListener('input', (e) => {\n const fov = parseFloat((e.target as HTMLInputElement).value);\n if (fovValue) fovValue.textContent = `${fov}°`;\n window.dispatchEvent(new CustomEvent('cameraFOVChanged', { detail: { fov } }));\n });\n }\n\n // Cross-section handlers\n if (crossSectionEnabled) {\n crossSectionEnabled.addEventListener('change', (e) => {\n const enabled = (e.target as HTMLInputElement).checked;\n if (crossSectionPosition) {\n crossSectionPosition.disabled = !enabled;\n }\n window.dispatchEvent(new CustomEvent('crossSectionToggled', { detail: { enabled } }));\n });\n }\n\n if (crossSectionPosition) {\n const positionValue = document.getElementById('crossSectionPositionValue');\n crossSectionPosition.addEventListener('input', (e) => {\n const position = parseFloat((e.target as HTMLInputElement).value);\n if (positionValue) positionValue.textContent = position.toFixed(1);\n window.dispatchEvent(new CustomEvent('crossSectionPositionChanged', { detail: { position } }));\n });\n }\n\n // Rendering option handlers\n Object.entries(renderingCheckboxes).forEach(([option, checkbox]) => {\n if (checkbox) {\n checkbox.addEventListener('change', (e) => {\n const enabled = (e.target as HTMLInputElement).checked;\n window.dispatchEvent(new CustomEvent(`${option}Changed`, { detail: { enabled } }));\n });\n }\n });\n\n // Opacity handler\n if (opacitySlider) {\n const opacityValue = document.getElementById('opacityValue');\n opacitySlider.addEventListener('input', (e) => {\n const opacity = parseFloat((e.target as HTMLInputElement).value);\n if (opacityValue) opacityValue.textContent = opacity.toFixed(1);\n window.dispatchEvent(new CustomEvent('opacityChanged', { detail: { opacity } }));\n });\n }\n\n // Auto-rotate button handler\n if (autoRotateButton) {\n let isAutoRotating = false;\n autoRotateButton.addEventListener('click', () => {\n isAutoRotating = !isAutoRotating;\n autoRotateButton.textContent = isAutoRotating ? '⏸️ Stop Rotation' : '🔄 Auto Rotate';\n window.dispatchEvent(new CustomEvent('autoRotateToggled', { detail: { enabled: isAutoRotating } }));\n });\n }\n\n // Initialize performance monitoring\n initializePerformanceMonitoring();\n \n // Add keyboard shortcuts\n document.addEventListener('keydown', handleKeyDown);\n \n // Show help overlay initially\n setTimeout(() => {\n const helpOverlay = document.getElementById('helpOverlay');\n if (helpOverlay) {\n helpOverlay.style.display = 'block';\n }\n }, 2000);\n}\n\nfunction updateShapeButtons(dimension: 4 | 5) {\n const shapeGrid = document.getElementById('shapeGrid');\n if (!shapeGrid) return;\n\n const shapes4D = [\n { key: 'tesseract', name: 'Tesseract' },\n { key: '16-cell', name: '16-Cell' },\n { key: '600-cell', name: '600-Cell' },\n { key: '120-cell', name: '120-Cell' }\n ];\n\n const shapes5D = [\n { key: 'penteract', name: 'Penteract' },\n { key: '5-simplex', name: '5-Simplex' },\n { key: '5-orthoplex', name: '5-Orthoplex' },\n { key: 'custom', name: 'Custom' }\n ];\n\n const shapes = dimension === 4 ? shapes4D : shapes5D;\n \n shapeGrid.innerHTML = '';\n shapes.forEach((shape, index) => {\n const button = document.createElement('button');\n button.className = `shape-button ${index === 0 ? 'active' : ''}`;\n button.dataset.shape = shape.key;\n button.textContent = shape.name;\n shapeGrid.appendChild(button);\n \n // Add click handler\n button.addEventListener('click', (e) => {\n document.querySelectorAll('.shape-button').forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n window.dispatchEvent(new CustomEvent('shapeChanged', { detail: { shape: shape.key } }));\n });\n });\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n if (!window.geometryViewer) return;\n \n switch (e.key) {\n case ' ':\n e.preventDefault();\n window.geometryViewer.isAutoRotating = !window.geometryViewer.isAutoRotating;\n const autoButton = document.getElementById('autoRotateButton');\n if (autoButton) {\n autoButton.textContent = window.geometryViewer.isAutoRotating ? '⏸️ Stop Rotation' : '🔄 Auto Rotate';\n }\n break;\n case 'r':\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n // Reset transformations\n window.geometryViewer.appState.transformations = {\n rotation4D: { xy: 0, xz: 0, xw: 0, yz: 0, yw: 0, zw: 0 },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n };\n window.geometryViewer.updateGeometry();\n }\n break;\n case '1':\n case '2':\n case '3':\n case '4':\n if (!e.ctrlKey && !e.metaKey) {\n const shapeIndex = parseInt(e.key) - 1;\n const shapes4D = ['tesseract', '16-cell', '600-cell', '120-cell'];\n const shapes5D = ['penteract', '5-simplex', '5-orthoplex', 'custom'];\n const shapes = window.geometryViewer.appState.dimension === 4 ? shapes4D : shapes5D;\n \n if (shapeIndex < shapes.length) {\n window.geometryViewer.appState.currentShape = shapes[shapeIndex];\n window.geometryViewer.updateShapeButtons();\n window.geometryViewer.updateGeometry();\n }\n }\n break;\n case 'v':\n window.geometryViewer.appState.rendering.showVertices = !window.geometryViewer.appState.rendering.showVertices;\n const verticesCheckbox = document.getElementById('showVertices') as HTMLInputElement;\n if (verticesCheckbox) verticesCheckbox.checked = window.geometryViewer.appState.rendering.showVertices;\n window.geometryViewer.updateGeometry();\n break;\n case 'e':\n window.geometryViewer.appState.rendering.showEdges = !window.geometryViewer.appState.rendering.showEdges;\n const edgesCheckbox = document.getElementById('showEdges') as HTMLInputElement;\n if (edgesCheckbox) edgesCheckbox.checked = window.geometryViewer.appState.rendering.showEdges;\n window.geometryViewer.updateGeometry();\n break;\n case 'f':\n window.geometryViewer.appState.rendering.showFaces = !window.geometryViewer.appState.rendering.showFaces;\n const facesCheckbox = document.getElementById('showFaces') as HTMLInputElement;\n if (facesCheckbox) facesCheckbox.checked = window.geometryViewer.appState.rendering.showFaces;\n window.geometryViewer.updateGeometry();\n break;\n case 'w':\n window.geometryViewer.appState.rendering.wireframe = !window.geometryViewer.appState.rendering.wireframe;\n const wireframeCheckbox = document.getElementById('wireframeMode') as HTMLInputElement;\n if (wireframeCheckbox) wireframeCheckbox.checked = window.geometryViewer.appState.rendering.wireframe;\n window.geometryViewer.updateGeometry();\n break;\n case 'h':\n const helpOverlay = document.getElementById('helpOverlay');\n if (helpOverlay) {\n helpOverlay.style.display = helpOverlay.style.display === 'none' ? 'block' : 'none';\n }\n break;\n }\n}\n\nfunction initializePerformanceMonitoring() {\n console.log('Performance monitoring initialized');\n \n // Listen for vertex count updates\n window.addEventListener('vertexCountUpdate', (e: any) => {\n const vertexCount = document.getElementById('vertexCount');\n if (vertexCount) {\n vertexCount.textContent = e.detail.count.toString();\n }\n });\n}\n\nfunction dispatchAppEvent(type: string, detail: any) {\n window.dispatchEvent(new CustomEvent(type, { detail }));\n}\n\nfunction showError(message: string) {\n const errorDiv = document.createElement('div');\n errorDiv.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(255, 68, 68, 0.95);\n color: white;\n padding: 20px;\n border-radius: 8px;\n z-index: 10000;\n max-width: 400px;\n text-align: center;\n `;\n errorDiv.textContent = message;\n document.body.appendChild(errorDiv);\n \n setTimeout(() => {\n if (document.body.contains(errorDiv)) {\n document.body.removeChild(errorDiv);\n }\n }, 5000);\n}\n\n// Add type declaration for window.geometryViewer\ndeclare global {\n interface Window {\n geometryViewer: any;\n }\n}\n\n// Initialize when DOM is loaded\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n} else {\n initializeApp();\n}",[],[301,310],"c1f1d256-5d5b-11f0-b796-0224a6c84d84","index.html","dc06c1fa-ad4b-46c7-86b1-df01804f2d3e",["D",1752130912555],"\n\n\n \n \n Higher Dimensional Geometry Visualizer\n \n \n \n \n\n\n

Loading Higher Dimensional Geometry Visualizer

\n Initializing mathematical libraries...\n

\n\n

\n \n

\n FPS: 60 | \n Vertices: 0\n

\n \n

\n 🔮 Shape Selection\n

\n Dimension\n \n

\n Shape Type\n

\n \n \n \n \n

\n\n

\n 🔄 Transformations\n

\n Scale\n

\n \n 1.0\n

\n 4D Rotations\n

\n XY Plane\n

\n \n 0°\n

\n XZ Plane\n

\n \n 0°\n

\n XW Plane\n

\n \n 0°\n

\n YZ Plane\n

\n \n 0°\n

\n YW Plane\n

\n \n 0°\n

\n ZW Plane\n

\n \n 0°\n

\n \n

\n\n

\n 📐 Projection & View\n

\n Projection Distance\n

\n \n 2.0\n

\n Camera FOV\n

\n \n 75°\n

\n\n

\n ✂️ Cross Section\n

\n \n Enable Cross Section\n

\n Section Position\n

\n \n 0.0\n

\n\n

\n 🎨 Rendering\n

\n \n Show Vertices\n

\n \n Show Edges\n

\n \n Show Faces\n

\n \n Wireframe Mode\n

\n Opacity\n

\n \n 0.8\n

\n\n

Shape Information

\n Tesseract (4D Cube)
\n Vertices: 16
\n Edges: 32
\n Faces: 24
\n Cells: 8

\n The tesseract is the 4-dimensional analog of a cube. Each vertex connects to 4 edges, and the shape can be visualized as two 3D cubes connected through the 4th dimension.\n

\n\n \n

Welcome to Higher Dimensional Geometry!

\n 🖱️ Mouse Controls:
\n • Drag to rotate the camera around the shape
\n • Scroll wheel to zoom in/out

\n \n ⌨️ Keyboard Shortcuts:
\n • Space: Toggle auto-rotation
\n • Ctrl+R: Reset all transformations
\n • 1-4: Quick select shapes
\n • V: Toggle vertices visibility
\n • E: Toggle edges visibility
\n • F: Toggle faces visibility
\n • W: Toggle wireframe mode
\n • H: Show/hide this help

\n\n 🎯 Features:
\n • Explore 4D and 5D geometric shapes
\n • Real-time transformations and rotations
\n • Cross-section analysis tools
\n • Multiple projection methods
\n • Educational mathematical insights\n

\n \n

\n\n \n\n",[],[301,317],"c1f1c2ac-5d5b-11f0-b796-0224a6c84d84","geometry-viewer.js","66c1d238-bd9a-44b9-be45-c413a781afe9",["D",1752130912555],"// Direct Three.js geometry viewer without React\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { Geometry4D } from '../shared/math/geometry4d.ts';\nimport { Geometry5D } from '../shared/math/geometry5d.ts';\nimport { ProjectionEngine } from '../shared/math/projections.ts';\nimport { TransformationEngine } from '../shared/math/transformations.ts';\n\nclass GeometryViewer {\n constructor(container) {\n this.container = container;\n this.scene = null;\n this.camera = null;\n this.renderer = null;\n this.geometryGroup = null;\n this.animationFrame = null;\n \n // App state\n this.appState = {\n currentShape: 'tesseract',\n dimension: 4,\n transformations: {\n rotation4D: { xy: 0, xz: 0, xw: 0, yz: 0, yw: 0, zw: 0 },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n },\n projection: { distance: 2, perspective: true, viewAngle: 0 },\n rendering: {\n showVertices: true,\n showEdges: true,\n showFaces: false,\n wireframe: false,\n opacity: 0.8,\n color: '#00d4ff',\n edgeColor: '#ffffff',\n vertexColor: '#ffff00'\n }\n };\n \n this.isAutoRotating = false;\n this.mouseControls = {\n isMouseDown: false,\n mouseX: 0,\n mouseY: 0,\n cameraRotationX: 0,\n cameraRotationY: 0\n };\n \n this.init();\n }\n \n init() {\n this.initScene();\n this.initControls();\n this.updateGeometry();\n this.animate();\n \n // Show the app container and hide loading\n const loadingScreen = document.getElementById('loadingScreen');\n const appContainer = document.getElementById('appContainer');\n \n if (loadingScreen) loadingScreen.style.display = 'none';\n if (appContainer) appContainer.style.display = 'block';\n \n console.log('Geometry viewer initialized successfully');\n }\n \n initScene() {\n // Scene\n this.scene = new THREE.Scene();\n this.scene.background = new THREE.Color(0x000011);\n \n // Camera\n this.camera = new THREE.PerspectiveCamera(\n 75,\n this.container.clientWidth / this.container.clientHeight,\n 0.1,\n 1000\n );\n this.camera.position.set(0, 0, 5);\n \n // Renderer\n this.renderer = new THREE.WebGLRenderer({ antialias: true });\n this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);\n this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n this.container.appendChild(this.renderer.domElement);\n \n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404040, 0.4);\n this.scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(1, 1, 1);\n this.scene.add(directionalLight);\n \n const pointLight = new THREE.PointLight(0x00d4ff, 0.6);\n pointLight.position.set(2, 2, 2);\n this.scene.add(pointLight);\n \n // Geometry group\n this.geometryGroup = new THREE.Group();\n this.scene.add(this.geometryGroup);\n \n // Handle resize\n window.addEventListener('resize', () => this.handleResize());\n \n console.log('Three.js scene initialized');\n }\n \n initControls() {\n const canvas = this.renderer.domElement;\n \n // Mouse controls\n canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));\n canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));\n canvas.addEventListener('mouseup', () => this.handleMouseUp());\n canvas.addEventListener('wheel', (e) => this.handleWheel(e));\n \n // Control panel events\n this.setupControlPanelEvents();\n \n console.log('Controls initialized');\n }\n \n setupControlPanelEvents() {\n // Dimension selection\n const dimensionSelect = document.getElementById('dimensionSelect');\n if (dimensionSelect) {\n dimensionSelect.addEventListener('change', (e) => {\n this.appState.dimension = parseInt(e.target.value);\n this.appState.currentShape = this.appState.dimension === 4 ? 'tesseract' : 'penteract';\n this.updateShapeButtons();\n this.updateGeometry();\n });\n }\n \n // Shape buttons\n this.updateShapeButtons();\n \n // Scale slider\n const scaleSlider = document.getElementById('scaleSlider');\n const scaleValue = document.getElementById('scaleValue');\n if (scaleSlider && scaleValue) {\n scaleSlider.addEventListener('input', (e) => {\n this.appState.transformations.scale = parseFloat(e.target.value);\n scaleValue.textContent = parseFloat(e.target.value).toFixed(1);\n this.updateGeometry();\n });\n }\n \n // Rotation sliders\n const rotationSliders = ['rotationXY', 'rotationXZ', 'rotationXW', 'rotationYZ', 'rotationYW', 'rotationZW'];\n rotationSliders.forEach(sliderId => {\n const slider = document.getElementById(sliderId);\n const valueSpan = document.getElementById(sliderId + 'Value');\n \n if (slider && valueSpan) {\n slider.addEventListener('input', (e) => {\n const value = parseInt(e.target.value);\n const plane = sliderId.replace('rotation', '').toLowerCase();\n this.appState.transformations.rotation4D[plane] = value * Math.PI / 180;\n valueSpan.textContent = value + '°';\n this.updateGeometry();\n });\n }\n });\n \n // Auto rotate button\n const autoRotateButton = document.getElementById('autoRotateButton');\n if (autoRotateButton) {\n autoRotateButton.addEventListener('click', () => {\n this.isAutoRotating = !this.isAutoRotating;\n autoRotateButton.textContent = this.isAutoRotating ? '⏸️ Stop Rotation' : '🔄 Auto Rotate';\n });\n }\n \n // Rendering controls\n const showVertices = document.getElementById('showVertices');\n const showEdges = document.getElementById('showEdges');\n const showFaces = document.getElementById('showFaces');\n const wireframeMode = document.getElementById('wireframeMode');\n \n if (showVertices) {\n showVertices.addEventListener('change', (e) => {\n this.appState.rendering.showVertices = e.target.checked;\n this.updateGeometry();\n });\n }\n \n if (showEdges) {\n showEdges.addEventListener('change', (e) => {\n this.appState.rendering.showEdges = e.target.checked;\n this.updateGeometry();\n });\n }\n \n if (showFaces) {\n showFaces.addEventListener('change', (e) => {\n this.appState.rendering.showFaces = e.target.checked;\n this.updateGeometry();\n });\n }\n \n if (wireframeMode) {\n wireframeMode.addEventListener('change', (e) => {\n this.appState.rendering.wireframe = e.target.checked;\n this.updateGeometry();\n });\n }\n \n // Opacity slider\n const opacity = document.getElementById('opacity');\n const opacityValue = document.getElementById('opacityValue');\n if (opacity && opacityValue) {\n opacity.addEventListener('input', (e) => {\n this.appState.rendering.opacity = parseFloat(e.target.value);\n opacityValue.textContent = parseFloat(e.target.value).toFixed(1);\n this.updateGeometry();\n });\n }\n }\n \n updateShapeButtons() {\n const shapeGrid = document.getElementById('shapeGrid');\n if (!shapeGrid) return;\n \n const shapes4D = [\n { id: 'tesseract', name: 'Tesseract' },\n { id: '16-cell', name: '16-Cell' },\n { id: '600-cell', name: '600-Cell' },\n { id: '120-cell', name: '120-Cell' }\n ];\n \n const shapes5D = [\n { id: 'penteract', name: 'Penteract' },\n { id: '5-simplex', name: '5-Simplex' },\n { id: '5-orthoplex', name: '5-Orthoplex' },\n { id: 'custom', name: 'Custom' }\n ];\n \n const shapes = this.appState.dimension === 4 ? shapes4D : shapes5D;\n \n shapeGrid.innerHTML = shapes.map(shape => \n ``\n ).join('');\n \n // Add event listeners to new buttons\n shapeGrid.querySelectorAll('.shape-button').forEach(button => {\n button.addEventListener('click', (e) => {\n const shape = e.target.dataset.shape;\n this.appState.currentShape = shape;\n \n // Update active state\n shapeGrid.querySelectorAll('.shape-button').forEach(b => b.classList.remove('active'));\n e.target.classList.add('active');\n \n this.updateGeometry();\n });\n });\n }\n \n updateGeometry() {\n // Clear existing geometry\n while (this.geometryGroup.children.length > 0) {\n const child = this.geometryGroup.children[0];\n this.geometryGroup.remove(child);\n if (child.geometry) child.geometry.dispose();\n if (child.material) {\n if (Array.isArray(child.material)) {\n child.material.forEach(mat => mat.dispose());\n } else {\n child.material.dispose();\n }\n }\n }\n \n try {\n let shape4D, shape5D;\n let projectedVertices = [];\n \n if (this.appState.dimension === 4) {\n // Generate 4D shape\n switch (this.appState.currentShape) {\n case 'tesseract':\n shape4D = Geometry4D.createTesseract();\n break;\n case '16-cell':\n shape4D = Geometry4D.create16Cell();\n break;\n default:\n shape4D = Geometry4D.createTesseract();\n }\n \n // Apply transformations\n const transformedVertices = shape4D.vertices.map(vertex =>\n TransformationEngine.transform4D(vertex, this.appState.transformations)\n );\n \n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective4DTo3D(vertex, this.appState.projection)\n );\n \n // Update vertex count\n this.updateVertexCount(shape4D.vertices.length);\n \n // Create visualization\n this.createVisualization(projectedVertices, shape4D.edges, shape4D.faces);\n \n } else if (this.appState.dimension === 5) {\n // Generate 5D shape\n switch (this.appState.currentShape) {\n case 'penteract':\n shape5D = Geometry5D.createPenteract();\n break;\n case '5-simplex':\n shape5D = Geometry5D.create5Simplex();\n break;\n default:\n shape5D = Geometry5D.createPenteract();\n }\n \n // Apply basic transformations (simplified for 5D)\n const transformedVertices = shape5D.vertices.map(vertex => ({\n x: vertex.x * this.appState.transformations.scale,\n y: vertex.y * this.appState.transformations.scale,\n z: vertex.z * this.appState.transformations.scale,\n w: vertex.w * this.appState.transformations.scale,\n v: vertex.v * this.appState.transformations.scale\n }));\n \n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective5DTo3D(vertex, this.appState.projection)\n );\n \n // Update vertex count\n this.updateVertexCount(shape5D.vertices.length);\n \n // Create visualization\n this.createVisualization(projectedVertices, shape5D.edges, shape5D.faces);\n }\n \n } catch (error) {\n console.error('Error updating geometry:', error);\n this.createFallbackGeometry();\n }\n }\n \n createVisualization(vertices, edges, faces) {\n // Create vertices\n if (this.appState.rendering.showVertices) {\n const vertexGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const vertexMaterial = new THREE.MeshBasicMaterial({\n color: this.appState.rendering.vertexColor,\n transparent: true,\n opacity: this.appState.rendering.opacity\n });\n \n vertices.forEach(vertex => {\n const vertexMesh = new THREE.Mesh(vertexGeometry, vertexMaterial);\n vertexMesh.position.set(vertex.x, vertex.y, vertex.z);\n this.geometryGroup.add(vertexMesh);\n });\n }\n \n // Create edges\n if (this.appState.rendering.showEdges) {\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions = [];\n \n edges.forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n edgePositions.push(start.x, start.y, start.z);\n edgePositions.push(end.x, end.y, end.z);\n }\n });\n \n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({\n color: this.appState.rendering.edgeColor,\n transparent: true,\n opacity: this.appState.rendering.opacity\n });\n \n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n this.geometryGroup.add(edgeLines);\n }\n \n // Create faces\n if (this.appState.rendering.showFaces && faces.length > 0) {\n faces.forEach(face => {\n if (face.vertices.length >= 3) {\n const faceGeometry = new THREE.BufferGeometry();\n const facePositions = [];\n const faceIndices = [];\n \n // Add vertices\n face.vertices.forEach(vertexIndex => {\n const vertex = vertices[vertexIndex];\n if (vertex) {\n facePositions.push(vertex.x, vertex.y, vertex.z);\n }\n });\n \n // Create triangles\n for (let i = 1; i < face.vertices.length - 1; i++) {\n faceIndices.push(0, i, i + 1);\n }\n \n faceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(facePositions, 3));\n faceGeometry.setIndex(faceIndices);\n faceGeometry.computeVertexNormals();\n \n const faceMaterial = new THREE.MeshLambertMaterial({\n color: this.appState.rendering.color,\n transparent: true,\n opacity: this.appState.rendering.opacity * 0.5,\n side: THREE.DoubleSide,\n wireframe: this.appState.rendering.wireframe\n });\n \n const faceMesh = new THREE.Mesh(faceGeometry, faceMaterial);\n this.geometryGroup.add(faceMesh);\n }\n });\n }\n \n console.log(`Created visualization with ${vertices.length} vertices, ${edges.length} edges, ${faces.length} faces`);\n }\n \n createFallbackGeometry() {\n // Create a simple cube as fallback\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n const material = new THREE.MeshLambertMaterial({ \n color: 0x00d4ff,\n wireframe: true\n });\n const cube = new THREE.Mesh(geometry, material);\n this.geometryGroup.add(cube);\n \n console.log('Created fallback geometry');\n }\n \n updateVertexCount(count) {\n const vertexCountElement = document.getElementById('vertexCount');\n if (vertexCountElement) {\n vertexCountElement.textContent = count.toString();\n }\n }\n \n handleMouseDown(event) {\n this.mouseControls.isMouseDown = true;\n this.mouseControls.mouseX = event.clientX;\n this.mouseControls.mouseY = event.clientY;\n }\n \n handleMouseMove(event) {\n if (!this.mouseControls.isMouseDown) return;\n \n const deltaX = event.clientX - this.mouseControls.mouseX;\n const deltaY = event.clientY - this.mouseControls.mouseY;\n \n this.mouseControls.cameraRotationY += deltaX * 0.01;\n this.mouseControls.cameraRotationX += deltaY * 0.01;\n \n // Clamp vertical rotation\n this.mouseControls.cameraRotationX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.mouseControls.cameraRotationX));\n \n // Update camera position\n const radius = 5;\n this.camera.position.x = radius * Math.cos(this.mouseControls.cameraRotationX) * Math.sin(this.mouseControls.cameraRotationY);\n this.camera.position.y = radius * Math.sin(this.mouseControls.cameraRotationX);\n this.camera.position.z = radius * Math.cos(this.mouseControls.cameraRotationX) * Math.cos(this.mouseControls.cameraRotationY);\n this.camera.lookAt(0, 0, 0);\n \n this.mouseControls.mouseX = event.clientX;\n this.mouseControls.mouseY = event.clientY;\n }\n \n handleMouseUp() {\n this.mouseControls.isMouseDown = false;\n }\n \n handleWheel(event) {\n event.preventDefault();\n const scale = event.deltaY > 0 ? 1.1 : 0.9;\n this.camera.position.multiplyScalar(scale);\n this.camera.position.clampLength(2, 20);\n }\n \n handleResize() {\n if (!this.camera || !this.renderer) return;\n \n this.camera.aspect = this.container.clientWidth / this.container.clientHeight;\n this.camera.updateProjectionMatrix();\n this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);\n }\n \n animate() {\n // Auto rotation\n if (this.isAutoRotating) {\n this.appState.transformations.rotation4D.xy += 0.01;\n this.appState.transformations.rotation4D.zw += 0.008;\n this.appState.transformations.rotation4D.xw += 0.005;\n \n // Keep angles in reasonable range\n Object.keys(this.appState.transformations.rotation4D).forEach(key => {\n if (this.appState.transformations.rotation4D[key] > Math.PI * 2) {\n this.appState.transformations.rotation4D[key] -= Math.PI * 2;\n }\n });\n \n this.updateGeometry();\n }\n \n // Render\n if (this.renderer && this.scene && this.camera) {\n this.renderer.render(this.scene, this.camera);\n }\n \n // Update FPS\n this.updateFPS();\n \n this.animationFrame = requestAnimationFrame(() => this.animate());\n }\n \n updateFPS() {\n // Simple FPS counter\n if (!this.lastTime) this.lastTime = performance.now();\n if (!this.frameCount) this.frameCount = 0;\n \n this.frameCount++;\n const currentTime = performance.now();\n \n if (currentTime - this.lastTime >= 1000) {\n const fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastTime));\n const fpsElement = document.getElementById('fpsCounter');\n if (fpsElement) {\n fpsElement.textContent = fps.toString();\n }\n \n this.frameCount = 0;\n this.lastTime = currentTime;\n }\n }\n \n dispose() {\n if (this.animationFrame) {\n cancelAnimationFrame(this.animationFrame);\n }\n \n if (this.renderer) {\n this.renderer.dispose();\n }\n \n window.removeEventListener('resize', this.handleResize);\n }\n}\n\n// Initialize when DOM is ready\nfunction initializeGeometryViewer() {\n const container = document.getElementById('viewerContainer');\n if (container) {\n window.geometryViewer = new GeometryViewer(container);\n console.log('Geometry viewer created and attached to window');\n } else {\n console.error('Viewer container not found');\n }\n}\n\n// Export for use\nexport { GeometryViewer, initializeGeometryViewer };",[],[301,324],"c1f1b3f2-5d5b-11f0-b796-0224a6c84d84","SimpleGeometryViewer.tsx","052f1fd9-4693-45fe-84c5-4468ff3a40f0","a2213a74-2201-487c-b0df-73ba6afa9bb4",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\n\nexport function SimpleGeometryViewer() {\n const containerRef = useRef(null);\n const sceneRef = useRef();\n const rendererRef = useRef();\n const cameraRef = useRef();\n const geometryGroupRef = useRef();\n const animationFrameRef = useRef();\n \n const [isLoading, setIsLoading] = useState(false);\n const [currentShape, setCurrentShape] = useState('tesseract');\n const [dimension, setDimension] = useState(4);\n const [autoRotate, setAutoRotate] = useState(false);\n\n // Initialize Three.js scene\n useEffect(() => {\n if (!containerRef.current) return;\n\n const container = containerRef.current;\n\n // Scene\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000510);\n sceneRef.current = scene;\n\n // Camera\n const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);\n camera.position.set(0, 0, 5);\n cameraRef.current = camera;\n\n // Renderer\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n rendererRef.current = renderer;\n container.appendChild(renderer.domElement);\n\n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404080, 0.4);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(10, 10, 10);\n scene.add(directionalLight);\n\n // Geometry group\n const geometryGroup = new THREE.Group();\n scene.add(geometryGroup);\n geometryGroupRef.current = geometryGroup;\n\n // Mouse controls\n let isMouseDown = false;\n let mouseX = 0;\n let mouseY = 0;\n let targetRotationX = 0;\n let targetRotationY = 0;\n let cameraRotationX = 0;\n let cameraRotationY = 0;\n let cameraDistance = 5;\n\n const handleMouseDown = (event: MouseEvent) => {\n isMouseDown = true;\n mouseX = event.clientX;\n mouseY = event.clientY;\n };\n\n const handleMouseMove = (event: MouseEvent) => {\n if (!isMouseDown) return;\n const deltaX = event.clientX - mouseX;\n const deltaY = event.clientY - mouseY;\n targetRotationY += deltaX * 0.01;\n targetRotationX += deltaY * 0.01;\n mouseX = event.clientX;\n mouseY = event.clientY;\n };\n\n const handleMouseUp = () => {\n isMouseDown = false;\n };\n\n const handleWheel = (event: WheelEvent) => {\n event.preventDefault();\n const scale = event.deltaY > 0 ? 1.1 : 0.9;\n cameraDistance *= scale;\n cameraDistance = Math.max(2, Math.min(20, cameraDistance));\n };\n\n renderer.domElement.addEventListener('mousedown', handleMouseDown);\n renderer.domElement.addEventListener('mousemove', handleMouseMove);\n renderer.domElement.addEventListener('mouseup', handleMouseUp);\n renderer.domElement.addEventListener('wheel', handleWheel);\n\n // Animation loop\n const animate = () => {\n // Smooth camera movement\n cameraRotationX += (targetRotationX - cameraRotationX) * 0.1;\n cameraRotationY += (targetRotationY - cameraRotationY) * 0.1;\n\n camera.position.x = cameraDistance * Math.cos(cameraRotationX) * Math.sin(cameraRotationY);\n camera.position.y = cameraDistance * Math.sin(cameraRotationX);\n camera.position.z = cameraDistance * Math.cos(cameraRotationX) * Math.cos(cameraRotationY);\n camera.lookAt(0, 0, 0);\n\n // Auto rotation\n if (autoRotate && geometryGroup) {\n geometryGroup.rotation.y += 0.01;\n geometryGroup.rotation.x += 0.005;\n }\n\n renderer.render(scene, camera);\n animationFrameRef.current = requestAnimationFrame(animate);\n };\n\n animate();\n\n // Handle resize\n const handleResize = () => {\n if (!container || !camera || !renderer) return;\n camera.aspect = container.clientWidth / container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n // Cleanup\n return () => {\n window.removeEventListener('resize', handleResize);\n renderer.domElement.removeEventListener('mousedown', handleMouseDown);\n renderer.domElement.removeEventListener('mousemove', handleMouseMove);\n renderer.domElement.removeEventListener('mouseup', handleMouseUp);\n renderer.domElement.removeEventListener('wheel', handleWheel);\n \n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n \n if (container.contains(renderer.domElement)) {\n container.removeChild(renderer.domElement);\n }\n \n renderer.dispose();\n };\n }, [autoRotate]);\n\n // Load geometry\n const loadGeometry = async () => {\n if (!geometryGroupRef.current) return;\n\n setIsLoading(true);\n \n // Clear existing geometry\n while (geometryGroupRef.current.children.length > 0) {\n const child = geometryGroupRef.current.children[0];\n geometryGroupRef.current.remove(child);\n }\n\n try {\n // Call API to get geometry\n const response = await fetch(`/api/calculate/shape${dimension}d`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n shapeType: currentShape,\n transformations: {\n rotation4D: { xy: 0, xz: 0, xw: 0, yz: 0, yw: 0, zw: 0 },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n })\n });\n\n if (!response.ok) {\n throw new Error(`API Error: ${response.status}`);\n }\n\n const data = await response.json();\n \n if (!data.success) {\n throw new Error(data.error || 'Failed to generate geometry');\n }\n\n // Create visualization\n const { vertices, edges } = data.projected3D;\n \n // Create vertices\n const vertexGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const vertexMaterial = new THREE.MeshPhongMaterial({ \n color: 0xffff00,\n emissive: 0x444400\n });\n\n vertices.forEach((vertex: any) => {\n const mesh = new THREE.Mesh(vertexGeometry, vertexMaterial);\n mesh.position.set(vertex.x, vertex.y, vertex.z);\n geometryGroupRef.current!.add(mesh);\n });\n\n // Create edges\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions: number[] = [];\n\n edges.forEach((edge: any) => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n if (start && end) {\n edgePositions.push(start.x, start.y, start.z);\n edgePositions.push(end.x, end.y, end.z);\n }\n });\n\n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({ \n color: 0x00d4ff,\n opacity: 0.8,\n transparent: true\n });\n\n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n geometryGroupRef.current!.add(edgeLines);\n\n // Update vertex count display\n const vertexCountElement = document.getElementById('vertexCount');\n if (vertexCountElement) {\n vertexCountElement.textContent = vertices.length.toString();\n }\n\n } catch (error) {\n console.error('Error loading geometry:', error);\n \n // Show error message\n const errorDiv = document.createElement('div');\n errorDiv.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(255, 68, 68, 0.95);\n color: white;\n padding: 20px;\n border-radius: 8px;\n z-index: 10000;\n text-align: center;\n `;\n errorDiv.innerHTML = `\n

Error Loading Geometry

${error.message}

\n \n `;\n document.body.appendChild(errorDiv);\n \n setTimeout(() => {\n if (document.body.contains(errorDiv)) {\n document.body.removeChild(errorDiv);\n }\n }, 5000);\n } finally {\n setIsLoading(false);\n }\n };\n\n // Load geometry when shape or dimension changes\n useEffect(() => {\n loadGeometry();\n }, [currentShape, dimension]);\n\n // Listen for control panel events\n useEffect(() => {\n const handleShapeChanged = (e: CustomEvent) => {\n setCurrentShape(e.detail.shape);\n };\n\n const handleDimensionChanged = (e: CustomEvent) => {\n setDimension(e.detail.dimension);\n // Update shape to default for new dimension\n setCurrentShape(e.detail.dimension === 4 ? 'tesseract' : 'penteract');\n };\n\n const handleAutoRotateToggled = (e: CustomEvent) => {\n setAutoRotate(e.detail.enabled);\n };\n\n window.addEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.addEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.addEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n\n return () => {\n window.removeEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.removeEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.removeEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n };\n }, []);\n\n return (\n

\n \n {isLoading && (\n

\n Generating {dimension}D {currentShape}...\n

\n )}\n\n {/* Floating controls */}\n

\n setAutoRotate(!autoRotate)}\n title={autoRotate ? 'Stop auto-rotation' : 'Start auto-rotation'}\n >\n {autoRotate ? '⏸️' : '▶️'}\n \n

\n\n \n

\n );\n}",[],[301,338,331],"components","c1f19930-5d5b-11f0-b796-0224a6c84d84","GeometryViewer.tsx","934fb785-3b3c-46ca-8983-733aeffe0684",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useCallback, useState } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { AppState, Vector3D, Vector4D, Vector5D } from '../../shared/types.ts';\nimport { Geometry4D } from '../../shared/math/geometry4d.ts';\nimport { Geometry5D } from '../../shared/math/geometry5d.ts';\nimport { ProjectionEngine } from '../../shared/math/projections.ts';\nimport { TransformationEngine } from '../../shared/math/transformations.ts';\n\ninterface GeometryViewerProps {\n appState: AppState;\n container: HTMLDivElement | null;\n onShapeGenerated?: (shape: any) => void;\n}\n\nexport function GeometryViewer({ appState, container, onShapeGenerated }: GeometryViewerProps) {\n const sceneRef = useRef();\n const rendererRef = useRef();\n const cameraRef = useRef();\n const geometryGroupRef = useRef();\n const animationFrameRef = useRef();\n const controlsRef = useRef();\n const performanceRef = useRef({ frameCount: 0, lastTime: 0, fps: 60 });\n const [isLoading, setIsLoading] = useState(false);\n const [renderStats, setRenderStats] = useState({ vertices: 0, faces: 0, drawCalls: 0 });\n\n // Enhanced scene initialization with better lighting and effects\n const initializeScene = useCallback(() => {\n if (!container) return;\n\n // Scene with enhanced background\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000510);\n scene.fog = new THREE.Fog(0x000510, 10, 50);\n sceneRef.current = scene;\n\n // Enhanced camera with better positioning\n const camera = new THREE.PerspectiveCamera(\n appState.camera.fov,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(\n appState.camera.position.x,\n appState.camera.position.y,\n appState.camera.position.z\n );\n cameraRef.current = camera;\n\n // Enhanced renderer with better quality settings\n const renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: 'high-performance',\n precision: 'highp'\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = appState.rendering.showFaces;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.2;\n rendererRef.current = renderer;\n\n // Add renderer to container\n container.appendChild(renderer.domElement);\n\n // Enhanced lighting setup\n const ambientLight = new THREE.AmbientLight(0x404080, appState.lighting.ambient);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, appState.lighting.directional.intensity);\n directionalLight.position.set(\n appState.lighting.directional.direction.x * 10,\n appState.lighting.directional.direction.y * 10,\n appState.lighting.directional.direction.z * 10\n );\n directionalLight.castShadow = true;\n directionalLight.shadow.mapSize.width = 2048;\n directionalLight.shadow.mapSize.height = 2048;\n directionalLight.shadow.camera.near = 0.5;\n directionalLight.shadow.camera.far = 50;\n directionalLight.shadow.camera.left = -10;\n directionalLight.shadow.camera.right = 10;\n directionalLight.shadow.camera.top = 10;\n directionalLight.shadow.camera.bottom = -10;\n scene.add(directionalLight);\n\n // Animated point lights for better visual appeal\n const pointLight1 = new THREE.PointLight(0x00d4ff, appState.lighting.point.intensity * 0.8, 20);\n pointLight1.position.set(5, 5, 5);\n scene.add(pointLight1);\n\n const pointLight2 = new THREE.PointLight(0xff4400, appState.lighting.point.intensity * 0.6, 15);\n pointLight2.position.set(-5, -5, 5);\n scene.add(pointLight2);\n\n // Add subtle particle system for ambiance\n const particleGeometry = new THREE.BufferGeometry();\n const particleCount = 200;\n const positions = new Float32Array(particleCount * 3);\n \n for (let i = 0; i < particleCount * 3; i++) {\n positions[i] = (Math.random() - 0.5) * 50;\n }\n \n particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n \n const particleMaterial = new THREE.PointsMaterial({\n color: 0x00d4ff,\n size: 0.02,\n transparent: true,\n opacity: 0.3,\n blending: THREE.AdditiveBlending\n });\n \n const particles = new THREE.Points(particleGeometry, particleMaterial);\n scene.add(particles);\n\n // Geometry group with enhanced features\n const geometryGroup = new THREE.Group();\n scene.add(geometryGroup);\n geometryGroupRef.current = geometryGroup;\n\n // Enhanced mouse controls with momentum and smoothing\n let isMouseDown = false;\n let mouseX = 0;\n let mouseY = 0;\n let cameraRotationX = 0;\n let cameraRotationY = 0;\n let targetRotationX = 0;\n let targetRotationY = 0;\n let cameraDistance = 5;\n let targetDistance = 5;\n\n const handleMouseDown = (event: MouseEvent) => {\n isMouseDown = true;\n mouseX = event.clientX;\n mouseY = event.clientY;\n renderer.domElement.style.cursor = 'grabbing';\n };\n\n const handleMouseMove = (event: MouseEvent) => {\n if (!isMouseDown) return;\n\n const deltaX = event.clientX - mouseX;\n const deltaY = event.clientY - mouseY;\n\n targetRotationY += deltaX * 0.01;\n targetRotationX += deltaY * 0.01;\n\n // Clamp vertical rotation\n targetRotationX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, targetRotationX));\n\n mouseX = event.clientX;\n mouseY = event.clientY;\n };\n\n const handleMouseUp = () => {\n isMouseDown = false;\n renderer.domElement.style.cursor = 'grab';\n };\n\n const handleWheel = (event: WheelEvent) => {\n event.preventDefault();\n const scale = event.deltaY > 0 ? 1.1 : 0.9;\n targetDistance *= scale;\n targetDistance = Math.max(2, Math.min(20, targetDistance));\n };\n\n // Smooth camera animation\n const updateCamera = () => {\n // Smooth interpolation\n cameraRotationX += (targetRotationX - cameraRotationX) * 0.1;\n cameraRotationY += (targetRotationY - cameraRotationY) * 0.1;\n cameraDistance += (targetDistance - cameraDistance) * 0.1;\n\n // Update camera position\n camera.position.x = cameraDistance * Math.cos(cameraRotationX) * Math.sin(cameraRotationY);\n camera.position.y = cameraDistance * Math.sin(cameraRotationX);\n camera.position.z = cameraDistance * Math.cos(cameraRotationX) * Math.cos(cameraRotationY);\n camera.lookAt(0, 0, 0);\n\n // Animate lights\n const time = Date.now() * 0.001;\n pointLight1.position.x = Math.sin(time) * 5;\n pointLight1.position.z = Math.cos(time) * 5;\n pointLight2.position.x = Math.cos(time * 0.7) * -5;\n pointLight2.position.z = Math.sin(time * 0.7) * 5;\n\n // Animate particles\n particles.rotation.y += 0.001;\n };\n\n renderer.domElement.addEventListener('mousedown', handleMouseDown);\n renderer.domElement.addEventListener('mousemove', handleMouseMove);\n renderer.domElement.addEventListener('mouseup', handleMouseUp);\n renderer.domElement.addEventListener('mouseleave', handleMouseUp);\n renderer.domElement.addEventListener('wheel', handleWheel);\n renderer.domElement.style.cursor = 'grab';\n\n controlsRef.current = {\n handleMouseDown,\n handleMouseMove,\n handleMouseUp,\n handleWheel,\n updateCamera\n };\n\n // Handle resize with debouncing\n let resizeTimeout: number;\n const handleResize = () => {\n clearTimeout(resizeTimeout);\n resizeTimeout = setTimeout(() => {\n if (!container || !camera || !renderer) return;\n \n camera.aspect = container.clientWidth / container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n }, 100);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n clearTimeout(resizeTimeout);\n \n renderer.domElement.removeEventListener('mousedown', handleMouseDown);\n renderer.domElement.removeEventListener('mousemove', handleMouseMove);\n renderer.domElement.removeEventListener('mouseup', handleMouseUp);\n renderer.domElement.removeEventListener('mouseleave', handleMouseUp);\n renderer.domElement.removeEventListener('wheel', handleWheel);\n \n if (renderer.domElement.parentNode) {\n renderer.domElement.parentNode.removeChild(renderer.domElement);\n }\n \n // Dispose of all resources\n scene.traverse((object) => {\n if (object instanceof THREE.Mesh) {\n object.geometry.dispose();\n if (Array.isArray(object.material)) {\n object.material.forEach(mat => mat.dispose());\n } else {\n object.material.dispose();\n }\n }\n });\n \n renderer.dispose();\n };\n }, [container, appState.camera, appState.lighting, appState.rendering.showFaces]);\n\n // Enhanced geometry update with backend API integration\n const updateGeometry = useCallback(async () => {\n if (!geometryGroupRef.current) return;\n\n setIsLoading(true);\n \n // Clear existing geometry with proper disposal\n const disposeObject = (obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n obj.geometry.dispose();\n if (Array.isArray(obj.material)) {\n obj.material.forEach(mat => mat.dispose());\n } else {\n obj.material.dispose();\n }\n }\n };\n\n while (geometryGroupRef.current.children.length > 0) {\n const child = geometryGroupRef.current.children[0];\n disposeObject(child);\n geometryGroupRef.current.remove(child);\n }\n\n try {\n // Use backend API for shape generation and projection\n let apiResponse;\n let projectedVertices: Vector3D[] = [];\n let edges: { start: number; end: number }[] = [];\n let faces: { vertices: number[] }[] = [];\n\n if (appState.dimension === 4) {\n // Call 4D shape API\n const response = await fetch('/api/calculate/shape4d', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n shapeType: appState.currentShape,\n transformations: appState.transformations\n })\n });\n\n if (!response.ok) {\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\n }\n\n apiResponse = await response.json();\n \n if (!apiResponse.success) {\n throw new Error(apiResponse.error || 'Failed to generate 4D shape');\n }\n\n // Extract projected data from API response\n projectedVertices = apiResponse.projected3D.vertices;\n edges = apiResponse.projected3D.edges;\n faces = apiResponse.projected3D.faces;\n\n // Update performance stats\n setRenderStats({\n vertices: apiResponse.metadata.vertices,\n faces: apiResponse.metadata.faces || faces.length,\n drawCalls: (appState.rendering.showVertices ? 1 : 0) + \n (appState.rendering.showEdges ? 1 : 0) + \n (appState.rendering.showFaces ? faces.length : 0)\n });\n\n // Update vertex count display\n const vertexCountElement = document.getElementById('vertexCount');\n if (vertexCountElement) {\n vertexCountElement.textContent = apiResponse.metadata.vertices.toString();\n }\n\n // Pass shape data to parent for cross-section analysis\n if (onShapeGenerated) {\n onShapeGenerated(apiResponse.shape4D);\n }\n\n } else if (appState.dimension === 5) {\n // Call 5D shape API\n const response = await fetch('/api/calculate/shape5d', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n shapeType: appState.currentShape,\n transformations: appState.transformations\n })\n });\n\n if (!response.ok) {\n throw new Error(`API Error: ${response.status} ${response.statusText}`);\n }\n\n apiResponse = await response.json();\n \n if (!apiResponse.success) {\n throw new Error(apiResponse.error || 'Failed to generate 5D shape');\n }\n\n // Extract projected data from API response\n projectedVertices = apiResponse.projected3D.vertices;\n edges = apiResponse.projected3D.edges;\n faces = apiResponse.projected3D.faces;\n\n // Update performance stats\n setRenderStats({\n vertices: apiResponse.metadata.vertices,\n faces: apiResponse.metadata.faces || faces.length,\n drawCalls: (appState.rendering.showVertices ? 1 : 0) + \n (appState.rendering.showEdges ? 1 : 0) + \n (appState.rendering.showFaces ? faces.length : 0)\n });\n\n // Update vertex count display\n const vertexCountElement = document.getElementById('vertexCount');\n if (vertexCountElement) {\n vertexCountElement.textContent = apiResponse.metadata.vertices.toString();\n }\n }\n\n // Create enhanced 3D visualization with API data\n await createEnhancedVisualization(projectedVertices, edges, faces);\n\n // Handle cross-sections with backend API\n if (appState.crossSection.enabled && apiResponse) {\n try {\n const crossSectionResponse = await fetch('/api/calculate/cross-section', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n shape: appState.dimension === 4 ? apiResponse.shape4D : apiResponse.shape5D,\n hyperplane: {\n position: appState.crossSection.position,\n normal: appState.crossSection.normal\n },\n dimension: appState.dimension\n })\n });\n\n if (crossSectionResponse.ok) {\n const crossSectionData = await crossSectionResponse.json();\n if (crossSectionData.success && crossSectionData.crossSection.vertices.length > 0) {\n createEnhancedCrossSectionVisualization(crossSectionData.crossSection.vertices);\n }\n }\n } catch (crossSectionError) {\n console.warn('Cross-section calculation failed:', crossSectionError);\n }\n }\n\n } catch (error) {\n console.error('Error updating geometry:', error);\n \n // Show error message to user\n const errorDiv = document.createElement('div');\n errorDiv.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(255, 68, 68, 0.95);\n color: white;\n padding: 20px;\n border-radius: 8px;\n z-index: 10000;\n max-width: 400px;\n text-align: center;\n border: 1px solid rgba(255, 255, 255, 0.3);\n `;\n errorDiv.innerHTML = `\n

Geometry Generation Error

${error.message}

\n \n `;\n document.body.appendChild(errorDiv);\n \n // Auto-remove after 5 seconds\n setTimeout(() => {\n if (document.body.contains(errorDiv)) {\n document.body.removeChild(errorDiv);\n }\n }, 5000);\n \n } finally {\n setIsLoading(false);\n }\n }, [appState, onShapeGenerated]);\n\n // Enhanced 3D visualization with advanced materials and effects\n const createEnhancedVisualization = useCallback(async (\n vertices: Vector3D[],\n edges: { start: number; end: number }[],\n faces: { vertices: number[] }[]\n ) => {\n if (!geometryGroupRef.current) return;\n\n const group = geometryGroupRef.current;\n\n // Create enhanced vertices with glow effect\n if (appState.rendering.showVertices) {\n const vertexGeometry = new THREE.SphereGeometry(0.06, 12, 8);\n \n // Create instanced mesh for better performance\n const instancedVertexMesh = new THREE.InstancedMesh(\n vertexGeometry,\n new THREE.MeshPhongMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: appState.rendering.opacity,\n emissive: appState.rendering.vertexColor,\n emissiveIntensity: 0.2,\n shininess: 100\n }),\n vertices.length\n );\n\n const matrix = new THREE.Matrix4();\n vertices.forEach((vertex, index) => {\n matrix.setPosition(vertex.x, vertex.y, vertex.z);\n instancedVertexMesh.setMatrixAt(index, matrix);\n });\n instancedVertexMesh.instanceMatrix.needsUpdate = true;\n \n group.add(instancedVertexMesh);\n\n // Add vertex glow effect\n const glowGeometry = new THREE.SphereGeometry(0.12, 8, 6);\n const glowMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: appState.rendering.opacity * 0.3,\n blending: THREE.AdditiveBlending\n });\n\n vertices.forEach(vertex => {\n const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);\n glowMesh.position.set(vertex.x, vertex.y, vertex.z);\n group.add(glowMesh);\n });\n }\n\n // Create enhanced edges with animated flow effect\n if (appState.rendering.showEdges) {\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions: number[] = [];\n const edgeColors: number[] = [];\n\n edges.forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n edgePositions.push(start.x, start.y, start.z);\n edgePositions.push(end.x, end.y, end.z);\n \n // Add color variation based on edge length\n const distance = Math.sqrt(\n (end.x - start.x) ** 2 + (end.y - start.y) ** 2 + (end.z - start.z) ** 2\n );\n const intensity = Math.min(1, distance / 2);\n \n const color = new THREE.Color(appState.rendering.edgeColor);\n color.multiplyScalar(intensity);\n \n edgeColors.push(color.r, color.g, color.b);\n edgeColors.push(color.r, color.g, color.b);\n }\n });\n\n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n edgeGeometry.setAttribute('color', new THREE.Float32BufferAttribute(edgeColors, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({\n vertexColors: true,\n transparent: true,\n opacity: appState.rendering.opacity,\n linewidth: 2\n });\n\n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n group.add(edgeLines);\n\n // Add animated flow effect on edges\n if (appState.isAnimating) {\n const flowGeometry = new THREE.BufferGeometry();\n const flowPositions: number[] = [];\n \n edges.slice(0, Math.min(20, edges.length)).forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n flowPositions.push(start.x, start.y, start.z);\n }\n });\n\n flowGeometry.setAttribute('position', new THREE.Float32BufferAttribute(flowPositions, 3));\n \n const flowMaterial = new THREE.PointsMaterial({\n color: 0x00ffff,\n size: 0.1,\n transparent: true,\n opacity: 0.8,\n blending: THREE.AdditiveBlending\n });\n\n const flowPoints = new THREE.Points(flowGeometry, flowMaterial);\n group.add(flowPoints);\n }\n }\n\n // Create enhanced faces with advanced materials\n if (appState.rendering.showFaces && faces.length > 0) {\n const faceGroup = new THREE.Group();\n \n faces.forEach((face, faceIndex) => {\n if (face.vertices.length >= 3) {\n const faceGeometry = new THREE.BufferGeometry();\n const facePositions: number[] = [];\n const faceNormals: number[] = [];\n const faceUVs: number[] = [];\n const faceIndices: number[] = [];\n\n // Add vertices\n face.vertices.forEach((vertexIndex, i) => {\n const vertex = vertices[vertexIndex];\n if (vertex) {\n facePositions.push(vertex.x, vertex.y, vertex.z);\n \n // Generate UVs for texture mapping\n const u = (i % 2);\n const v = Math.floor(i / 2) % 2;\n faceUVs.push(u, v);\n }\n });\n\n // Create triangles for faces with more than 3 vertices\n for (let i = 1; i < face.vertices.length - 1; i++) {\n faceIndices.push(0, i, i + 1);\n }\n\n faceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(facePositions, 3));\n faceGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(faceUVs, 2));\n faceGeometry.setIndex(faceIndices);\n faceGeometry.computeVertexNormals();\n\n // Enhanced material with multiple rendering modes\n let faceMaterial: THREE.Material;\n \n if (appState.rendering.wireframe) {\n faceMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.color,\n wireframe: true,\n transparent: true,\n opacity: appState.rendering.opacity\n });\n } else {\n faceMaterial = new THREE.MeshPhongMaterial({\n color: appState.rendering.color,\n transparent: true,\n opacity: appState.rendering.opacity * 0.7,\n side: THREE.DoubleSide,\n shininess: 30,\n specular: 0x111111,\n emissive: appState.rendering.color,\n emissiveIntensity: 0.1\n });\n }\n\n const faceMesh = new THREE.Mesh(faceGeometry, faceMaterial);\n faceMesh.castShadow = true;\n faceMesh.receiveShadow = true;\n \n // Add subtle animation to faces\n if (appState.isAnimating) {\n faceMesh.userData = { \n originalScale: 1,\n animationOffset: faceIndex * 0.1\n };\n }\n \n faceGroup.add(faceMesh);\n }\n });\n \n group.add(faceGroup);\n }\n\n // Add bounding box visualization\n const box = new THREE.Box3().setFromPoints(\n vertices.map(v => new THREE.Vector3(v.x, v.y, v.z))\n );\n \n const boxHelper = new THREE.Box3Helper(box, 0x444444);\n boxHelper.material.transparent = true;\n boxHelper.material.opacity = 0.1;\n group.add(boxHelper);\n\n }, [appState.rendering, appState.isAnimating]);\n\n // Enhanced cross-section visualization with advanced effects\n const createEnhancedCrossSectionVisualization = useCallback((points: Vector3D[]) => {\n if (!geometryGroupRef.current || points.length === 0) return;\n\n const group = geometryGroupRef.current;\n\n // Create cross-section points with pulsing effect\n const crossSectionGeometry = new THREE.SphereGeometry(0.04, 8, 6);\n const crossSectionMaterial = new THREE.MeshPhongMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.9,\n emissive: '#ff2222',\n emissiveIntensity: 0.3\n });\n\n points.forEach((point, index) => {\n const pointMesh = new THREE.Mesh(crossSectionGeometry, crossSectionMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n pointMesh.userData = { \n type: 'crossSection',\n animationOffset: index * 0.2\n };\n group.add(pointMesh);\n\n // Add glow effect\n const glowGeometry = new THREE.SphereGeometry(0.08, 6, 4);\n const glowMaterial = new THREE.MeshBasicMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.3,\n blending: THREE.AdditiveBlending\n });\n \n const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);\n glowMesh.position.set(point.x, point.y, point.z);\n glowMesh.userData = { \n type: 'crossSectionGlow',\n animationOffset: index * 0.2\n };\n group.add(glowMesh);\n });\n\n // Connect cross-section points with enhanced lines\n if (points.length > 1) {\n const lineGeometry = new THREE.BufferGeometry();\n const linePositions: number[] = [];\n const lineColors: number[] = [];\n\n for (let i = 0; i < points.length; i++) {\n const current = points[i];\n const next = points[(i + 1) % points.length];\n \n linePositions.push(current.x, current.y, current.z);\n linePositions.push(next.x, next.y, next.z);\n \n // Gradient colors\n lineColors.push(1, 0.2, 0.2); // Red\n lineColors.push(1, 0.6, 0.2); // Orange\n }\n\n lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n lineGeometry.setAttribute('color', new THREE.Float32BufferAttribute(lineColors, 3));\n \n const lineMaterial = new THREE.LineBasicMaterial({\n vertexColors: true,\n transparent: true,\n opacity: 0.8,\n linewidth: 3\n });\n\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n lines.userData = { type: 'crossSectionLines' };\n group.add(lines);\n\n // Create cross-section surface if enough points\n if (points.length >= 3) {\n const surfaceGeometry = new THREE.BufferGeometry();\n const surfacePositions: number[] = [];\n const surfaceIndices: number[] = [];\n\n points.forEach(point => {\n surfacePositions.push(point.x, point.y, point.z);\n });\n\n // Create triangulated surface\n for (let i = 1; i < points.length - 1; i++) {\n surfaceIndices.push(0, i, i + 1);\n }\n\n surfaceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(surfacePositions, 3));\n surfaceGeometry.setIndex(surfaceIndices);\n surfaceGeometry.computeVertexNormals();\n\n const surfaceMaterial = new THREE.MeshPhongMaterial({\n color: '#ff6666',\n transparent: true,\n opacity: 0.4,\n side: THREE.DoubleSide,\n emissive: '#ff2222',\n emissiveIntensity: 0.1\n });\n\n const surfaceMesh = new THREE.Mesh(surfaceGeometry, surfaceMaterial);\n surfaceMesh.userData = { type: 'crossSectionSurface' };\n group.add(surfaceMesh);\n }\n }\n }, []);\n\n // Enhanced animation loop with performance monitoring and smooth effects\n const animate = useCallback(() => {\n if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;\n\n const currentTime = performance.now();\n const deltaTime = currentTime - performanceRef.current.lastTime;\n performanceRef.current.lastTime = currentTime;\n\n // Update FPS counter\n performanceRef.current.frameCount++;\n if (performanceRef.current.frameCount % 60 === 0) {\n const fps = Math.round(1000 / (deltaTime || 16.67));\n performanceRef.current.fps = fps;\n \n const fpsElement = document.getElementById('fpsCounter');\n if (fpsElement) {\n fpsElement.textContent = fps.toString();\n fpsElement.style.color = fps > 45 ? '#00ff00' : fps > 30 ? '#ffff00' : '#ff0000';\n }\n }\n\n // Update camera controls\n if (controlsRef.current?.updateCamera) {\n controlsRef.current.updateCamera();\n }\n\n // Animate geometry elements\n if (geometryGroupRef.current) {\n const time = currentTime * 0.001;\n \n geometryGroupRef.current.traverse((object) => {\n if (object.userData.type === 'crossSection') {\n const scale = 1 + Math.sin(time * 3 + object.userData.animationOffset) * 0.2;\n object.scale.setScalar(scale);\n } else if (object.userData.type === 'crossSectionGlow') {\n const opacity = 0.3 + Math.sin(time * 2 + object.userData.animationOffset) * 0.2;\n if (object instanceof THREE.Mesh && object.material instanceof THREE.Material) {\n object.material.opacity = opacity;\n }\n } else if (object.userData.originalScale && appState.isAnimating) {\n const scale = object.userData.originalScale + Math.sin(time + object.userData.animationOffset) * 0.05;\n object.scale.setScalar(scale);\n }\n });\n\n // Rotate the entire geometry group if auto-rotation is enabled\n if (appState.isAnimating) {\n geometryGroupRef.current.rotation.y += 0.005 * appState.animationSpeed;\n geometryGroupRef.current.rotation.x += 0.003 * appState.animationSpeed;\n }\n }\n\n // Render the scene\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n animationFrameRef.current = requestAnimationFrame(animate);\n }, [appState.isAnimating, appState.animationSpeed]);\n\n // Initialize scene on mount\n useEffect(() => {\n const cleanup = initializeScene();\n \n if (cleanup) {\n return cleanup;\n }\n }, [initializeScene]);\n\n // Update geometry when app state changes with debouncing\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n updateGeometry();\n }, 100);\n\n return () => clearTimeout(timeoutId);\n }, [updateGeometry]);\n\n // Start animation loop\n useEffect(() => {\n animate();\n \n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [animate]);\n\n // Update camera when FOV changes\n useEffect(() => {\n if (cameraRef.current) {\n cameraRef.current.fov = appState.camera.fov;\n cameraRef.current.updateProjectionMatrix();\n }\n }, [appState.camera.fov]);\n\n // Update renderer settings when rendering options change\n useEffect(() => {\n if (rendererRef.current) {\n rendererRef.current.shadowMap.enabled = appState.rendering.showFaces;\n }\n }, [appState.rendering.showFaces]);\n\n // Handle window visibility change for performance optimization\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.hidden) {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n } else {\n animate();\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n return () => document.removeEventListener('visibilitychange', handleVisibilityChange);\n }, [animate]);\n\n // Render loading indicator and performance stats\n return (\n <>\n {isLoading && (\n

\n Generating {appState.dimension}D {appState.currentShape}...\n

\n )}\n\n {/* Performance overlay */}\n

0 ? 'block' : 'none'\n }}>\n

Performance Stats:

FPS: 45 ? '#00ff00' : performanceRef.current.fps > 30 ? '#ffff00' : '#ff0000' }}>\n {performanceRef.current.fps}\n

Vertices: {renderStats.vertices}

Faces: {renderStats.faces}

Draw Calls: {renderStats.drawCalls}

\n\n \n \n );\n}\n}",[],[301,338,340],"c1f18d50-5d5b-11f0-b796-0224a6c84d84","CrossSection.tsx","8d04101a-9901-4185-b884-b1bb88559096",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { Vector3D, Vector4D, CrossSectionSettings } from '../../shared/types.ts';\nimport { Geometry4D } from '../../shared/math/geometry4d.ts';\n\ninterface CrossSectionProps {\n settings: CrossSectionSettings;\n onSettingsChange: (settings: CrossSectionSettings) => void;\n shape4D?: any;\n}\n\nexport function CrossSection({ settings, onSettingsChange, shape4D }: CrossSectionProps) {\n const canvasRef = useRef(null);\n const sceneRef = useRef();\n const rendererRef = useRef();\n const cameraRef = useRef();\n const [crossSectionPoints, setCrossSectionPoints] = useState([]);\n\n // Initialize 2D visualization canvas\n useEffect(() => {\n if (!canvasRef.current) return;\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x1a1a2e);\n sceneRef.current = scene;\n\n const camera = new THREE.OrthographicCamera(-2, 2, 2, -2, 0.1, 1000);\n camera.position.z = 5;\n cameraRef.current = camera;\n\n const renderer = new THREE.WebGLRenderer({ \n canvas: canvasRef.current,\n antialias: true \n });\n renderer.setSize(300, 300);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n rendererRef.current = renderer;\n\n return () => {\n renderer.dispose();\n };\n }, []);\n\n // Update cross-section when settings change\n useEffect(() => {\n if (!settings.enabled || !shape4D) {\n setCrossSectionPoints([]);\n return;\n }\n\n try {\n const points = Geometry4D.calculateCrossSection(shape4D, settings.position);\n setCrossSectionPoints(points);\n updateVisualization(points);\n } catch (error) {\n console.error('Error calculating cross-section:', error);\n }\n }, [settings, shape4D]);\n\n const updateVisualization = (points: Vector3D[]) => {\n if (!sceneRef.current || !rendererRef.current || !cameraRef.current) return;\n\n // Clear existing objects\n while (sceneRef.current.children.length > 0) {\n const child = sceneRef.current.children[0];\n sceneRef.current.remove(child);\n if (child instanceof THREE.Mesh) {\n child.geometry.dispose();\n if (Array.isArray(child.material)) {\n child.material.forEach(mat => mat.dispose());\n } else {\n child.material.dispose();\n }\n }\n }\n\n if (points.length === 0) {\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n return;\n }\n\n // Create points\n const pointGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const pointMaterial = new THREE.MeshBasicMaterial({ color: 0xff4444 });\n\n points.forEach(point => {\n const pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n sceneRef.current!.add(pointMesh);\n });\n\n // Connect points with lines if there are enough\n if (points.length > 1) {\n const lineGeometry = new THREE.BufferGeometry();\n const linePositions: number[] = [];\n\n for (let i = 0; i < points.length; i++) {\n const current = points[i];\n const next = points[(i + 1) % points.length];\n \n linePositions.push(current.x, current.y, current.z);\n linePositions.push(next.x, next.y, next.z);\n }\n\n lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n \n const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff4444 });\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n sceneRef.current.add(lines);\n }\n\n // Add grid\n const gridHelper = new THREE.GridHelper(4, 10, 0x444444, 0x222222);\n gridHelper.rotateX(Math.PI / 2);\n sceneRef.current.add(gridHelper);\n\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n };\n\n const handleToggle = () => {\n onSettingsChange({\n ...settings,\n enabled: !settings.enabled\n });\n };\n\n const handlePositionChange = (position: number) => {\n onSettingsChange({\n ...settings,\n position\n });\n };\n\n const handleDimensionChange = (dimension: number) => {\n onSettingsChange({\n ...settings,\n dimension\n });\n };\n\n const handleNormalChange = (axis: 'x' | 'y' | 'z' | 'w', value: number) => {\n const newNormal = { ...settings.normal } as Vector4D;\n newNormal[axis] = value;\n \n onSettingsChange({\n ...settings,\n normal: newNormal\n });\n };\n\n return (\n

Cross Section Analysis

\n \n

\n\n {settings.enabled && (\n

\n \n Hyperplane Position (W = {settings.position.toFixed(2)})\n \n

\n handlePositionChange(parseFloat(e.target.value))}\n />\n {settings.position.toFixed(1)}\n

\n\n

\n Hyperplane Normal Vector\n

\n {(['x', 'y', 'z', 'w'] as const).map(axis => (\n

\n {axis.toUpperCase()}\n handleNormalChange(axis, parseFloat(e.target.value))}\n />\n

\n ))}\n

\n\n

\n Cross-Section Visualization\n

\n\n

\n Analysis Tools\n

\n \n \n \n

\n\n

Understanding Cross-Sections

\n A cross-section of a 4D object is created by intersecting it with a 3D hyperplane. \n This is analogous to how a 2D slice reveals the interior of a 3D object.\n

Position: Where the hyperplane cuts through the 4D space
Normal Vector: The direction perpendicular to the hyperplane
Result: A 3D shape that shows the \"interior\" of the 4D object

\n )}\n\n \n

\n );\n}",[],[301,338,347],"c1f17496-5d5b-11f0-b796-0224a6c84d84","ControlPanel.tsx","00240058-92bd-4206-bc8b-64e5dcff89c3",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport { AppState, ShapeType } from '../../shared/types.ts';\n\ninterface ControlPanelProps {\n appState: AppState;\n onStateChange: (newState: Partial) => void;\n}\n\nexport function ControlPanel({ appState, onStateChange }: ControlPanelProps) {\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [activeTab, setActiveTab] = useState('shape');\n const [isAnimating, setIsAnimating] = useState(false);\n const [presets, setPresets] = useState([]);\n const [showPresets, setShowPresets] = useState(false);\n\n // Enhanced event dispatching with better feedback\n const dispatchEvent = useCallback((eventName: string, detail: any) => {\n window.dispatchEvent(new CustomEvent(eventName, { detail }));\n \n // Visual feedback for user actions\n setIsAnimating(true);\n setTimeout(() => setIsAnimating(false), 200);\n }, []);\n\n const handleDimensionChange = useCallback((dimension: 4 | 5) => {\n const defaultShape = dimension === 4 ? 'tesseract' : 'penteract';\n onStateChange({\n dimension,\n currentShape: defaultShape\n });\n dispatchEvent('dimensionChanged', { dimension });\n }, [onStateChange, dispatchEvent]);\n\n const handleShapeChange = useCallback((shape: ShapeType) => {\n onStateChange({ currentShape: shape });\n dispatchEvent('shapeChanged', { shape });\n }, [onStateChange, dispatchEvent]);\n\n const handleTransformationChange = useCallback((type: string, value: number) => {\n const newTransformations = { ...appState.transformations };\n \n if (type === 'scale') {\n newTransformations.scale = value;\n dispatchEvent('scaleChanged', { scale: value });\n } else if (type.startsWith('rotation')) {\n const plane = type.replace('rotation', '').toLowerCase();\n newTransformations.rotation4D = {\n ...newTransformations.rotation4D,\n [plane]: value * Math.PI / 180\n };\n dispatchEvent('rotationChanged', { plane, angle: value * Math.PI / 180 });\n }\n \n onStateChange({ transformations: newTransformations });\n }, [appState.transformations, onStateChange, dispatchEvent]);\n\n const handleRenderingChange = useCallback((property: string, value: any) => {\n onStateChange({\n rendering: {\n ...appState.rendering,\n [property]: value\n }\n });\n \n // Dispatch specific events for different rendering changes\n switch (property) {\n case 'showVertices':\n dispatchEvent('showVerticesChanged', { enabled: value });\n break;\n case 'showEdges':\n dispatchEvent('showEdgesChanged', { enabled: value });\n break;\n case 'showFaces':\n dispatchEvent('showFacesChanged', { enabled: value });\n break;\n case 'wireframe':\n dispatchEvent('wireframeModeChanged', { enabled: value });\n break;\n case 'opacity':\n dispatchEvent('opacityChanged', { opacity: value });\n break;\n }\n }, [appState.rendering, onStateChange, dispatchEvent]);\n\n const resetTransformations = useCallback(() => {\n const resetState = {\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n };\n onStateChange(resetState);\n dispatchEvent('transformationsReset', resetState);\n }, [onStateChange, dispatchEvent]);\n\n // Preset management\n const savePreset = useCallback(() => {\n const preset = {\n id: Date.now(),\n name: `Preset ${presets.length + 1}`,\n transformations: appState.transformations,\n rendering: appState.rendering,\n timestamp: new Date().toISOString()\n };\n \n const newPresets = [...presets, preset];\n setPresets(newPresets);\n localStorage.setItem('geometryPresets', JSON.stringify(newPresets));\n }, [presets, appState.transformations, appState.rendering]);\n\n const loadPreset = useCallback((preset: any) => {\n onStateChange({\n transformations: preset.transformations,\n rendering: preset.rendering\n });\n dispatchEvent('presetLoaded', { preset });\n }, [onStateChange, dispatchEvent]);\n\n const deletePreset = useCallback((presetId: number) => {\n const newPresets = presets.filter(p => p.id !== presetId);\n setPresets(newPresets);\n localStorage.setItem('geometryPresets', JSON.stringify(newPresets));\n }, [presets]);\n\n // Load presets on mount\n useEffect(() => {\n const savedPresets = localStorage.getItem('geometryPresets');\n if (savedPresets) {\n try {\n setPresets(JSON.parse(savedPresets));\n } catch (error) {\n console.error('Failed to load presets:', error);\n }\n }\n }, []);\n\n // Auto-rotation toggle\n const toggleAutoRotation = useCallback(() => {\n const enabled = !appState.isAnimating;\n onStateChange({ isAnimating: enabled });\n dispatchEvent('autoRotateToggled', { enabled });\n }, [appState.isAnimating, onStateChange, dispatchEvent]);\n\n // Projection settings\n const handleProjectionChange = useCallback((property: string, value: number) => {\n onStateChange({\n projection: {\n ...appState.projection,\n [property]: value\n }\n });\n \n if (property === 'distance') {\n dispatchEvent('projectionDistanceChanged', { distance: value });\n }\n }, [appState.projection, onStateChange, dispatchEvent]);\n\n const handleCameraChange = useCallback((property: string, value: number) => {\n onStateChange({\n camera: {\n ...appState.camera,\n [property]: value\n }\n });\n \n if (property === 'fov') {\n dispatchEvent('cameraFOVChanged', { fov: value });\n }\n }, [appState.camera, onStateChange, dispatchEvent]);\n\n const shapes4D = [\n { id: 'tesseract', name: 'Tesseract', icon: '🔲' },\n { id: '16-cell', name: '16-Cell', icon: '💎' },\n { id: '600-cell', name: '600-Cell', icon: '🌟' },\n { id: '120-cell', name: '120-Cell', icon: '🔮' }\n ];\n\n const shapes5D = [\n { id: 'penteract', name: 'Penteract', icon: '🔳' },\n { id: '5-simplex', name: '5-Simplex', icon: '🔺' },\n { id: '5-orthoplex', name: '5-Orthoplex', icon: '💠' },\n { id: 'custom', name: 'Custom', icon: '⚙️' }\n ];\n\n const currentShapes = appState.dimension === 4 ? shapes4D : shapes5D;\n\n return (\n

Controls

\n \n \n

\n\n {showPresets && !isCollapsed && (\n

Presets

\n \n

\n {presets.length === 0 ? (\n

No presets saved

\n ) : (\n presets.map(preset => (\n

\n {preset.name}\n \n {new Date(preset.timestamp).toLocaleDateString()}\n \n

\n \n \n

\n ))\n )}\n

\n )}\n\n {!isCollapsed && (\n <>\n

\n \n \n \n \n

\n\n {activeTab === 'shape' && (\n

\n Dimension\n

\n handleDimensionChange(4)}\n >\n 🔲\n 4D\n \n handleDimensionChange(5)}\n >\n 🔳\n 5D\n \n

\n\n

\n Shape Type\n

\n {currentShapes.map(shape => (\n handleShapeChange(shape.id as ShapeType)}\n title={shape.name}\n >\n {shape.icon}\n {shape.name}\n

\n {getShapeComplexity(shape.id)}\n

\n \n ))}\n

\n\n

\n Quick Actions\n

\n \n \n

\n )}\n\n {activeTab === 'transform' && (\n

\n Scale\n

\n handleTransformationChange('scale', parseFloat(e.target.value))}\n />\n

\n {appState.transformations.scale.toFixed(2)}\n

\n\n

\n 4D Rotations\n

\n {Object.entries(appState.transformations.rotation4D).map(([plane, angle]) => (\n

\n \n {plane.toUpperCase()}\n \n {getRotationDescription(plane)}\n \n \n

\n handleTransformationChange(`rotation${plane}`, parseInt(e.target.value))}\n />\n

\n {Math.round(angle * 180 / Math.PI)}°\n

\n ))}\n

\n\n

\n Animation Speed\n

\n onStateChange({ animationSpeed: parseFloat(e.target.value) })}\n />\n

\n {appState.animationSpeed.toFixed(1)}x\n

\n )}\n\n {activeTab === 'render' && (\n

\n Display Options\n

\n \n handleRenderingChange('showVertices', e.target.checked)}\n />\n \n \n ⚫\n Show Vertices\n \n \n \n handleRenderingChange('showEdges', e.target.checked)}\n />\n \n \n 📏\n Show Edges\n \n \n \n handleRenderingChange('showFaces', e.target.checked)}\n />\n \n \n 🔷\n Show Faces\n \n \n \n handleRenderingChange('wireframe', e.target.checked)}\n />\n \n \n 🕸️\n Wireframe Mode\n \n \n

\n\n

\n Opacity\n

\n handleRenderingChange('opacity', parseFloat(e.target.value))}\n />\n

\n {Math.round(appState.rendering.opacity * 100)}%\n

\n\n

\n Colors\n

\n \n 🔷\n Shape Color\n \n

\n handleRenderingChange('color', e.target.value)}\n />\n {appState.rendering.color}\n

\n \n 📏\n Edge Color\n \n

\n handleRenderingChange('edgeColor', e.target.value)}\n />\n {appState.rendering.edgeColor}\n

\n \n ⚫\n Vertex Color\n \n

\n handleRenderingChange('vertexColor', e.target.value)}\n />\n {appState.rendering.vertexColor}\n

\n )}\n\n {activeTab === 'camera' && (\n

\n Projection Distance\n

\n handleProjectionChange('distance', parseFloat(e.target.value))}\n />\n

\n {appState.projection.distance.toFixed(1)}\n

\n\n

\n Field of View\n

\n handleCameraChange('fov', parseInt(e.target.value))}\n />\n

\n {appState.camera.fov}°\n

\n\n

\n Projection Type\n

\n handleProjectionChange('perspective', true)}\n >\n 📐 Perspective\n \n handleProjectionChange('perspective', false)}\n >\n 📏 Orthogonal\n \n

\n )}\n \n )}\n\n {/* Helper functions */}\n {(() => {\n const getShapeComplexity = (shapeId: string) => {\n const complexityMap: { [key: string]: string } = {\n 'tesseract': '●○○',\n '16-cell': '●●○',\n '600-cell': '●●●',\n '120-cell': '●●●',\n 'penteract': '●●○',\n '5-simplex': '●○○',\n '5-orthoplex': '●●○',\n 'custom': '●●●'\n };\n return complexityMap[shapeId] || '●○○';\n };\n\n const getRotationDescription = (plane: string) => {\n const descriptions: { [key: string]: string } = {\n 'xy': 'Standard rotation',\n 'xz': 'Pitch-like rotation',\n 'xw': 'Into 4th dimension',\n 'yz': 'Roll-like rotation',\n 'yw': 'Yaw into 4D',\n 'zw': 'Pure 4D rotation'\n };\n return descriptions[plane] || '';\n };\n\n return null;\n })()}\n\n \n

\n );\n}",[],[301,338,354],"c1f15efc-5d5b-11f0-b796-0224a6c84d84","App.tsx","da78a7cd-adcf-4518-8150-30f569639675",["D",1752130912555],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { GeometryViewer } from './GeometryViewer.tsx';\nimport { ControlPanel } from './ControlPanel.tsx';\nimport { CrossSection } from './CrossSection.tsx';\nimport { AppState, ShapeType, TransformationState } from '../../shared/types.ts';\n\nexport function App() {\n const containerRef = useRef(null);\n const [appState, setAppState] = useState({\n currentShape: 'tesseract',\n dimension: 4,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n },\n camera: {\n position: { x: 0, y: 0, z: 5 },\n target: { x: 0, y: 0, z: 0 },\n up: { x: 0, y: 1, z: 0 },\n fov: 75\n },\n lighting: {\n ambient: 0.4,\n directional: {\n intensity: 0.8,\n direction: { x: 1, y: 1, z: 1 }\n },\n point: {\n intensity: 0.6,\n position: { x: 2, y: 2, z: 2 }\n }\n },\n projection: {\n distance: 2,\n perspective: true,\n viewAngle: 0\n },\n crossSection: {\n enabled: false,\n dimension: 4,\n position: 0,\n normal: { x: 0, y: 0, z: 0, w: 1 }\n },\n rendering: {\n showVertices: true,\n showEdges: true,\n showFaces: false,\n wireframe: false,\n opacity: 0.8,\n color: '#00d4ff',\n edgeColor: '#ffffff',\n vertexColor: '#ffff00'\n },\n isAnimating: false,\n animationSpeed: 1\n });\n\n const [isAutoRotating, setIsAutoRotating] = useState(false);\n const [showCrossSection, setShowCrossSection] = useState(false);\n const [currentShape4D, setCurrentShape4D] = useState(null);\n const animationFrameRef = useRef();\n\n // Handle control panel events\n useEffect(() => {\n const handleDimensionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n dimension: e.detail.dimension,\n currentShape: e.detail.dimension === 4 ? 'tesseract' : 'penteract'\n }));\n };\n\n const handleShapeChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n currentShape: e.detail.shape as ShapeType\n }));\n };\n\n const handleScaleChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n scale: e.detail.scale\n }\n }));\n };\n\n const handleRotationChanged = (e: CustomEvent) => {\n const { plane, angle } = e.detail;\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: {\n ...prev.transformations.rotation4D,\n [plane]: angle\n }\n }\n }));\n };\n\n const handleProjectionDistanceChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n projection: {\n ...prev.projection,\n distance: e.detail.distance\n }\n }));\n };\n\n const handleCameraFOVChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n camera: {\n ...prev.camera,\n fov: e.detail.fov\n }\n }));\n };\n\n const handleCrossSectionToggled = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n enabled: e.detail.enabled\n }\n }));\n };\n\n const handleCrossSectionPositionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n position: e.detail.position\n }\n }));\n };\n\n const handleAutoRotateToggled = (e: CustomEvent) => {\n setIsAutoRotating(e.detail.enabled);\n };\n\n const handleRenderingChanged = (type: string) => (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n [type]: e.detail.enabled !== undefined ? e.detail.enabled : e.detail.opacity\n }\n }));\n };\n\n // Add event listeners\n window.addEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.addEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.addEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.addEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.addEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.addEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.addEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.addEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.addEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.addEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.addEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.addEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.addEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.addEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n\n return () => {\n window.removeEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.removeEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.removeEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.removeEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.removeEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.removeEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.removeEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.removeEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.removeEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.removeEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.removeEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.removeEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.removeEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.removeEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n };\n }, []);\n\n // Auto rotation animation\n useEffect(() => {\n if (isAutoRotating) {\n const animate = () => {\n setAppState(prev => {\n const newRotations = { ...prev.transformations.rotation4D };\n \n // Rotate in multiple planes for interesting motion\n newRotations.xy += 0.01;\n newRotations.zw += 0.008;\n newRotations.xw += 0.005;\n \n // Keep angles in reasonable range\n Object.keys(newRotations).forEach(key => {\n if (newRotations[key as keyof typeof newRotations] > Math.PI * 2) {\n newRotations[key as keyof typeof newRotations] -= Math.PI * 2;\n }\n });\n\n return {\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: newRotations\n }\n };\n });\n\n animationFrameRef.current = requestAnimationFrame(animate);\n };\n\n animationFrameRef.current = requestAnimationFrame(animate);\n } else {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n }\n\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [isAutoRotating]);\n\n // Handle window resize\n useEffect(() => {\n const handleResize = () => {\n // Trigger resize event for the geometry viewer\n window.dispatchEvent(new Event('resize'));\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n // Handle keyboard shortcuts\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case ' ':\n e.preventDefault();\n setIsAutoRotating(prev => !prev);\n break;\n case 'r':\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n // Reset transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }\n break;\n case '1':\n case '2':\n case '3':\n case '4':\n if (!e.ctrlKey && !e.metaKey) {\n const shapeIndex = parseInt(e.key) - 1;\n const shapes4D = ['tesseract', '16-cell', '600-cell', '120-cell'];\n const shapes5D = ['penteract', '5-simplex', '5-orthoplex', 'custom'];\n const shapes = appState.dimension === 4 ? shapes4D : shapes5D;\n \n if (shapeIndex < shapes.length) {\n setAppState(prev => ({\n ...prev,\n currentShape: shapes[shapeIndex] as ShapeType\n }));\n }\n }\n break;\n case 'v':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showVertices: !prev.rendering.showVertices\n }\n }));\n break;\n case 'e':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showEdges: !prev.rendering.showEdges\n }\n }));\n break;\n case 'f':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showFaces: !prev.rendering.showFaces\n }\n }));\n break;\n case 'w':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n wireframe: !prev.rendering.wireframe\n }\n }));\n break;\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [appState.dimension]);\n\n return (\n

\n \n\n {showCrossSection && (\n

\n setAppState(prev => ({ \n ...prev, \n crossSection: settings \n }))}\n shape4D={currentShape4D}\n />\n

\n )}\n\n {/* Floating action buttons */}\n

\n setIsAutoRotating(!isAutoRotating)}\n title={isAutoRotating ? 'Stop auto-rotation' : 'Start auto-rotation'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 0.9)';\n }}\n >\n {isAutoRotating ? '⏸️' : '▶️'}\n \n\n setShowCrossSection(!showCrossSection)}\n title={showCrossSection ? 'Hide cross-section' : 'Show cross-section'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 0.9)';\n }}\n >\n ✂️\n \n\n {\n // Reset all transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }}\n title=\"Reset transformations\"\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 0.9)';\n }}\n >\n 🔄\n \n

\n \n {/* Help overlay - shown on first load */}\n

Welcome to Higher Dimensional Geometry!

\n Mouse Controls:
\n • Drag to rotate the camera
\n • Scroll to zoom in/out

\n \n Keyboard Shortcuts:
\n • Space: Toggle auto-rotation
\n • Ctrl+R: Reset transformations
\n • 1-4: Select shape
\n • V: Toggle vertices
\n • E: Toggle edges
\n • F: Toggle faces
\n • W: Toggle wireframe

\n\n Features:
\n • Explore 4D and 5D shapes
\n • Real-time transformations
\n • Cross-section analysis
\n • Multiple projection methods\n

\n \n

\n\n {/* Performance indicator */}\n

FPS: 60

Vertices: 0

Shape: {appState.currentShape}

Dimension: {appState.dimension}D

\n );\n}",[],[301,338,361],"c1f1c054-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[195,196,197,198,199],[301,338],"c1f20028-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[194,200,201,202,203,204],[301],["D",1752130912555],[],[18,86],"c1f12c66-5d5b-11f0-b796-0224a6c84d84","calculations.ts","2a03ebf5-3d3c-4f87-bfe9-4b3fc022872f",["D",1752130912555],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { Geometry4D } from \"../../shared/math/geometry4d.ts\";\nimport { Geometry5D } from \"../../shared/math/geometry5d.ts\";\nimport { ProjectionEngine } from \"../../shared/math/projections.ts\";\nimport { TransformationEngine } from \"../../shared/math/transformations.ts\";\nimport { Vector4D, Vector5D, Shape4D, Shape5D, TransformationState } from \"../../shared/types.ts\";\n\nconst calculations = new Hono();\n\n// Cache for expensive calculations\nconst calculationCache = new Map();\nconst CACHE_TTL = 5 * 60 * 1000; // 5 minutes\n\ninterface CacheEntry {\n data: any;\n timestamp: number;\n}\n\nfunction getCacheKey(operation: string, params: any): string {\n return `${operation}:${JSON.stringify(params)}`;\n}\n\nfunction getFromCache(key: string): any | null {\n const entry = calculationCache.get(key) as CacheEntry;\n if (!entry) return null;\n \n if (Date.now() - entry.timestamp > CACHE_TTL) {\n calculationCache.delete(key);\n return null;\n }\n \n return entry.data;\n}\n\nfunction setCache(key: string, data: any): void {\n calculationCache.set(key, {\n data,\n timestamp: Date.now()\n });\n}\n\n// Generate 4D shape with transformations\ncalculations.post(\"/shape4d\", async (c) => {\n try {\n const { shapeType, transformations } = await c.req.json();\n \n if (!shapeType || !['tesseract', '16-cell', '600-cell', '120-cell'].includes(shapeType)) {\n return c.json({ success: false, error: \"Invalid 4D shape type\" }, 400);\n }\n\n const cacheKey = getCacheKey('shape4d', { shapeType, transformations });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let shape: Shape4D;\n \n switch (shapeType) {\n case 'tesseract':\n shape = Geometry4D.createTesseract();\n break;\n case '16-cell':\n shape = Geometry4D.create16Cell();\n break;\n case '600-cell':\n shape = Geometry4D.create600Cell();\n break;\n case '120-cell':\n shape = Geometry4D.create120Cell();\n break;\n default:\n throw new Error(\"Unsupported shape type\");\n }\n\n // Apply transformations if provided\n if (transformations) {\n shape = TransformationEngine.applyTransformations4D(shape, transformations);\n }\n\n // Project to 3D for rendering\n const projected3D = ProjectionEngine.project4Dto3D(shape, {\n distance: 2,\n perspective: true,\n viewAngle: 0\n });\n\n const result = {\n shape4D: shape,\n projected3D,\n metadata: {\n vertices: shape.vertices.length,\n edges: shape.edges.length,\n faces: shape.faces.length,\n cells: shape.cells.length,\n complexity: getComplexityRating(shape.vertices.length)\n }\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"4D shape generation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to generate 4D shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Generate 5D shape with transformations\ncalculations.post(\"/shape5d\", async (c) => {\n try {\n const { shapeType, transformations } = await c.req.json();\n \n if (!shapeType || !['penteract', '5-simplex', '5-orthoplex'].includes(shapeType)) {\n return c.json({ success: false, error: \"Invalid 5D shape type\" }, 400);\n }\n\n const cacheKey = getCacheKey('shape5d', { shapeType, transformations });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let shape: Shape5D;\n \n switch (shapeType) {\n case 'penteract':\n shape = Geometry5D.createPenteract();\n break;\n case '5-simplex':\n shape = Geometry5D.create5Simplex();\n break;\n case '5-orthoplex':\n shape = Geometry5D.create5Orthoplex();\n break;\n default:\n throw new Error(\"Unsupported shape type\");\n }\n\n // Apply transformations if provided\n if (transformations) {\n shape = TransformationEngine.applyTransformations5D(shape, transformations);\n }\n\n // Project to 3D for rendering\n const projected3D = ProjectionEngine.project5Dto3D(shape, {\n distance: 2,\n perspective: true,\n viewAngle: 0\n });\n\n const result = {\n shape5D: shape,\n projected3D,\n metadata: {\n vertices: shape.vertices.length,\n edges: shape.edges.length,\n faces: shape.faces.length,\n cells: shape.cells.length,\n hypercells: shape.hypercells.length,\n complexity: getComplexityRating(shape.vertices.length)\n }\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"5D shape generation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to generate 5D shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Cross-section calculation\ncalculations.post(\"/cross-section\", async (c) => {\n try {\n const { shape, hyperplane, dimension } = await c.req.json();\n \n if (!shape || !hyperplane || ![4, 5].includes(dimension)) {\n return c.json({ \n success: false, \n error: \"Invalid cross-section parameters\" \n }, 400);\n }\n\n const cacheKey = getCacheKey('cross-section', { shape, hyperplane, dimension });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let crossSection;\n \n if (dimension === 4) {\n crossSection = Geometry4D.calculateCrossSection(shape, hyperplane);\n } else {\n crossSection = Geometry5D.calculateCrossSection(shape, hyperplane);\n }\n\n const result = {\n crossSection,\n intersectionPoints: crossSection.vertices.length,\n area: calculateCrossSectionArea(crossSection)\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"Cross-section calculation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to calculate cross-section\",\n details: error.message\n }, 500);\n }\n});\n\n// Batch projection calculations\ncalculations.post(\"/project-batch\", async (c) => {\n try {\n const { vertices, projectionType, settings } = await c.req.json();\n \n if (!vertices || !Array.isArray(vertices)) {\n return c.json({ \n success: false, \n error: \"Invalid vertices data\" \n }, 400);\n }\n\n const cacheKey = getCacheKey('project-batch', { vertices, projectionType, settings });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let projectedVertices;\n \n switch (projectionType) {\n case 'perspective':\n projectedVertices = vertices.map(v => \n ProjectionEngine.perspectiveProjection(v, settings.distance)\n );\n break;\n case 'orthogonal':\n projectedVertices = vertices.map(v => \n ProjectionEngine.orthogonalProjection(v)\n );\n break;\n case 'stereographic':\n projectedVertices = vertices.map(v => \n ProjectionEngine.stereographicProjection(v)\n );\n break;\n default:\n throw new Error(\"Unsupported projection type\");\n }\n\n const result = {\n projectedVertices,\n projectionType,\n vertexCount: projectedVertices.length\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"Batch projection error:\", error);\n return c.json({\n success: false,\n error: \"Failed to project vertices\",\n details: error.message\n }, 500);\n }\n});\n\n// Performance optimization endpoint\ncalculations.post(\"/optimize\", async (c) => {\n try {\n const { shape, targetFPS, maxVertices } = await c.req.json();\n \n const optimizedShape = optimizeShapeForPerformance(shape, {\n targetFPS: targetFPS || 60,\n maxVertices: maxVertices || 10000\n });\n\n return c.json({\n success: true,\n originalVertices: shape.vertices?.length || 0,\n optimizedVertices: optimizedShape.vertices.length,\n reductionRatio: shape.vertices ? \n (shape.vertices.length - optimizedShape.vertices.length) / shape.vertices.length : 0,\n optimizedShape\n });\n\n } catch (error) {\n console.error(\"Shape optimization error:\", error);\n return c.json({\n success: false,\n error: \"Failed to optimize shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Cache management\ncalculations.get(\"/cache/stats\", (c) => {\n return c.json({\n success: true,\n cacheSize: calculationCache.size,\n entries: Array.from(calculationCache.keys()),\n memoryUsage: \"Not available in this environment\"\n });\n});\n\ncalculations.delete(\"/cache\", (c) => {\n calculationCache.clear();\n return c.json({\n success: true,\n message: \"Cache cleared successfully\"\n });\n});\n\n// Helper functions\nfunction getComplexityRating(vertexCount: number): string {\n if (vertexCount <= 16) return 'low';\n if (vertexCount <= 100) return 'medium';\n if (vertexCount <= 1000) return 'high';\n return 'very high';\n}\n\nfunction calculateCrossSectionArea(crossSection: any): number {\n // Simplified area calculation - would need proper implementation\n // based on the specific cross-section geometry\n return crossSection.vertices?.length * 0.1 || 0;\n}\n\nfunction optimizeShapeForPerformance(shape: any, options: any): any {\n // Level of Detail (LOD) implementation\n if (!shape.vertices || shape.vertices.length <= options.maxVertices) {\n return shape;\n }\n\n // Simple vertex reduction - in practice, would use more sophisticated algorithms\n const reductionFactor = options.maxVertices / shape.vertices.length;\n const step = Math.ceil(1 / reductionFactor);\n \n const optimizedVertices = shape.vertices.filter((_: any, index: number) => \n index % step === 0\n );\n\n // Rebuild edges and faces based on remaining vertices\n const vertexMap = new Map();\n optimizedVertices.forEach((vertex: any, index: number) => {\n vertexMap.set(shape.vertices.indexOf(vertex), index);\n });\n\n const optimizedEdges = shape.edges?.filter((edge: any) => \n vertexMap.has(edge.start) && vertexMap.has(edge.end)\n ).map((edge: any) => ({\n start: vertexMap.get(edge.start),\n end: vertexMap.get(edge.end)\n })) || [];\n\n return {\n ...shape,\n vertices: optimizedVertices,\n edges: optimizedEdges,\n // Faces and cells would need similar optimization\n faces: shape.faces?.slice(0, Math.floor(shape.faces.length * reductionFactor)) || [],\n cells: shape.cells?.slice(0, Math.floor(shape.cells.length * reductionFactor)) || []\n };\n}\n\nexport { calculations };",[],[18,75,379],["D",1752130912555],[191],[18,75],["D",1752130912555],[190,192],[18],["D",1751721027052],{"_11":12,"_136":81},{"_11":12,"_132":-5,"_80":81,"_31":79,"_133":134,"_135":30},{"_39":40,"_13":16,"_33":36,"_124":90,"_125":69,"_126":71,"_127":94,"_128":90,"_129":42,"_130":14,"_131":12},"ctx",{"_52":-5,"_156":428,"_429":430,"_431":432,"_433":30,"_434":30,"_435":30,"_436":24,"_437":-5,"_438":-7,"_439":-7,"_440":26,"_441":30,"_442":30,"_443":-5,"_444":30,"_445":30,"_446":30,"_447":-5},"ENV",{"_399":400,"_401":402,"_403":70,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend