Loading Higher Dimensional Geometry Visualizer

\n Initializing mathematical libraries...\n

\n\n

\n \n

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

\n \n

\n 🔮 Shape Selection\n

\n Dimension\n \n

\n Shape Type\n

\n \n \n \n \n

\n\n

\n 🔄 Transformations\n

\n Scale\n

\n \n 1.0\n

\n 4D Rotations\n

\n XY Plane\n

\n \n 0°\n

\n XZ Plane\n

\n \n 0°\n

\n XW Plane\n

\n \n 0°\n

\n YZ Plane\n

\n \n 0°\n

\n YW Plane\n

\n \n 0°\n

\n ZW Plane\n

\n \n 0°\n

\n \n

\n\n

\n 📐 Projection & View\n

\n Projection Distance\n

\n \n 2.0\n

\n Camera FOV\n

\n \n 75°\n

\n\n

\n ✂️ Cross Section\n

\n \n Enable Cross Section\n

\n Section Position\n

\n \n 0.0\n

\n\n

\n 🎨 Rendering\n

\n \n Show Vertices\n

\n \n Show Edges\n

\n \n Show Faces\n

\n \n Wireframe Mode\n

\n Opacity\n

\n \n 0.8\n

\n\n

Shape Information

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

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

\n\n \n

Welcome to Higher Dimensional Geometry!

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

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

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

\n \n

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

Error Loading Geometry

${error.message}

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

\n \n {isLoading && (\n

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

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

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

\n\n \n

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

Geometry Generation Error

${error.message}

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

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

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

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

Performance Stats:

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

Vertices: {renderStats.vertices}

Faces: {renderStats.faces}

Draw Calls: {renderStats.drawCalls}

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

Cross Section Analysis

\n \n

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

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

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

\n\n

\n Hyperplane Normal Vector\n

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

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

\n ))}\n

\n\n

\n Cross-Section Visualization\n

\n\n

\n Analysis Tools\n

\n \n \n \n

\n\n

Understanding Cross-Sections

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

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

\n )}\n\n \n

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

Controls

\n \n \n

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

Presets

\n \n

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

No presets saved

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

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

\n \n \n

\n ))\n )}\n

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

\n \n \n \n \n

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

\n Dimension\n

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

\n\n

\n Shape Type\n

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

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

\n \n ))}\n

\n\n

\n Quick Actions\n

\n \n \n

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

\n Scale\n

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

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

\n\n

\n 4D Rotations\n

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

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

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

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

\n ))}\n

\n\n

\n Animation Speed\n

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

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

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

\n Display Options\n

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

\n\n

\n Opacity\n

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

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

\n\n

\n Colors\n

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

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

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

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

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

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

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

\n Projection Distance\n

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

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

\n\n

\n Field of View\n

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

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

\n\n

\n Projection Type\n

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

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

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

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

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

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

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

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

Welcome to Higher Dimensional Geometry!

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

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

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

\n \n

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

FPS: 60

Vertices: 0

Shape: {appState.currentShape}

Dimension: {appState.dimension}D

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

404 - Page Not Found

The requested resource could not be found.

\n Return to Geometry Visualizer\n

