Graphing Calc Code: Please make sure all this works. I just love design that's why I do this.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuantumGraph Ultra Pro Enhanced 2.0</title> <link rel="manifest" href="manifest.json"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script> <style> :root { --primary: #0a0e1a; --secondary: #1a2338; --tertiary: #2a3548; --accent: #00d4ff; --accent2: #ff6b6b; --accent3: #4ecdc4; --text: #e6e6fa; --glow: #00d4ff; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, var(--primary) 0%, #0f1419 50%, var(--secondary) 100%); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } header { background: linear-gradient(135deg, var(--secondary), var(--tertiary)); padding: 1rem; text-align: center; font-size: 1.8rem; color: var(--accent); text-shadow: 0 0 10px var(--glow); box-shadow: 0 2px 20px rgba(0, 212, 255, 0.3); position: relative; z-index: 10; } header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.1; animation: scan 3s linear infinite; } @keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .version-tag { position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--primary); font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; font-weight: bold; } .main-container { display: flex; flex: 1; overflow: hidden; } .left-panel { width: 350px; background: var(--secondary); padding: 1rem; overflow-y: auto; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); z-index: 5; position: relative; } .panel-toggle { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); background: var(--tertiary); border: none; border-radius: 0 5px 5px 0; padding: 8px 5px; color: var(--accent); cursor: pointer; z-index: 10; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); } .controls { display: flex; flex-direction: column; gap: 15px; } .control-group { background: var(--tertiary); padding: 15px; border-radius: 10px; border: 1px solid var(--accent); box-shadow: 0 2px 10px rgba(0, 212, 255, 0.1); transition: all 0.3s ease; } .control-group:hover { box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2); } .control-group h3 { margin: 0 0 10px 0; color: var(--accent); font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between; } .control-group h3 .toggle-btn { color: var(--text); background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 0; } .controls input, .controls button, .controls select { width: 100%; padding: 0.75rem; font-size: 1rem; border-radius: 8px; border: 1px solid var(--accent); background: rgba(255, 255, 255, 0.1); color: var(--text); transition: all 0.3s ease; margin-bottom: 10px; } .controls input:focus, .controls select:focus { outline: none; box-shadow: 0 0 10px var(--glow); border-color: var(--glow); } .controls button { background: linear-gradient(135deg, var(--accent), var(--accent3)); color: white; font-weight: bold; cursor: pointer; border: none; transition: all 0.3s ease; margin-bottom: 5px; } .controls button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4); } .controls button:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(0, 212, 255, 0.4); } .preset-button { background: linear-gradient(135deg, var(--accent2), #ff8e8e) !important; font-size: 0.9rem !important; } .range-container { display: flex; gap: 10px; align-items: center; } .range-container input[type="range"] { flex: 1; margin-bottom: 0; } .range-container span { min-width: 50px; font-size: 0.9rem; color: var(--accent3); } canvas { flex: 1; background: linear-gradient(45deg, #000 0%, #001122 50%, #000 100%); touch-action: none; cursor: grab; } canvas:active { cursor: grabbing; } .bottom-panel { height: 120px; display: flex; position: relative; z-index: 5; } .resize-handle { position: absolute; height: 5px; width: 100%; top: -2px; left: 0; cursor: ns-resize; z-index: 10; } .output { flex: 1; padding: 1rem; background: #000914; font-family: 'Courier New', monospace; overflow-y: auto; color: var(--accent); border-top: 1px solid var(--accent); position: relative; } #latex-box { flex: 1; padding: 1rem; background: #111; font-family: serif; color: var(--accent); border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); overflow-y: auto; } .graph-container { flex: 1; position: relative; } .stats { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; font-family: monospace; font-size: 0.8rem; color: var(--accent3); z-index: 5; } .color-picker { display: flex; gap: 5px; margin-top: 5px; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; } .color-swatch:hover { transform: scale(1.1); border-color: var(--accent); } .color-swatch.active { border-color: var(--glow); box-shadow: 0 0 10px var(--glow); } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--accent); font-size: 1.2rem; text-align: center; z-index: 100; } .loading-spinner { border: 4px solid rgba(0, 212, 255, 0.3); border-radius: 50%; border-top: 4px solid var(--accent); width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: var(--text); padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 100; } .tooltip.show { opacity: 1; } .clear-button { position: absolute; top: 10px; right: 10px; background: var(--accent2); color: white; border: none; border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; cursor: pointer; } .tabs { display: flex; margin-bottom: 10px; } .tab { padding: 5px 15px; background: var(--tertiary); color: var(--text); border: 1px solid var(--accent); border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 5px; font-size: 0.8rem; } .tab.active { background: var(--accent); color: var(--primary); } .tab-content { display: none; } .tab-content.active { display: block; } .keyboard-shortcuts { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 5px; font-family: monospace; font-size: 0.8rem; color: var(--accent3); z-index: 5; max-width: 300px; } .keyboard-shortcuts strong { color: var(--accent); } .keyboard-shortcuts kbd { background: var(--tertiary); padding: 2px 5px; border-radius: 3px; border: 1px solid var(--accent); } .tutorial-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; color: var(--text); } .tutorial-container { max-width: 800px; background: var(--secondary); border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); } .tutorial-container h2 { color: var(--accent); margin-top: 0; } .tutorial-buttons { display: flex; justify-content: space-between; margin-top: 20px; } .tutorial-close { background: var(--accent2); color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; } .tutorial-next { background: var(--accent3); color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; } .notification { position: fixed; top: 20px; right: 20px; background: var(--tertiary); color: var(--text); padding: 10px 20px; border-radius: 5px; border-left: 5px solid var(--accent); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 1000; transition: all 0.3s; transform: translateX(120%); } .notification.show { transform: translateX(0); } .notification.success { border-left-color: var(--accent3); } .notification.error { border-left-color: var(--accent2); } @media (max-width: 768px) { .main-container { flex-direction: column; } .left-panel { width: 100%; height: 250px; } .panel-toggle { display: block; } .bottom-panel { height: 100px; } .keyboard-shortcuts { display: none; } } </style> </head> <body> <header> QuantumGraph Ultra Pro Enhanced <div style="font-size: 0.6rem; opacity: 0.7; margin-top: 5px;">Advanced Parametric 3D Visualization Engine</div> <div class="version-tag">v2.0</div> </header> <div class="main-container"> <div class="left-panel" id="left-panel"> <button class="panel-toggle" id="panel-toggle">◀</button> <div class="controls"> <div class="control-group"> <h3>📐 Parametric Equations</h3> <input id="x-function" placeholder="x = cos(t)" value="cos(t)" spellcheck="false"> <input id="y-function" placeholder="y = sin(t)" value="sin(t)" spellcheck="false"> <input id="z-function" placeholder="z = t/5" value="t/5" spellcheck="false"> <button id="advanced-equation-toggle" class="preset-button" style="font-size: 0.7rem !important;">Advanced Options ▾</button> <div id="advanced-equation-panel" style="display: none; margin-top: 10px;"> <select id="equation-type"> <option value="parametric">Parametric (t)</option> <option value="cylindrical">Cylindrical (r, θ, z)</option> <option value="spherical">Spherical (ρ, θ, φ)</option> </select> <div class="range-container" style="margin-top: 10px;"> <span>Points:</span> <input type="range" id="point-density" min="50" max="2000" value="500" step="50"> <span id="point-density-value">500</span> </div> <div style="margin-top: 10px;"> <label> <input type="checkbox" id="smooth-shading"> Smooth Shading </label> </div> </div> </div> <div class="control-group"> <h3>⚙️ Parameters</h3> <div class="range-container"> <span>t min:</span> <input type="range" id="t-min" min="-20" max="0" value="-10" step="0.5"> <span id="t-min-value">-10</span> </div> <div class="range-container"> <span>t max:</span> <input type="range" id="t-max" min="0" max="20" value="10" step="0.5"> <span id="t-max-value">10</span> </div> <div class="range-container"> <span>Step:</span> <input type="range" id="t-step" min="0.01" max="0.5" value="0.1" step="0.01"> <span id="t-step-value">0.1</span> </div> </div> <div class="control-group"> <h3>🎨 Appearance</h3> <select id="line-type"> <option value="line">Line</option> <option value="points">Points</option> <option value="line-points">Line + Points</option> <option value="ribbons">Ribbon Effect</option> </select> <div class="color-picker"> <div class="color-swatch active" style="background: #ff2e63;" data-color="#ff2e63"></div> <div class="color-swatch" style="background: #00d4ff;" data-color="#00d4ff"></div> <div class="color-swatch" style="background: #4ecdc4;" data-color="#4ecdc4"></div> <div class="color-swatch" style="background: #ffe66d;" data-color="#ffe66d"></div> <div class="color-swatch" style="background: #ff6b6b;" data-color="#ff6b6b"></div> <div class="color-swatch" style="background: #a8e6cf;" data-color="#a8e6cf"></div> </div> <div style="margin-top: 10px;"> <label> <input type="checkbox" id="bloom-effect" checked> Glow Effect </label> </div> <div style="margin-top: 10px;"> <label> <input type="checkbox" id="dark-mode" checked> Dark Mode </label> </div> <div class="range-container" style="margin-top: 10px;"> <span>Line Width:</span> <input type="range" id="line-width" min="1" max="10" value="2" step="1"> <span id="line-width-value">2</span> </div> </div> <div class="control-group"> <h3> 🎯 Presets <button class="toggle-btn" id="toggle-presets">▾</button> </h3> <div id="presets-container"> <button class="preset-button" data-preset="helix">DNA Helix</button> <button class="preset-button" data-preset="torus">Torus Knot</button> <button class="preset-button" data-preset="butterfly">Butterfly</button> <button class="preset-button" data-preset="spiral">Galaxy Spiral</button> <button class="preset-button" data-preset="lissajous">Lissajous</button> <button class="preset-button" data-preset="heart">Heart</button> <button class="preset-button" data-preset="flower">Flower</button> <button class="preset-button" data-preset="mobius">Möbius Strip</button> </div> </div> <div class="control-group"> <h3>🚀 Actions</h3> <button id="plot-button">🔄 Plot/Update</button> <button id="export-button">📷 Export PNG</button> <button id="reset-button">🎯 Reset View</button> <button id="animation-button">⏯️ Toggle Animation</button> <button id="help-button" style="background: linear-gradient(135deg, #8e6bff, #6b9fff);">❓ Help/Tutorial</button> </div> </div> </div> <div class="graph-container"> <canvas id="graph3d"></canvas> <div class="stats" id="stats"> Points: 0<br> FPS: 0<br> Rotation: Auto </div> <div class="keyboard-shortcuts" id="keyboard-shortcuts"> <strong>Shortcuts:</strong><br> <kbd>Enter</kbd> Plot/Update<br> <kbd>Space</kbd> Toggle Animation<br> <kbd>R</kbd> Reset View<br> <kbd>F</kbd> Fullscreen<br> <kbd>H</kbd> Hide/Show Panel </div> <div class="loading" id="loading" style="display: none;"> <div class="loading-spinner"></div> Calculating... </div> </div> </div> <div class="bottom-panel"> <div class="resize-handle" id="resize-handle"></div> <div class="output" id="console"> <button class="clear-button" id="clear-console">Clear</button> ✨ QuantumGraph Enhanced 2.0 Ready...<br>🎮 Controls: Mouse to rotate, Wheel to zoom<br>📌 Press Enter to plot, Esc to reset view </div> <div id="latex-box">Equations will appear here...</div> </div> <div class="tooltip" id="tooltip"></div> <div class="notification" id="notification"></div> <div class="tutorial-overlay" id="tutorial-overlay" style="display: none;"> <div class="tutorial-container"> <h2>Welcome to QuantumGraph Ultra Pro Enhanced 2.0!</h2> <div id="tutorial-content"> <p>This powerful tool allows you to visualize parametric 3D equations with ease. Let's take a quick tour of the key features:</p> <ul> <li>Enter your parametric equations in the left panel</li> <li>Adjust parameters using the sliders</li> <li>Choose from various visualization styles</li> <li>Try out our preset equations for instant visualization</li> <li>Export your creations as high-quality images</li> </ul> <p>Ready to create stunning mathematical visualizations? Let's go!</p> </div> <div class="tutorial-buttons"> <button class="tutorial-close" id="tutorial-close">Skip Tutorial</button> <button class="tutorial-next" id="tutorial-next">Next</button> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // Improved version with all enhancements const canvas3d = document.getElementById('graph3d'); const logBox = document.getElementById('console'); const latexBox = document.getElementById('latex-box'); const statsBox = document.getElementById('stats'); const loadingIndicator = document.getElementById('loading'); const tooltipElement = document.getElementById('tooltip'); const notificationElement = document.getElementById('notification'); const leftPanel = document.getElementById('left-panel'); const panelToggle = document.getElementById('panel-toggle'); const keyboardShortcuts = document.getElementById('keyboard-shortcuts'); const resizeHandle = document.getElementById('resize-handle'); const tutorialOverlay = document.getElementById('tutorial-overlay'); const tutorialContent = document.getElementById('tutorial-content'); const tutorialNext = document.getElementById('tutorial-next'); const tutorialClose = document.getElementById('tutorial-close'); const plotButton = document.getElementById('plot-button'); const exportButton = document.getElementById('export-button'); const resetButton = document.getElementById('reset-button'); const animationButton = document.getElementById('animation-button'); const helpButton = document.getElementById('help-button'); const clearConsole = document.getElementById('clear-console'); const presetButtons = document.querySelectorAll('.preset-button[data-preset]'); const advancedEquationToggle = document.getElementById('advanced-equation-toggle'); const advancedEquationPanel = document.getElementById('advanced-equation-panel'); const togglePresets = document.getElementById('toggle-presets'); const presetsContainer = document.getElementById('presets-container'); // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, canvas3d.clientWidth / canvas3d.clientHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: canvas3d, antialias: true, preserveDrawingBuffer: true, powerPreference: "high-performance", alpha: true }); // Global variables let mesh, pointMesh, ribbonMesh; let animationEnabled = true; let currentColor = '#ff2e63'; let frameCount = 0; let lastTime = performance.now(); let isCalculating = false; let plotDebounceTimer = null; let darkMode = true; let isPanelVisible = true; let lineWidth = 2; let bottomPanelHeight = 120; let currentTutorialStep = 0; // Cache for previously calculated geometries const geometryCache = new Map(); // Presets data const presets = { helix: { name: "DNA Helix", x: '16*cos(t)', y: '16*sin(t)', z: 't', min: -10, max: 10, step: 0.1 }, torus: { name: "Torus Knot", x: '(3+cos(5*t))*cos(t)', y: '(3+cos(5*t))*sin(t)', z: 'sin(5*t)', min: 0, max: 6.28, step: 0.05 }, butterfly: { name: "Butterfly Curve", x: 'sin(t)*(exp(cos(t))-2*cos(4*t)-pow(sin(t/12),5))', y: 'cos(t)*(exp(cos(t))-2*cos(4*t)-pow(sin(t/12),5))', z: 't/10', min: -37.7, max: 37.7, step: 0.1 }, spiral: { name: "Galaxy Spiral", x: 't*cos(t)', y: 't*sin(t)', z: 't/5', min: 0, max: 20, step: 0.1 }, lissajous: { name: "Lissajous Curve", x: 'sin(3*t)', y: 'sin(2*t)', z: 'cos(5*t)', min: 0, max: 6.28, step: 0.05 }, heart: { name: "3D Heart", x: '16*pow(sin(t),3)', y: '13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t)', z: 't/5', min: 0, max: 6.28, step: 0.05 }, flower: { name: "Exotic Flower", x: 'cos(t)*(3+2*sin(5*t))', y: 'sin(t)*(3+2*sin(5*t))', z: '2*cos(7*t)', min: 0, max: 6.28, step
Comments
Post a Comment