Spaces:

evann0809jeux
/

hey

Running

App Files Files Community

evann0809jeux commited on Mar 29, 2025

Commit

fd5a6a2

verified ·

1 Parent(s): d21441a

Add 1 files

Browse files

Files changed (1) hide show

index.html +366 -70

index.html CHANGED Viewed

@@ -3,9 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Equation Solver with Parameter Visualization</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mathjs@9.5.1/lib/browser/math.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
         :root {
@@ -15,6 +16,9 @@
             --light-color: #ecf0f1;
             --success-color: #2ecc71;
             --warning-color: #f39c12;
         }
         * {
@@ -82,6 +86,11 @@
         #graph3d {
             width: 100%;
             height: 100%;
         }
         .form-group {
@@ -276,6 +285,61 @@
             font-size: 14px;
         }
         @media (max-width: 768px) {
             .calculator {
                 grid-template-columns: 1fr;
@@ -284,14 +348,20 @@
             .range-group {
                 grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1><i class="fas fa-calculator"></i> 3D Equation Solver</h1>
-            <p class="subtitle">Visualize solutions for equations with parameter 'a'</p>
         </header>
         <div class="calculator">
@@ -322,7 +392,7 @@
                 </div>
                 <div class="form-group">
-                    <label for="x-range">x-axis range:</label>
                     <div class="range-group">
                         <div>
                             <label for="x-min">Min</label>
@@ -335,17 +405,38 @@
                     </div>
                 </div>
                 <button id="calculate-btn" class="btn btn-block">
                     <i class="fas fa-chart-line"></i> Calculate & Visualize
                 </button>
                 <div class="examples">
                     <h3>Example equations:</h3>
                     <div class="example-item" onclick="setExample('x^2 + a*x - 5 = 0')">x² + a·x - 5 = 0 (Quadratic)</div>
-                    <div class="example-item" onclick="setExample('sin(x) + a = 0')">sin(x) + a = 0 (Trigonometric)</div>
-                    <div class="example-item" onclick="setExample('a*x^3 - x^2 + 2*a = 0')">a·x³ - x² + 2a = 0 (Cubic)</div>
-                    <div class="example-item" onclick="setExample('exp(x) - a*x = 0')">eˣ - a·x = 0 (Exponential)</div>
-                    <div class="example-item" onclick="setExample('log(x + 1) - a = 0')">ln(x + 1) - a = 0 (Logarithmic)</div>
                 </div>
             </div>
@@ -363,6 +454,24 @@
                     <button class="graph-btn" id="toggle-rotation" title="Toggle rotation">
                         <i class="fas fa-sync-alt"></i>
                     </button>
                 </div>
             </div>
         </div>
@@ -378,10 +487,12 @@
     <script>
         // Global variables
-        let scene, camera, renderer, graphMesh;
         let rotationEnabled = false;
         let animationId = null;
         let solutionsData = [];
         // Initialize Three.js scene
         function initScene() {
@@ -401,13 +512,16 @@
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
-            // Add axes helper
-            const axesHelper = new THREE.AxesHelper(5);
-            scene.add(axesHelper);
-            // Add grid helper
-            const gridHelper = new THREE.GridHelper(10, 10);
-            scene.add(gridHelper);
             // Add lights
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
@@ -429,16 +543,118 @@
                 animationId = requestAnimationFrame(animate);
                 if (rotationEnabled) {
-                    scene.rotation.y += 0.005;
                 }
                 renderer.render(scene, camera);
             }
             animate();
         }
-        // Parse equation and solve for x
         function solveEquation(equationStr, aValue) {
             try {
                 // Parse the equation (remove spaces and split on '=')
@@ -465,60 +681,74 @@
                         return solutions.map(sol => {
                             // Handle complex numbers
                             if (typeof sol === 'object' && sol.re !== undefined && sol.im !== undefined) {
-                                if (math.abs(sol.im) < 1e-10) {
-                                    return sol.re;
-                                } else {
-                                    return null; // Filter out complex solutions
-                                }
                             }
-                            return math.evaluate(sol.toString(), scope);
-                        }).filter(val => val !== null);
                     }
                 } catch (e) {
                     // If symbolic solving fails, try numerical methods
                 }
-                // Numerical solving using Newton's method
                 const f = (x) => {
                     const scope = { a: aValue, x: x };
                     return math.evaluate(exprToSolve, scope);
                 };
-                const df = (x) => {
-                    const h = 0.0001;
-                    return (f(x + h) - f(x - h)) / (2 * h);
-                };
                 const solutions = [];
                 const xMin = parseFloat(document.getElementById('x-min').value);
                 const xMax = parseFloat(document.getElementById('x-max').value);
-                const steps = 100;
-                const stepSize = (xMax - xMin) / steps;
-                // Find potential roots by checking sign changes
-                for (let i = 0; i < steps; i++) {
-                    const x1 = xMin + i * stepSize;
-                    const x2 = x1 + stepSize;
-                    const y1 = f(x1);
-                    const y2 = f(x2);
-                    if (y1 * y2 < 0) {
-                        // Sign change detected, apply Newton's method
-                        let x = (x1 + x2) / 2;
-                        let prevX = x + 1;
                         let iterations = 0;
-                        while (Math.abs(x - prevX) > 1e-10 && iterations < 100) {
-                            prevX = x;
-                            x = x - f(x) / df(x);
                             iterations++;
                         }
-                        if (iterations < 100) {
-                            // Check if this solution is already found (to avoid duplicates)
-                            const isDuplicate = solutions.some(sol => Math.abs(sol - x) < 1e-5);
-                            if (!isDuplicate) {
-                                solutions.push(x);
                             }
                         }
                     }
@@ -548,7 +778,8 @@
             const aStep = (aMax - aMin) / steps;
             // Prepare data for graph
-            const points = [];
             solutionsData = [];
             // Calculate solutions for each a value
@@ -563,23 +794,58 @@
                 });
                 // Add points to graph
-                solutions.forEach(x => {
-                    points.push(new THREE.Vector3(x, a, 0));
                 });
             }
-            // Create geometry from points
-            const geometry = new THREE.BufferGeometry().setFromPoints(points);
-            // Create material
-            const material = new THREE.PointsMaterial({
-                color: 0xff6b6b,
-                size: 0.1,
-                sizeAttenuation: true
-            });
-            // Create mesh and add to scene
-            graphMesh = new THREE.Points(geometry, material);
             scene.add(graphMesh);
             // Update camera to fit the graph
@@ -613,6 +879,8 @@
             camera.position.set(center.x, center.y, cameraZ);
             camera.lookAt(center);
         }
         // Show solutions panel with calculated data
@@ -650,10 +918,19 @@
                     valuesContainer.className = 'solution-values';
                     item.solutions.forEach((sol, idx) => {
-                        const value = document.createElement('div');
-                        value.className = 'solution-value';
-                        value.textContent = `x${idx + 1} = ${sol.toFixed(4)}`;
-                        valuesContainer.appendChild(value);
                     });
                     solutionItem.appendChild(equation);
@@ -701,7 +978,7 @@
                 const exprToSolve = `(${leftExpr}) - (${rightExpr})`;
                 // Test evaluation
-                math.evaluate(exprToSolve, { a: 1, x: 1 });
                 errorElement.style.display = 'none';
                 return true;
@@ -732,6 +1009,8 @@
                 } else {
                     camera.position.set(5, 5, 5);
                     camera.lookAt(0, 0, 0);
                 }
             });
@@ -746,6 +1025,23 @@
                 }
             });
             // Handle Enter key in equation input
             document.getElementById('equation').addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
@@ -754,5 +1050,5 @@
             });
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive 3D Complex Equation Solver</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mathjs@9.5.1/lib/browser/math.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
         :root {
             --light-color: #ecf0f1;
             --success-color: #2ecc71;
             --warning-color: #f39c12;
+            --real-color: #4a6bff;     /* Blue for real axis */
+            --imaginary-color: #ff6b6b; /* Red for imaginary axis */
+            --parameter-color: #2ecc71; /* Green for parameter axis */
         }
         * {
         #graph3d {
             width: 100%;
             height: 100%;
+            cursor: grab;
+        }
+        #graph3d:active {
+            cursor: grabbing;
         }
         .form-group {
             font-size: 14px;
         }
+        .solution-value.real {
+            background-color: #e8f4ff;
+            border-left: 3px solid var(--real-color);
+        }
+        .solution-value.imaginary {
+            background-color: #ffebee;
+            border-left: 3px solid var(--imaginary-color);
+        }
+        .controls-info {
+            margin-top: 15px;
+            font-size: 13px;
+            color: #7f8c8d;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+        }
+        .controls-info i {
+            margin-right: 5px;
+            color: var(--primary-color);
+        }
+        .axis-label {
+            position: absolute;
+            font-size: 14px;
+            font-weight: bold;
+            pointer-events: none;
+        }
+        .legend {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background-color: rgba(255, 255, 255, 0.8);
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            z-index: 10;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+        .legend-color {
+            width: 15px;
+            height: 15px;
+            margin-right: 8px;
+            border-radius: 3px;
+        }
         @media (max-width: 768px) {
             .calculator {
                 grid-template-columns: 1fr;
             .range-group {
                 grid-template-columns: 1fr;
             }
+            .legend {
+                bottom: 10px;
+                left: 10px;
+                font-size: 10px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <h1><i class="fas fa-calculator"></i> Complex 3D Equation Solver</h1>
+            <p class="subtitle">Visualize real and imaginary solutions with parameter 'a'</p>
         </header>
         <div class="calculator">
                 </div>
                 <div class="form-group">
+                    <label for="x-range">x-axis range (real part):</label>
                     <div class="range-group">
                         <div>
                             <label for="x-min">Min</label>
                     </div>
                 </div>
+                <div class="form-group">
+                    <label for="y-range">y-axis range (imaginary part):</label>
+                    <div class="range-group">
+                        <div>
+                            <label for="y-min">Min</label>
+                            <input type="number" id="y-min" value="-5" step="0.1">
+                        </div>
+                        <div>
+                            <label for="y-max">Max</label>
+                            <input type="number" id="y-max" value="5" step="0.1">
+                        </div>
+                    </div>
+                </div>
                 <button id="calculate-btn" class="btn btn-block">
                     <i class="fas fa-chart-line"></i> Calculate & Visualize
                 </button>
+                <div class="controls-info">
+                    <p><i class="fas fa-mouse-pointer"></i> <strong>3D Controls:</strong></p>
+                    <p><i class="fas fa-arrows-alt"></i> Left-click + drag to rotate</p>
+                    <p><i class="fas fa-hand-paper"></i> Right-click + drag to pan</p>
+                    <p><i class="fas fa-mouse"></i> Scroll to zoom</p>
+                </div>
                 <div class="examples">
                     <h3>Example equations:</h3>
                     <div class="example-item" onclick="setExample('x^2 + a*x - 5 = 0')">x² + a·x - 5 = 0 (Quadratic)</div>
+                    <div class="example-item" onclick="setExample('x^3 - a = 0')">x³ - a = 0 (Cubic)</div>
+                    <div class="example-item" onclick="setExample('exp(x) - a = 0')">eˣ - a = 0 (Exponential)</div>
+                    <div class="example-item" onclick="setExample('sin(x) - a = 0')">sin(x) - a = 0 (Trigonometric)</div>
+                    <div class="example-item" onclick="setExample('x^4 + a*x^2 + 1 = 0')">x⁴ + a·x² + 1 = 0 (Quartic)</div>
                 </div>
             </div>
                     <button class="graph-btn" id="toggle-rotation" title="Toggle rotation">
                         <i class="fas fa-sync-alt"></i>
                     </button>
+                    <button class="graph-btn" id="toggle-imaginary" title="Toggle imaginary solutions">
+                        <i class="fas fa-project-diagram"></i>
+                    </button>
+                </div>
+                <div class="legend">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: var(--parameter-color);"></div>
+                        <span>Parameter 'a' axis</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: var(--real-color);"></div>
+                        <span>Real part of x</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: var(--imaginary-color);"></div>
+                        <span>Imaginary part of x</span>
+                    </div>
                 </div>
             </div>
         </div>
     <script>
         // Global variables
+        let scene, camera, renderer, graphMesh, controls;
         let rotationEnabled = false;
+        let showImaginary = true;
         let animationId = null;
         let solutionsData = [];
+        let axisLabels = [];
         // Initialize Three.js scene
         function initScene() {
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
+            // Add orbit controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.screenSpacePanning = false;
+            controls.minDistance = 1;
+            controls.maxDistance = 50;
+            // Add colored axes
+            createAxes();
             // Add lights
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
                 animationId = requestAnimationFrame(animate);
                 if (rotationEnabled) {
+                    controls.autoRotate = true;
+                    controls.autoRotateSpeed = 1.0;
+                } else {
+                    controls.autoRotate = false;
                 }
+                controls.update();
                 renderer.render(scene, camera);
             }
             animate();
         }
+        // Create colored axes with labels
+        function createAxes() {
+            // Remove old axes if they exist
+            scene.children.forEach(child => {
+                if (child instanceof THREE.AxesHelper || child instanceof THREE.Line) {
+                    scene.remove(child);
+                }
+            });
+            // Remove old labels
+            axisLabels.forEach(label => {
+                if (label.parentNode) {
+                    label.parentNode.removeChild(label);
+                }
+            });
+            axisLabels = [];
+            const length = 5;
+            const headLength = 0.3;
+            const headWidth = 0.2;
+            // X-axis (Real part of x) - Blue
+            const xArrow = new THREE.ArrowHelper(
+                new THREE.Vector3(1, 0, 0),
+                new THREE.Vector3(0, 0, 0),
+                length,
+                '0x' + getComputedStyle(document.documentElement).getPropertyValue('--real-color').substring(1),
+                headLength,
+                headWidth
+            );
+            scene.add(xArrow);
+            // Y-axis (Parameter a) - Green
+            const yArrow = new THREE.ArrowHelper(
+                new THREE.Vector3(0, 1, 0),
+                new THREE.Vector3(0, 0, 0),
+                length,
+                '0x' + getComputedStyle(document.documentElement).getPropertyValue('--parameter-color').substring(1),
+                headLength,
+                headWidth
+            );
+            scene.add(yArrow);
+            // Z-axis (Imaginary part of x) - Red
+            const zArrow = new THREE.ArrowHelper(
+                new THREE.Vector3(0, 0, 1),
+                new THREE.Vector3(0, 0, 0),
+                length,
+                '0x' + getComputedStyle(document.documentElement).getPropertyValue('--imaginary-color').substring(1),
+                headLength,
+                headWidth
+            );
+            scene.add(zArrow);
+            // Add grid for real and parameter axes (X-Y plane)
+            const gridXY = new THREE.GridHelper(10, 10, 0xcccccc, 0xcccccc);
+            gridXY.rotation.x = Math.PI / 2;
+            scene.add(gridXY);
+            // Add grid for real and imaginary axes (X-Z plane)
+            const gridXZ = new THREE.GridHelper(10, 10, 0xcccccc, 0xcccccc);
+            scene.add(gridXZ);
+            // Create axis labels
+            createAxisLabel('Re(x)', length + 0.5, 0, 0, 'var(--real-color)');
+            createAxisLabel('a', 0, length + 0.5, 0, 'var(--parameter-color)');
+            createAxisLabel('Im(x)', 0, 0, length + 0.5, 'var(--imaginary-color)');
+        }
+        // Create axis label
+        function createAxisLabel(text, x, y, z, color) {
+            const label = document.createElement('div');
+            label.className = 'axis-label';
+            label.textContent = text;
+            label.style.color = color;
+            document.getElementById('graph3d').appendChild(label);
+            axisLabels.push(label);
+            function updatePosition() {
+                const vector = new THREE.Vector3(x, y, z);
+                vector.project(camera);
+                const elementWidth = label.offsetWidth;
+                const elementHeight = label.offsetHeight;
+                const xPos = (vector.x * 0.5 + 0.5) * renderer.domElement.clientWidth - elementWidth / 2;
+                const yPos = (-(vector.y * 0.5) + 0.5) * renderer.domElement.clientHeight - elementHeight / 2;
+                label.style.transform = `translate(${xPos}px, ${yPos}px)`;
+            }
+            // Initial position
+            updatePosition();
+            // Update on camera change
+            controls.addEventListener('change', updatePosition);
+        }
+        // Parse equation and solve for x (including complex solutions)
         function solveEquation(equationStr, aValue) {
             try {
                 // Parse the equation (remove spaces and split on '=')
                         return solutions.map(sol => {
                             // Handle complex numbers
                             if (typeof sol === 'object' && sol.re !== undefined && sol.im !== undefined) {
+                                return { re: sol.re, im: sol.im };
+                            }
+                            // Real solutions
+                            const value = math.evaluate(sol.toString(), scope);
+                            if (typeof value === 'object' && value.re !== undefined && value.im !== undefined) {
+                                return value;
                             }
+                            return { re: value, im: 0 };
+                        });
                     }
                 } catch (e) {
                     // If symbolic solving fails, try numerical methods
                 }
+                // Numerical solving using Newton's method for complex numbers
                 const f = (x) => {
                     const scope = { a: aValue, x: x };
                     return math.evaluate(exprToSolve, scope);
                 };
                 const solutions = [];
                 const xMin = parseFloat(document.getElementById('x-min').value);
                 const xMax = parseFloat(document.getElementById('x-max').value);
+                const yMin = parseFloat(document.getElementById('y-min').value);
+                const yMax = parseFloat(document.getElementById('y-max').value);
+                const steps = 20; // Reduced for performance
+                const xStep = (xMax - xMin) / steps;
+                const yStep = (yMax - yMin) / steps;
+                // Grid search for initial guesses
+                for (let i = 0; i <= steps; i++) {
+                    for (let j = 0; j <= steps; j++) {
+                        const xRe = xMin + i * xStep;
+                        const xIm = yMin + j * yStep;
+                        const x = math.complex(xRe, xIm);
+                        // Apply Newton's method
+                        let prevX = math.complex(Infinity, Infinity);
+                        let currentX = x;
                         let iterations = 0;
+                        while (math.abs(math.subtract(currentX, prevX)) > 1e-10 && iterations < 50) {
+                            prevX = currentX;
+                            // Complex derivative using finite differences
+                            const h = math.complex(1e-8, 1e-8);
+                            const fVal = f(currentX);
+                            const fValH = f(math.add(currentX, h));
+                            const derivative = math.divide(math.subtract(fValH, fVal), h);
+                            if (math.abs(derivative) < 1e-10) break; // Avoid division by zero
+                            currentX = math.subtract(currentX, math.divide(fVal, derivative));
                             iterations++;
                         }
+                        if (iterations < 50) {
+                            // Check if solution is within bounds
+                            if (currentX.re >= xMin && currentX.re <= xMax &&
+                                currentX.im >= yMin && currentX.im <= yMax) {
+                                // Check if this solution is already found (to avoid duplicates)
+                                const isDuplicate = solutions.some(sol =>
+                                    math.abs(math.subtract(sol, currentX)) < 1e-5
+                                );
+                                if (!isDuplicate) {
+                                    solutions.push(currentX);
+                                }
                             }
                         }
                     }
             const aStep = (aMax - aMin) / steps;
             // Prepare data for graph
+            const realPoints = [];
+            const imaginaryPoints = [];
             solutionsData = [];
             // Calculate solutions for each a value
                 });
                 // Add points to graph
+                solutions.forEach(solution => {
+                    // Real solutions (z = 0)
+                    realPoints.push(new THREE.Vector3(solution.re, a, 0));
+                    // Imaginary solutions (if enabled)
+                    if (showImaginary && Math.abs(solution.im) > 1e-10) {
+                        imaginaryPoints.push(new THREE.Vector3(solution.re, a, solution.im));
+                    }
                 });
             }
+            // Create group to hold both real and imaginary points
+            const group = new THREE.Group();
+            // Create geometry for real solutions (blue)
+            if (realPoints.length > 0) {
+                const realGeometry = new THREE.BufferGeometry().setFromPoints(realPoints);
+                const realMaterial = new THREE.PointsMaterial({
+                    color: getComputedStyle(document.documentElement).getPropertyValue('--real-color'),
+                    size: 0.1,
+                    sizeAttenuation: true
+                });
+                const realMesh = new THREE.Points(realGeometry, realMaterial);
+                group.add(realMesh);
+            }
+            // Create geometry for imaginary solutions (red)
+            if (showImaginary && imaginaryPoints.length > 0) {
+                const imaginaryGeometry = new THREE.BufferGeometry().setFromPoints(imaginaryPoints);
+                const imaginaryMaterial = new THREE.PointsMaterial({
+                    color: getComputedStyle(document.documentElement).getPropertyValue('--imaginary-color'),
+                    size: 0.1,
+                    sizeAttenuation: true
+                });
+                const imaginaryMesh = new THREE.Points(imaginaryGeometry, imaginaryMaterial);
+                group.add(imaginaryMesh);
+            }
+            // Add line connecting real solutions for the same a value
+            if (realPoints.length > 0) {
+                const lineGeometry = new THREE.BufferGeometry().setFromPoints(realPoints);
+                const lineMaterial = new THREE.LineBasicMaterial({
+                    color: getComputedStyle(document.documentElement).getPropertyValue('--real-color'),
+                    transparent: true,
+                    opacity: 0.3
+                });
+                const line = new THREE.Line(lineGeometry, lineMaterial);
+                group.add(line);
+            }
+            // Add the group to the scene
+            graphMesh = group;
             scene.add(graphMesh);
             // Update camera to fit the graph
             camera.position.set(center.x, center.y, cameraZ);
             camera.lookAt(center);
+            controls.target.copy(center);
+            controls.update();
         }
         // Show solutions panel with calculated data
                     valuesContainer.className = 'solution-values';
                     item.solutions.forEach((sol, idx) => {
+                        // Real part
+                        const realValue = document.createElement('div');
+                        realValue.className = 'solution-value real';
+                        realValue.textContent = `Re(x${idx + 1}) = ${sol.re.toFixed(4)}`;
+                        valuesContainer.appendChild(realValue);
+                        // Imaginary part (if significant)
+                        if (Math.abs(sol.im) > 1e-10) {
+                            const imagValue = document.createElement('div');
+                            imagValue.className = 'solution-value imaginary';
+                            imagValue.textContent = `Im(x${idx + 1}) = ${sol.im.toFixed(4)}i`;
+                            valuesContainer.appendChild(imagValue);
+                        }
                     });
                     solutionItem.appendChild(equation);
                 const exprToSolve = `(${leftExpr}) - (${rightExpr})`;
                 // Test evaluation
+                math.evaluate(exprToSolve, { a: 1, x: math.complex(1, 1) });
                 errorElement.style.display = 'none';
                 return true;
                 } else {
                     camera.position.set(5, 5, 5);
                     camera.lookAt(0, 0, 0);
+                    controls.target.set(0, 0, 0);
+                    controls.update();
                 }
             });
                 }
             });
+            // Toggle imaginary solutions button
+            document.getElementById('toggle-imaginary').addEventListener('click', () => {
+                showImaginary = !showImaginary;
+                const icon = document.querySelector('#toggle-imaginary i');
+                if (showImaginary) {
+                    icon.style.color = 'var(--primary-color)';
+                } else {
+                    icon.style.color = 'var(--dark-color)';
+                }
+                // Recreate graph with new setting
+                const equation = document.getElementById('equation').value;
+                if (equation && validateEquation(equation)) {
+                    createGraph(equation);
+                }
+            });
             // Handle Enter key in equation input
             document.getElementById('equation').addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
             });
         });
     </script>
+</body>
 </html>