\n \n \n `, 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[382,374],"backend","c1f12c66-5d5b-11f0-b796-0224a6c84d84","calculations.ts","2a03ebf5-3d3c-4f87-bfe9-4b3fc022872f","9a67a473-6754-4e7b-ac50-867196cb6a6c",["D",1752130912555],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { Geometry4D } from \"../../shared/math/geometry4d.ts\";\nimport { Geometry5D } from \"../../shared/math/geometry5d.ts\";\nimport { ProjectionEngine } from \"../../shared/math/projections.ts\";\nimport { TransformationEngine } from \"../../shared/math/transformations.ts\";\nimport { Vector4D, Vector5D, Shape4D, Shape5D, TransformationState } from \"../../shared/types.ts\";\n\nconst calculations = new Hono();\n\n// Cache for expensive calculations\nconst calculationCache = new Map();\nconst CACHE_TTL = 5 * 60 * 1000; // 5 minutes\n\ninterface CacheEntry {\n data: any;\n timestamp: number;\n}\n\nfunction getCacheKey(operation: string, params: any): string {\n return `${operation}:${JSON.stringify(params)}`;\n}\n\nfunction getFromCache(key: string): any | null {\n const entry = calculationCache.get(key) as CacheEntry;\n if (!entry) return null;\n \n if (Date.now() - entry.timestamp > CACHE_TTL) {\n calculationCache.delete(key);\n return null;\n }\n \n return entry.data;\n}\n\nfunction setCache(key: string, data: any): void {\n calculationCache.set(key, {\n data,\n timestamp: Date.now()\n });\n}\n\n// Generate 4D shape with transformations\ncalculations.post(\"/shape4d\", async (c) => {\n try {\n const { shapeType, transformations } = await c.req.json();\n \n if (!shapeType || !['tesseract', '16-cell', '600-cell', '120-cell'].includes(shapeType)) {\n return c.json({ success: false, error: \"Invalid 4D shape type\" }, 400);\n }\n\n const cacheKey = getCacheKey('shape4d', { shapeType, transformations });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let shape: Shape4D;\n \n switch (shapeType) {\n case 'tesseract':\n shape = Geometry4D.createTesseract();\n break;\n case '16-cell':\n shape = Geometry4D.create16Cell();\n break;\n case '600-cell':\n shape = Geometry4D.create600Cell();\n break;\n case '120-cell':\n shape = Geometry4D.create120Cell();\n break;\n default:\n throw new Error(\"Unsupported shape type\");\n }\n\n // Apply transformations if provided\n if (transformations) {\n shape = TransformationEngine.applyTransformations4D(shape, transformations);\n }\n\n // Project to 3D for rendering\n const projected3D = ProjectionEngine.project4Dto3D(shape, {\n distance: 2,\n perspective: true,\n viewAngle: 0\n });\n\n const result = {\n shape4D: shape,\n projected3D,\n metadata: {\n vertices: shape.vertices.length,\n edges: shape.edges.length,\n faces: shape.faces.length,\n cells: shape.cells.length,\n complexity: getComplexityRating(shape.vertices.length)\n }\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"4D shape generation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to generate 4D shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Generate 5D shape with transformations\ncalculations.post(\"/shape5d\", async (c) => {\n try {\n const { shapeType, transformations } = await c.req.json();\n \n if (!shapeType || !['penteract', '5-simplex', '5-orthoplex'].includes(shapeType)) {\n return c.json({ success: false, error: \"Invalid 5D shape type\" }, 400);\n }\n\n const cacheKey = getCacheKey('shape5d', { shapeType, transformations });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let shape: Shape5D;\n \n switch (shapeType) {\n case 'penteract':\n shape = Geometry5D.createPenteract();\n break;\n case '5-simplex':\n shape = Geometry5D.create5Simplex();\n break;\n case '5-orthoplex':\n shape = Geometry5D.create5Orthoplex();\n break;\n default:\n throw new Error(\"Unsupported shape type\");\n }\n\n // Apply transformations if provided\n if (transformations) {\n shape = TransformationEngine.applyTransformations5D(shape, transformations);\n }\n\n // Project to 3D for rendering\n const projected3D = ProjectionEngine.project5Dto3D(shape, {\n distance: 2,\n perspective: true,\n viewAngle: 0\n });\n\n const result = {\n shape5D: shape,\n projected3D,\n metadata: {\n vertices: shape.vertices.length,\n edges: shape.edges.length,\n faces: shape.faces.length,\n cells: shape.cells.length,\n hypercells: shape.hypercells.length,\n complexity: getComplexityRating(shape.vertices.length)\n }\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"5D shape generation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to generate 5D shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Cross-section calculation\ncalculations.post(\"/cross-section\", async (c) => {\n try {\n const { shape, hyperplane, dimension } = await c.req.json();\n \n if (!shape || !hyperplane || ![4, 5].includes(dimension)) {\n return c.json({ \n success: false, \n error: \"Invalid cross-section parameters\" \n }, 400);\n }\n\n const cacheKey = getCacheKey('cross-section', { shape, hyperplane, dimension });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let crossSection;\n \n if (dimension === 4) {\n crossSection = Geometry4D.calculateCrossSection(shape, hyperplane);\n } else {\n crossSection = Geometry5D.calculateCrossSection(shape, hyperplane);\n }\n\n const result = {\n crossSection,\n intersectionPoints: crossSection.vertices.length,\n area: calculateCrossSectionArea(crossSection)\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"Cross-section calculation error:\", error);\n return c.json({\n success: false,\n error: \"Failed to calculate cross-section\",\n details: error.message\n }, 500);\n }\n});\n\n// Batch projection calculations\ncalculations.post(\"/project-batch\", async (c) => {\n try {\n const { vertices, projectionType, settings } = await c.req.json();\n \n if (!vertices || !Array.isArray(vertices)) {\n return c.json({ \n success: false, \n error: \"Invalid vertices data\" \n }, 400);\n }\n\n const cacheKey = getCacheKey('project-batch', { vertices, projectionType, settings });\n const cached = getFromCache(cacheKey);\n if (cached) {\n return c.json({ success: true, ...cached, cached: true });\n }\n\n let projectedVertices;\n \n switch (projectionType) {\n case 'perspective':\n projectedVertices = vertices.map(v => \n ProjectionEngine.perspectiveProjection(v, settings.distance)\n );\n break;\n case 'orthogonal':\n projectedVertices = vertices.map(v => \n ProjectionEngine.orthogonalProjection(v)\n );\n break;\n case 'stereographic':\n projectedVertices = vertices.map(v => \n ProjectionEngine.stereographicProjection(v)\n );\n break;\n default:\n throw new Error(\"Unsupported projection type\");\n }\n\n const result = {\n projectedVertices,\n projectionType,\n vertexCount: projectedVertices.length\n };\n\n setCache(cacheKey, result);\n \n return c.json({\n success: true,\n ...result,\n cached: false\n });\n\n } catch (error) {\n console.error(\"Batch projection error:\", error);\n return c.json({\n success: false,\n error: \"Failed to project vertices\",\n details: error.message\n }, 500);\n }\n});\n\n// Performance optimization endpoint\ncalculations.post(\"/optimize\", async (c) => {\n try {\n const { shape, targetFPS, maxVertices } = await c.req.json();\n \n const optimizedShape = optimizeShapeForPerformance(shape, {\n targetFPS: targetFPS || 60,\n maxVertices: maxVertices || 10000\n });\n\n return c.json({\n success: true,\n originalVertices: shape.vertices?.length || 0,\n optimizedVertices: optimizedShape.vertices.length,\n reductionRatio: shape.vertices ? \n (shape.vertices.length - optimizedShape.vertices.length) / shape.vertices.length : 0,\n optimizedShape\n });\n\n } catch (error) {\n console.error(\"Shape optimization error:\", error);\n return c.json({\n success: false,\n error: \"Failed to optimize shape\",\n details: error.message\n }, 500);\n }\n});\n\n// Cache management\ncalculations.get(\"/cache/stats\", (c) => {\n return c.json({\n success: true,\n cacheSize: calculationCache.size,\n entries: Array.from(calculationCache.keys()),\n memoryUsage: \"Not available in this environment\"\n });\n});\n\ncalculations.delete(\"/cache\", (c) => {\n calculationCache.clear();\n return c.json({\n success: true,\n message: \"Cache cleared successfully\"\n });\n});\n\n// Helper functions\nfunction getComplexityRating(vertexCount: number): string {\n if (vertexCount <= 16) return 'low';\n if (vertexCount <= 100) return 'medium';\n if (vertexCount <= 1000) return 'high';\n return 'very high';\n}\n\nfunction calculateCrossSectionArea(crossSection: any): number {\n // Simplified area calculation - would need proper implementation\n // based on the specific cross-section geometry\n return crossSection.vertices?.length * 0.1 || 0;\n}\n\nfunction optimizeShapeForPerformance(shape: any, options: any): any {\n // Level of Detail (LOD) implementation\n if (!shape.vertices || shape.vertices.length <= options.maxVertices) {\n return shape;\n }\n\n // Simple vertex reduction - in practice, would use more sophisticated algorithms\n const reductionFactor = options.maxVertices / shape.vertices.length;\n const step = Math.ceil(1 / reductionFactor);\n \n const optimizedVertices = shape.vertices.filter((_: any, index: number) => \n index % step === 0\n );\n\n // Rebuild edges and faces based on remaining vertices\n const vertexMap = new Map();\n optimizedVertices.forEach((vertex: any, index: number) => {\n vertexMap.set(shape.vertices.indexOf(vertex), index);\n });\n\n const optimizedEdges = shape.edges?.filter((edge: any) => \n vertexMap.has(edge.start) && vertexMap.has(edge.end)\n ).map((edge: any) => ({\n start: vertexMap.get(edge.start),\n end: vertexMap.get(edge.end)\n })) || [];\n\n return {\n ...shape,\n vertices: optimizedVertices,\n edges: optimizedEdges,\n // Faces and cells would need similar optimization\n faces: shape.faces?.slice(0, Math.floor(shape.faces.length * reductionFactor)) || [],\n cells: shape.cells?.slice(0, Math.floor(shape.cells.length * reductionFactor)) || []\n };\n}\n\nexport { calculations };",[],[382,391,384],"routes","c1f14f8e-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[204],[382,391],"c1f15c22-5d5b-11f0-b796-0224a6c84d84",["D",1752130912555],[203,205],[382],["D",1751721027052],{"_11":12,"_143":82},{"_11":12,"_139":-5,"_81":82,"_31":80,"_140":141,"_142":30},{"_39":40,"_13":16,"_33":36,"_131":97,"_132":70,"_133":72,"_134":101,"_135":97,"_136":42,"_137":14,"_138":12},"ctx",{"_52":-5,"_163":437,"_438":439,"_440":441,"_442":30,"_443":30,"_444":30,"_445":24,"_446":-5,"_447":-7,"_448":-7,"_449":26,"_450":30,"_451":30,"_452":-5,"_453":30,"_454":30,"_455":30,"_456":-5},"ENV",{"_408":409,"_410":411,"_412":71,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","81405aa0531e90dfbb71a5bf473aaa0cf4c8702f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared