[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_336":337,"_338":339},"routes/_app.x.$handle.$name",{"_94":93,"_31":42,"_102":84,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":56,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",23,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","MATHEMATICAL_CONCEPTS.md","latestPath","fileId","aad7e5ee-59a3-11f0-bd45-f69ea79377d9","name","fileType","content","# 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","createdAt",["D",1751721992922],"branchVersion","branchId","6b235b56-59a1-11f0-ab17-f69ea79377d9","id","6b230034-59a1-11f0-ab17-f69ea79377d9","AIDA",["D",1751721027052],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","4d geometry","imageUrl","d9951e10-16dc-11f0-9d61-bf534f47ce53","pinnedFileId","fc8be6e8-59a2-11f0-a457-f69ea79377d9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","a87ae3da-e311-4bfb-919e-aa8beb34d11f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},"branch",{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"isOwned",66,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","spooky","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmFPZkZqOVNkRDN1cTJPUEZJZGtDUHpkNGYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":332,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":333,"_78":334,"_80":335,"_82":24},"tree",[171,173,182,190,191],"files",[171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191],"counts",{"_161":60,"_162":145,"_163":60,"_164":165,"_166":167},"contents",[124,125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":155,"_31":156,"_29":157,"_132":-5,"_38":39,"_37":158,"_134":56,"_35":159,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_26":160},{"_40":149,"_31":150,"_29":151,"_132":-5,"_38":39,"_37":152,"_134":56,"_35":153,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_26":154},{"_40":142,"_31":143,"_29":144,"_132":-5,"_38":39,"_37":145,"_134":56,"_35":146,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_26":148},{"_40":139,"_31":27,"_29":30,"_132":-5,"_38":39,"_37":14,"_134":56,"_35":140,"_13":60,"_32":20,"_33":34,"_23":24,"_137":-5,"_26":141},{"_40":129,"_31":130,"_29":131,"_132":-5,"_38":39,"_37":133,"_134":24,"_35":135,"_13":60,"_32":20,"_33":136,"_23":24,"_137":-5,"_26":138},"9f5ca8aa-59a1-11f0-8ca0-f69ea79377d9","README.md","9f5ca97c-59a1-11f0-8ca0-f69ea79377d9","parentId",1,"latest",["D",1751721114669],"# Higher Dimensional Geometry Visualizer\n\nA Next.js application for visualizing and interacting with 4D and 5D geometric shapes and their transformations.\n\n## Features\n\n- **4D/5D Shape Visualization**: Render hypercubes, pentachorons, and other higher-dimensional primitives\n- **Real-time Transformations**: Rotate, scale, and translate shapes in higher dimensions\n- **3D Projections**: View how higher-dimensional objects project into 3D space\n- **Interactive Controls**: Intuitive UI for manipulating shapes and camera perspectives\n- **Cross-sections**: Explore slices through higher-dimensional objects\n- **Performance Optimized**: Efficient calculations and rendering for complex geometry\n- **Responsive Design**: Works across desktop and mobile devices\n\n## Supported Shapes\n\n- **4D Shapes**: Tesseract (4D cube), 16-cell, 600-cell, 120-cell\n- **5D Shapes**: Penteract (5D cube), 5-simplex, 5-orthoplex\n- **Custom Primitives**: User-defined higher-dimensional objects\n\n## Technology Stack\n\n- Next.js with TypeScript\n- Three.js for 3D rendering\n- React Three Fiber for React integration\n- Custom mathematical libraries for higher-dimensional calculations\n- Tailwind CSS for styling\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # API endpoints\n│ └── routes/\n│ └── calculations.ts # Mathematical computation endpoints\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── GeometryViewer.tsx # 3D visualization component\n│ │ ├── ControlPanel.tsx # User interface controls\n│ │ ├── ShapeSelector.tsx # Shape selection interface\n│ │ └── CrossSection.tsx # Cross-section visualization\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Global styles\n├── shared/\n│ ├── math/\n│ │ ├── geometry4d.ts # 4D geometric calculations\n│ │ ├── geometry5d.ts # 5D geometric calculations\n│ │ ├── projections.ts # Projection algorithms\n│ │ └── transformations.ts # Transformation matrices\n│ ├── types.ts # Shared TypeScript types\n│ └── utils.ts # Utility functions\n└── README.md\n```\n\n## Getting Started\n\n1. The application runs as an HTTP val\n2. Navigate to the main page to start exploring higher-dimensional geometry\n3. Use the control panel to select shapes, adjust transformations, and modify viewing parameters\n4. Interact with the 3D viewport to explore projections and cross-sections\n\n## Mathematical Background\n\nThis application implements advanced concepts from higher-dimensional geometry:\n- Orthogonal projections from nD to 3D space\n- Rotation matrices in 4D and 5D spaces\n- Cross-sectional analysis of higher-dimensional objects\n- Real-time transformation calculations optimized for performance","label",[130],"aad7e512-59a3-11f0-bd45-f69ea79377d9",["D",1751721992922],[27],"a83b53f4-59a1-11f0-bf43-f69ea79377d9","shared","6a7dd57b-35c1-426f-9cb3-ba018acef2b3",2,["D",1751721129544],"directory",[143],"5cd807bc-59a2-11f0-acd0-f69ea79377d9","frontend","a68dd96c-250c-4a79-971d-ae156db7cb7b",8,["D",1751721432562],[150],"fc8bf6ec-59a2-11f0-a457-f69ea79377d9","backend","a27fdd47-9285-40e2-9399-02db727e0399",13,["D",1751721700504],[156],"pulls","branches","forks","envVars",{"_168":60,"_170":60},"connections",{"_168":60,"_169":60},"count","unfilledCount","emptyCount",{"_40":155,"_31":156,"_29":157,"_132":-5,"_38":39,"_37":158,"_134":56,"_35":329,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_193":330,"_26":331},{"_40":321,"_31":322,"_29":54,"_132":157,"_38":39,"_37":323,"_134":24,"_35":324,"_13":133,"_32":325,"_33":326,"_23":24,"_137":-5,"_193":327,"_26":328},{"_40":149,"_31":150,"_29":151,"_132":-5,"_38":39,"_37":152,"_134":56,"_35":318,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_193":319,"_26":320},{"_40":313,"_31":288,"_29":282,"_132":151,"_38":39,"_37":314,"_134":56,"_35":315,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_193":316,"_26":317},{"_40":305,"_31":306,"_29":307,"_132":282,"_38":39,"_37":308,"_134":24,"_35":309,"_13":244,"_32":204,"_33":310,"_23":24,"_137":-5,"_193":311,"_26":312},{"_40":297,"_31":298,"_29":299,"_132":282,"_38":39,"_37":300,"_134":24,"_35":301,"_13":60,"_32":204,"_33":302,"_23":24,"_137":-5,"_193":303,"_26":304},{"_40":289,"_31":290,"_29":291,"_132":282,"_38":39,"_37":292,"_134":56,"_35":293,"_13":60,"_32":204,"_33":294,"_23":24,"_137":-5,"_193":295,"_26":296},{"_40":279,"_31":280,"_29":281,"_132":282,"_38":39,"_37":283,"_134":24,"_35":284,"_13":244,"_32":204,"_33":285,"_23":24,"_137":-5,"_193":286,"_26":287},{"_40":272,"_31":273,"_29":274,"_132":151,"_38":39,"_37":152,"_134":24,"_35":275,"_13":60,"_32":20,"_33":276,"_23":24,"_137":-5,"_193":277,"_26":278},{"_40":264,"_31":265,"_29":266,"_132":151,"_38":39,"_37":267,"_134":24,"_35":268,"_13":60,"_32":204,"_33":269,"_23":24,"_137":-5,"_193":270,"_26":271},{"_40":256,"_31":257,"_29":258,"_132":151,"_38":39,"_37":259,"_134":56,"_35":260,"_13":60,"_32":20,"_33":261,"_23":24,"_137":-5,"_193":262,"_26":263},{"_40":142,"_31":143,"_29":144,"_132":-5,"_38":39,"_37":145,"_134":56,"_35":253,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_193":254,"_26":255},{"_40":249,"_31":224,"_29":218,"_132":144,"_38":39,"_37":244,"_134":56,"_35":250,"_13":60,"_32":147,"_33":-5,"_23":24,"_137":-5,"_193":251,"_26":252},{"_40":241,"_31":242,"_29":243,"_132":218,"_38":39,"_37":244,"_134":24,"_35":245,"_13":60,"_32":204,"_33":246,"_23":24,"_137":-5,"_193":247,"_26":248},{"_40":233,"_31":234,"_29":235,"_132":218,"_38":39,"_37":236,"_134":24,"_35":237,"_13":60,"_32":204,"_33":238,"_23":24,"_137":-5,"_193":239,"_26":240},{"_40":225,"_31":226,"_29":227,"_132":218,"_38":39,"_37":228,"_134":24,"_35":229,"_13":60,"_32":204,"_33":230,"_23":24,"_137":-5,"_193":231,"_26":232},{"_40":215,"_31":216,"_29":217,"_132":218,"_38":39,"_37":219,"_134":24,"_35":220,"_13":60,"_32":204,"_33":221,"_23":24,"_137":-5,"_193":222,"_26":223},{"_40":208,"_31":209,"_29":210,"_132":144,"_38":39,"_37":145,"_134":56,"_35":211,"_13":60,"_32":204,"_33":212,"_23":24,"_137":-5,"_193":213,"_26":214},{"_40":199,"_31":200,"_29":201,"_132":144,"_38":39,"_37":202,"_134":56,"_35":203,"_13":60,"_32":204,"_33":205,"_23":24,"_137":-5,"_193":206,"_26":207},{"_40":139,"_31":27,"_29":30,"_132":-5,"_38":39,"_37":14,"_134":56,"_35":196,"_13":60,"_32":20,"_33":34,"_23":24,"_137":-5,"_193":197,"_26":198},{"_40":129,"_31":130,"_29":131,"_132":-5,"_38":39,"_37":133,"_134":24,"_35":192,"_13":60,"_32":20,"_33":136,"_23":24,"_137":-5,"_193":194,"_26":195},["D",1751721114669],"children",[],[130],["D",1751721992922],[],[27],"335e544a-59a2-11f0-b958-f69ea79377d9","utils.ts","335e54f4-59a2-11f0-b958-f69ea79377d9",7,["D",1751721362981],"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}",[],[143,200],"a83b47f6-59a1-11f0-bf43-f69ea79377d9","types.ts","a83b48d2-59a1-11f0-bf43-f69ea79377d9",["D",1751721129544],"// 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}",[],[143,209],"1757a83c-59a2-11f0-952b-f69ea79377d9","transformations.ts","1757a904-59a2-11f0-952b-f69ea79377d9","10e2870c-b7b7-48c6-9e40-545c61d33aa9",6,["D",1751721315964],"// Transformation utilities for higher-dimensional geometry\n\nimport { Vector4D, Vector5D, Matrix4D, Matrix5D, TransformationState } from '../types.ts';\nimport { Geometry4D } from './geometry4d.ts';\nimport { Geometry5D } from './geometry5d.ts';\n\nexport class TransformationEngine {\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}",[],[143,224,216],"math","f8e4ba70-59a1-11f0-bc55-f69ea79377d9","projections.ts","f8e4bb2e-59a1-11f0-bc55-f69ea79377d9",5,["D",1751721264877],"// Projection algorithms for higher-dimensional geometry\n\nimport { Vector3D, Vector4D, Vector5D, ProjectionSettings } from '../types.ts';\n\nexport class ProjectionEngine {\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}",[],[143,224,226],"dbfdd892-59a1-11f0-a68e-f69ea79377d9","geometry5d.ts","dbfdd950-59a1-11f0-a68e-f69ea79377d9",4,["D",1751721216383],"// 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}",[],[143,224,234],"c358fc86-59a1-11f0-9b50-f69ea79377d9","geometry4d.ts","c358fd62-59a1-11f0-9b50-f69ea79377d9",3,["D",1751721175037],"// 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}",[],[143,224,242],"c3591a90-59a1-11f0-9b50-f69ea79377d9",["D",1751721175037],[184,185,186,187],[143,224],["D",1751721129544],[183,188,189],[143],"705cb242-59a2-11f0-b924-f69ea79377d9","style.css","705cb2ec-59a2-11f0-b924-f69ea79377d9",9,["D",1751721465312],"/* 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}",[],[150,257],"927610a8-59a2-11f0-b953-f69ea79377d9","index.tsx","9276117a-59a2-11f0-b953-f69ea79377d9",10,["D",1751721522518],"/** @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 { App } from './components/App.tsx';\n\n// Initialize the application\nasync function initializeApp() {\n try {\n // Hide loading screen and show app\n const loadingScreen = document.getElementById('loadingScreen');\n const appContainer = document.getElementById('appContainer');\n \n if (loadingScreen && appContainer) {\n loadingScreen.style.display = 'none';\n appContainer.style.display = 'block';\n }\n\n // Mount React app\n const container = document.getElementById('viewerContainer');\n if (container) {\n const root = createRoot(container);\n root.render();\n }\n\n // Initialize control panel event listeners\n initializeControls();\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 // Get all control elements\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 scaleValue = document.getElementById('scaleValue') as HTMLSpanElement;\n \n // Rotation sliders\n const rotationSliders = [\n 'rotationXY', 'rotationXZ', 'rotationXW', \n 'rotationYZ', 'rotationYW', 'rotationZW'\n ];\n \n const projectionDistance = document.getElementById('projectionDistance') as HTMLInputElement;\n const projectionDistanceValue = document.getElementById('projectionDistanceValue') as HTMLSpanElement;\n \n const cameraFOV = document.getElementById('cameraFOV') as HTMLInputElement;\n const cameraFOVValue = document.getElementById('cameraFOVValue') as HTMLSpanElement;\n \n const crossSectionEnabled = document.getElementById('crossSectionEnabled') as HTMLInputElement;\n const crossSectionPosition = document.getElementById('crossSectionPosition') as HTMLInputElement;\n const crossSectionPositionValue = document.getElementById('crossSectionPositionValue') as HTMLSpanElement;\n \n const autoRotateButton = document.getElementById('autoRotateButton') as HTMLButtonElement;\n \n // Rendering controls\n const showVertices = document.getElementById('showVertices') as HTMLInputElement;\n const showEdges = document.getElementById('showEdges') as HTMLInputElement;\n const showFaces = document.getElementById('showFaces') as HTMLInputElement;\n const wireframeMode = document.getElementById('wireframeMode') as HTMLInputElement;\n const opacity = document.getElementById('opacity') as HTMLInputElement;\n const opacityValue = document.getElementById('opacityValue') as HTMLSpanElement;\n\n // Dimension selection\n if (dimensionSelect) {\n dimensionSelect.addEventListener('change', (e) => {\n const dimension = parseInt((e.target as HTMLSelectElement).value);\n updateShapeButtons(dimension);\n dispatchAppEvent('dimensionChanged', { dimension });\n });\n }\n\n // Shape selection\n shapeButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const target = e.target as HTMLButtonElement;\n const shape = target.dataset.shape;\n \n // Update active state\n shapeButtons.forEach(b => b.classList.remove('active'));\n target.classList.add('active');\n \n // Update shape info\n updateShapeInfo(shape);\n \n dispatchAppEvent('shapeChanged', { shape });\n });\n });\n\n // Scale control\n if (scaleSlider && scaleValue) {\n scaleSlider.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n scaleValue.textContent = value.toFixed(1);\n dispatchAppEvent('scaleChanged', { scale: value });\n });\n }\n\n // Rotation controls\n rotationSliders.forEach(sliderId => {\n const slider = document.getElementById(sliderId) as HTMLInputElement;\n const valueSpan = document.getElementById(sliderId + 'Value') as HTMLSpanElement;\n \n if (slider && valueSpan) {\n slider.addEventListener('input', (e) => {\n const value = parseInt((e.target as HTMLInputElement).value);\n valueSpan.textContent = value + '°';\n \n const plane = sliderId.replace('rotation', '').toLowerCase();\n dispatchAppEvent('rotationChanged', { plane, angle: value * Math.PI / 180 });\n });\n }\n });\n\n // Projection distance\n if (projectionDistance && projectionDistanceValue) {\n projectionDistance.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n projectionDistanceValue.textContent = value.toFixed(1);\n dispatchAppEvent('projectionDistanceChanged', { distance: value });\n });\n }\n\n // Camera FOV\n if (cameraFOV && cameraFOVValue) {\n cameraFOV.addEventListener('input', (e) => {\n const value = parseInt((e.target as HTMLInputElement).value);\n cameraFOVValue.textContent = value + '°';\n dispatchAppEvent('cameraFOVChanged', { fov: value });\n });\n }\n\n // Cross section controls\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 dispatchAppEvent('crossSectionToggled', { enabled });\n });\n }\n\n if (crossSectionPosition && crossSectionPositionValue) {\n crossSectionPosition.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n crossSectionPositionValue.textContent = value.toFixed(1);\n dispatchAppEvent('crossSectionPositionChanged', { position: value });\n });\n }\n\n // Auto rotate button\n if (autoRotateButton) {\n let isAutoRotating = false;\n autoRotateButton.addEventListener('click', () => {\n isAutoRotating = !isAutoRotating;\n autoRotateButton.textContent = isAutoRotating ? '⏸️ Stop Rotation' : '🔄 Auto Rotate';\n autoRotateButton.classList.toggle('active', isAutoRotating);\n dispatchAppEvent('autoRotateToggled', { enabled: isAutoRotating });\n });\n }\n\n // Rendering controls\n const renderingControls = [\n { element: showVertices, event: 'showVerticesChanged' },\n { element: showEdges, event: 'showEdgesChanged' },\n { element: showFaces, event: 'showFacesChanged' },\n { element: wireframeMode, event: 'wireframeModeChanged' }\n ];\n\n renderingControls.forEach(({ element, event }) => {\n if (element) {\n element.addEventListener('change', (e) => {\n const checked = (e.target as HTMLInputElement).checked;\n dispatchAppEvent(event, { enabled: checked });\n });\n }\n });\n\n // Opacity control\n if (opacity && opacityValue) {\n opacity.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n opacityValue.textContent = value.toFixed(1);\n dispatchAppEvent('opacityChanged', { opacity: value });\n });\n }\n\n // Initialize performance monitoring\n initializePerformanceMonitoring();\n}\n\nfunction updateShapeButtons(dimension: number) {\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 = dimension === 4 ? shapes4D : shapes5D;\n \n shapeGrid.innerHTML = shapes.map(shape => \n ``\n ).join('');\n\n // Re-attach event listeners\n const newButtons = shapeGrid.querySelectorAll('.shape-button');\n newButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const target = e.target as HTMLButtonElement;\n const shape = target.dataset.shape;\n \n newButtons.forEach(b => b.classList.remove('active'));\n target.classList.add('active');\n \n updateShapeInfo(shape);\n dispatchAppEvent('shapeChanged', { shape });\n });\n });\n}\n\nfunction updateShapeInfo(shape: string | undefined) {\n const shapeInfo = document.getElementById('shapeInfo');\n if (!shapeInfo || !shape) return;\n\n const shapeData: { [key: string]: any } = {\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. Each vertex connects to 4 edges, and the shape can be visualized as two 3D cubes connected through the 4th dimension.'\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. It has 8 vertices arranged as the vertices of two tetrahedra in dual position.'\n },\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. It can be constructed by connecting corresponding vertices of two tesseracts.'\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, analogous to a tetrahedron in 3D.'\n }\n };\n\n const data = shapeData[shape];\n if (data) {\n let html = `${data.name}
`;\n html += `Vertices: ${data.vertices}
`;\n html += `Edges: ${data.edges}
`;\n html += `Faces: ${data.faces}
`;\n html += `Cells: ${data.cells}
`;\n if (data.hypercells) {\n html += `Hypercells: ${data.hypercells}
`;\n }\n html += `
${data.description}`;\n \n shapeInfo.innerHTML = html;\n }\n}\n\nfunction initializePerformanceMonitoring() {\n const fpsCounter = document.getElementById('fpsCounter');\n const vertexCount = document.getElementById('vertexCount');\n \n let frameCount = 0;\n let lastTime = performance.now();\n \n function updatePerformance() {\n frameCount++;\n const currentTime = performance.now();\n \n if (currentTime - lastTime >= 1000) {\n const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));\n if (fpsCounter) {\n fpsCounter.textContent = fps.toString();\n }\n \n frameCount = 0;\n lastTime = currentTime;\n }\n \n requestAnimationFrame(updatePerformance);\n }\n \n updatePerformance();\n \n // Listen for vertex count updates\n window.addEventListener('vertexCountUpdate', (e: any) => {\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 document.body.removeChild(errorDiv);\n }, 5000);\n}\n\n// Initialize when DOM is loaded\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n} else {\n initializeApp();\n}",[],[150,265],"5cd7ef20-59a2-11f0-acd0-f69ea79377d9","index.html","5cd7effc-59a2-11f0-acd0-f69ea79377d9",["D",1751721432562],"\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\n",[],[150,273],"92ad2452-59a3-11f0-879d-f69ea79377d9","GeometryViewer.tsx","de35a260-59a2-11f0-92ff-f69ea79377d9","b83b9ab1-c4c4-4d1e-9716-328a3363cc83",22,["D",1751721952377],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, 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 { 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\n // Initialize Three.js scene\n const initializeScene = useCallback(() => {\n if (!container) return;\n\n // Scene\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n sceneRef.current = scene;\n\n // Camera\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 // Renderer\n const renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: 'high-performance'\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n rendererRef.current = renderer;\n\n // Add renderer to container\n container.appendChild(renderer.domElement);\n\n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404040, 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,\n appState.lighting.directional.direction.y,\n appState.lighting.directional.direction.z\n );\n directionalLight.castShadow = true;\n directionalLight.shadow.mapSize.width = 2048;\n directionalLight.shadow.mapSize.height = 2048;\n scene.add(directionalLight);\n\n const pointLight = new THREE.PointLight(0x00d4ff, appState.lighting.point.intensity);\n pointLight.position.set(\n appState.lighting.point.position.x,\n appState.lighting.point.position.y,\n appState.lighting.point.position.z\n );\n scene.add(pointLight);\n\n // Geometry group\n const geometryGroup = new THREE.Group();\n scene.add(geometryGroup);\n geometryGroupRef.current = geometryGroup;\n\n // Mouse controls (simplified orbit controls)\n let isMouseDown = false;\n let mouseX = 0;\n let mouseY = 0;\n let cameraRotationX = 0;\n let cameraRotationY = 0;\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\n const deltaX = event.clientX - mouseX;\n const deltaY = event.clientY - mouseY;\n\n cameraRotationY += deltaX * 0.01;\n cameraRotationX += deltaY * 0.01;\n\n // Clamp vertical rotation\n cameraRotationX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, cameraRotationX));\n\n // Update camera position\n const radius = 5;\n camera.position.x = radius * Math.cos(cameraRotationX) * Math.sin(cameraRotationY);\n camera.position.y = radius * Math.sin(cameraRotationX);\n camera.position.z = radius * Math.cos(cameraRotationX) * Math.cos(cameraRotationY);\n camera.lookAt(0, 0, 0);\n\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 camera.position.multiplyScalar(scale);\n camera.position.clampLength(2, 20);\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 controlsRef.current = {\n handleMouseDown,\n handleMouseMove,\n handleMouseUp,\n handleWheel\n };\n\n // Handle resize\n const handleResize = () => {\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 };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n if (renderer.domElement.parentNode) {\n renderer.domElement.parentNode.removeChild(renderer.domElement);\n }\n renderer.dispose();\n };\n }, [container, appState.camera, appState.lighting]);\n\n // Update geometry based on app state\n const updateGeometry = useCallback(() => {\n if (!geometryGroupRef.current) return;\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 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 try {\n // Generate shape based on current settings\n let shape4D, shape5D;\n let projectedVertices: Vector3D[] = [];\n\n if (appState.dimension === 4) {\n // Generate 4D shape\n switch (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, appState.transformations)\n );\n\n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective4DTo3D(vertex, appState.projection)\n );\n\n // Update vertex count\n window.dispatchEvent(new CustomEvent('vertexCountUpdate', {\n detail: { count: shape4D.vertices.length }\n }));\n\n // Pass shape data to parent for cross-section analysis\n if (onShapeGenerated) {\n onShapeGenerated(shape4D);\n }\n\n // Create 3D visualization\n createVisualization(projectedVertices, shape4D.edges, shape4D.faces);\n\n } else if (appState.dimension === 5) {\n // Generate 5D shape\n switch (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 transformations (simplified for 5D)\n const transformedVertices = shape5D.vertices.map(vertex => {\n // Apply basic scaling and translation\n return {\n x: vertex.x * appState.transformations.scale,\n y: vertex.y * appState.transformations.scale,\n z: vertex.z * appState.transformations.scale,\n w: vertex.w * appState.transformations.scale,\n v: vertex.v * appState.transformations.scale\n };\n });\n\n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective5DTo3D(vertex, appState.projection)\n );\n\n // Update vertex count\n window.dispatchEvent(new CustomEvent('vertexCountUpdate', {\n detail: { count: shape5D.vertices.length }\n }));\n\n // Create 3D visualization\n createVisualization(projectedVertices, shape5D.edges, shape5D.faces);\n }\n\n // Handle cross-sections\n if (appState.crossSection.enabled && shape4D) {\n const crossSectionPoints = Geometry4D.calculateCrossSection(\n shape4D,\n appState.crossSection.position\n );\n \n if (crossSectionPoints.length > 0) {\n createCrossSectionVisualization(crossSectionPoints);\n }\n }\n\n } catch (error) {\n console.error('Error updating geometry:', error);\n }\n }, [appState]);\n\n // Create 3D visualization from projected vertices\n const createVisualization = useCallback((\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 vertices\n if (appState.rendering.showVertices) {\n const vertexGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const vertexMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: 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 group.add(vertexMesh);\n });\n }\n\n // Create edges\n if (appState.rendering.showEdges) {\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions: 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 });\n\n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({\n color: appState.rendering.edgeColor,\n transparent: true,\n opacity: appState.rendering.opacity\n });\n\n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n group.add(edgeLines);\n }\n\n // Create faces\n if (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: number[] = [];\n const faceIndices: number[] = [];\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 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.setIndex(faceIndices);\n faceGeometry.computeVertexNormals();\n\n const faceMaterial = new THREE.MeshLambertMaterial({\n color: appState.rendering.color,\n transparent: true,\n opacity: appState.rendering.opacity * 0.5,\n side: THREE.DoubleSide,\n wireframe: appState.rendering.wireframe\n });\n\n const faceMesh = new THREE.Mesh(faceGeometry, faceMaterial);\n group.add(faceMesh);\n }\n });\n }\n }, [appState.rendering]);\n\n // Create cross-section visualization\n const createCrossSectionVisualization = useCallback((points: Vector3D[]) => {\n if (!geometryGroupRef.current || points.length === 0) return;\n\n const group = geometryGroupRef.current;\n\n // Create cross-section points\n const crossSectionGeometry = new THREE.SphereGeometry(0.03, 6, 4);\n const crossSectionMaterial = new THREE.MeshBasicMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.8\n });\n\n points.forEach(point => {\n const pointMesh = new THREE.Mesh(crossSectionGeometry, crossSectionMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n group.add(pointMesh);\n });\n\n // Connect cross-section points with lines\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({\n color: '#ff4444',\n transparent: true,\n opacity: 0.8\n });\n\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n group.add(lines);\n }\n }, []);\n\n // Animation loop\n const animate = useCallback(() => {\n if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;\n\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n animationFrameRef.current = requestAnimationFrame(animate);\n }, []);\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\n useEffect(() => {\n updateGeometry();\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 return null; // This component renders directly to the DOM via Three.js\n}",[],[150,288,280],"components","5a705c80-59a3-11f0-be3f-f69ea79377d9","CrossSection.tsx","5a705d48-59a3-11f0-be3f-f69ea79377d9",16,["D",1751721858026],"/** @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}",[],[150,288,290],"348425d8-59a3-11f0-9c69-f69ea79377d9","ControlPanel.tsx","348426aa-59a3-11f0-9c69-f69ea79377d9",15,["D",1751721794404],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } 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\n const handleDimensionChange = (dimension: 4 | 5) => {\n const defaultShape = dimension === 4 ? 'tesseract' : 'penteract';\n onStateChange({\n dimension,\n currentShape: defaultShape\n });\n };\n\n const handleShapeChange = (shape: ShapeType) => {\n onStateChange({ currentShape: shape });\n };\n\n const handleTransformationChange = (type: string, value: number) => {\n const newTransformations = { ...appState.transformations };\n \n if (type === 'scale') {\n newTransformations.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 }\n \n onStateChange({ transformations: newTransformations });\n };\n\n const handleRenderingChange = (property: string, value: any) => {\n onStateChange({\n rendering: {\n ...appState.rendering,\n [property]: value\n }\n });\n };\n\n const resetTransformations = () => {\n onStateChange({\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\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 {!isCollapsed && (\n <>\n

\n \n \n \n

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

\n Dimension\n

\n handleDimensionChange(4)}\n >\n 4D\n \n handleDimensionChange(5)}\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 ))}\n

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

\n Scale\n

\n handleTransformationChange('scale', parseFloat(e.target.value))}\n />\n {appState.transformations.scale.toFixed(1)}\n

\n\n

\n 4D Rotations\n

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

\n {plane.toUpperCase()}\n

\n handleTransformationChange(`rotation${plane}`, parseInt(e.target.value))}\n />\n {Math.round(angle * 180 / Math.PI)}°\n

\n ))}\n

\n\n

\n \n

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

\n Display Options\n

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

\n\n

\n Opacity\n

\n handleRenderingChange('opacity', parseFloat(e.target.value))}\n />\n {appState.rendering.opacity.toFixed(1)}\n

\n\n

\n Colors\n

\n Shape Color\n handleRenderingChange('color', e.target.value)}\n />\n

\n Edge Color\n handleRenderingChange('edgeColor', e.target.value)}\n />\n

\n Vertex Color\n handleRenderingChange('vertexColor', e.target.value)}\n />\n

\n )}\n \n )}\n\n \n

\n );\n}",[],[150,288,298],"814703a4-59a3-11f0-bf51-f69ea79377d9","App.tsx","b3d3a260-59a2-11f0-b3dd-f69ea79377d9",19,["D",1751721923172],"/** @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 setAppState(prev => ({ ...prev, ...newState }))}\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}",[],[150,288,306],"b3d3bf3e-59a2-11f0-b3dd-f69ea79377d9",11,["D",1751721578497],[175,176,177,178],[150,288],["D",1751721432562],[174,179,180,181],[150],"fffc566e-59a2-11f0-b3e1-f69ea79377d9","index.ts",14,["D",1751721706266],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main application route\napp.get(\"/\", async c => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data and configuration\n const initialData = {\n version: \"1.0.0\",\n features: {\n dimensions: [4, 5],\n shapes: {\n \"4d\": [\"tesseract\", \"16-cell\", \"600-cell\", \"120-cell\"],\n \"5d\": [\"penteract\", \"5-simplex\", \"5-orthoplex\", \"custom\"]\n },\n projections: [\"perspective\", \"orthogonal\", \"stereographic\", \"schlegel\"],\n maxVertices: 10000,\n maxFPS: 60\n },\n performance: {\n enableOptimizations: true,\n useWebGL2: true,\n enableShadows: true\n }\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n \n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.html(`\n \n Error\n \n

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// API endpoint for mathematical calculations\napp.post(\"/api/calculate\", async c => {\n try {\n const body = await c.req.json();\n const { operation, data } = body;\n\n switch (operation) {\n case \"project4dto3d\":\n // Handle 4D to 3D projection calculations\n return c.json({\n success: true,\n result: \"Projection calculation would be performed here\",\n data: data\n });\n \n case \"project5dto3d\":\n // Handle 5D to 3D projection calculations\n return c.json({\n success: true,\n result: \"5D projection calculation would be performed here\",\n data: data\n });\n \n case \"crosssection\":\n // Handle cross-section calculations\n return c.json({\n success: true,\n result: \"Cross-section calculation would be performed here\",\n data: data\n });\n \n default:\n return c.json({\n success: false,\n error: \"Unknown operation\"\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;",[],[156,322],["D",1751721700504],[172],[156],["D",1751721027052],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"ctx",{"_76":-5,"_121":369,"_370":371,"_372":373,"_374":24,"_375":24,"_376":24,"_377":56,"_378":-5,"_379":-7,"_380":-7,"_381":60,"_382":24,"_383":24,"_384":-5,"_385":24,"_386":24,"_387":24,"_388":-5},"ENV",{"_340":341,"_342":343,"_344":84,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"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"]

Diff · v23