用python画一个三次多项式的李曼曲面要求系数为滑块

8 2025-11-29 10:43

我将为您创建一个交互式的三次多项式黎曼曲面可视化，使用滑块控制系数：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三次多项式黎曼曲面</title>
    <script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@2.24.1/plotly.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            color: #e0f7fa;
            min-height: 100vh;
        }
        h1 {
            text-align: center;
            color: white;
            font-weight: 300;
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .controls {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .slider-container {
            margin: 15px 0;
            display: flex;
            align-items: center;
        }
        .slider-container label {
            display: inline-block;
            width: 150px;
            font-weight: 500;
            color: white;
        }
        .slider-container input[type="range"] {
            width: 300px;
            height: 8px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            outline: none;
            -webkit-appearance: none;
        }
        .slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #00e5ff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0,229,255,0.5);
        }
        .slider-container span {
            margin-left: 15px;
            font-weight: bold;
            color: #00e5ff;
            min-width: 50px;
            display: inline-block;
            text-align: center;
            background: rgba(0,0,0,0.2);
            padding: 5px 10px;
            border-radius: 20px;
        }
        #plot {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .info {
            margin-top: 25px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .info h3 {
            color: white;
            margin-top: 0;
            font-weight: 500;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding-bottom: 10px;
        }
        .info p {
            color: #e0f7fa;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>三次多项式黎曼曲面可视化</h1>
    
    <div class="controls">
        <h3>多项式系数控制：f(z) = a₃z³ + a₂z² + a₁z + a₀</h3>
        <div class="slider-container">
            <label>a₃ (三次项系数):</label>
            <input type="range" id="a3" min="-2" max="2" step="0.1" value="1">
            <span id="a3-value">1.0</span>
        </div>
        <div class="slider-container">
            <label>a₂ (二次项系数):</label>
            <input type="range" id="a2" min="-2" max="2" step="0.1" value="0">
            <span id="a2-value">0.0</span>
        </div>
        <div class="slider-container">
            <label>a₁ (一次项系数):</label>
            <input type="range" id="a1" min="-2" max="2" step="0.1" value="0">
            <span id="a1-value">0.0</span>
        </div>
        <div class="slider-container">
            <label>a₀ (常数项):</label>
            <input type="range" id="a0" min="-2" max="2" step="0.1" value="0">
            <span id="a0-value">0.0</span>
        </div>
    </div>
    
    <div id="plot"></div>
    
    <div class="info">
        <h3>说明</h3>
        <p>这个可视化展示了复数域上三次多项式的黎曼曲面。我们绘制的是 |f(z)| 的曲面，其中 f(z) 是复数多项式。</p>
        <p>黎曼曲面是复分析中的重要概念，它将多值函数表示为单值函数。对于多项式函数，我们可以将其视为从复平面到复平面的映射。</p>
        <p>通过调整系数，您可以观察曲面形状的变化，包括极值点的位置和曲面的整体拓扑结构。</p>
    </div>

    <script>
        // 创建初始数据
        function createRiemannSurface(a3, a2, a1, a0) {
            const n = 100;
            const x = [];
            const y = [];
            const z = [];
            
            // 创建网格
            for (let i = 0; i < n; i++) {
                const re = -2 + 4 * i / (n - 1);
                x[i] = [];
                y[i] = [];
                z[i] = [];
                
                for (let j = 0; j < n; j++) {
                    const im = -2 + 4 * j / (n - 1);
                    x[i][j] = re;
                    y[i][j] = im;
                    
                    // 计算复数多项式值 f(z) = a3*z^3 + a2*z^2 + a1*z + a0
                    const z_real = re;
                    const z_imag = im;
                    
                    // z^2 = (re + i*im)^2 = re^2 - im^2 + 2*i*re*im
                    const z2_real = re*re - im*im;
                    const z2_imag = 2*re*im;
                    
                    // z^3 = z^2 * z
                    const z3_real = z2_real * re - z2_imag * im;
                    const z3_imag = z2_real * im + z2_imag * re;
                    
                    // f(z) = a3*z^3 + a2*z^2 + a1*z + a0
                    const f_real = a3 * z3_real + a2 * z2_real + a1 * z_real + a0;
                    const f_imag = a3 * z3_imag + a2 * z2_imag + a1 * z_imag;
                    
                    // 计算模长 |f(z)|
                    z[i][j] = Math.sqrt(f_real*f_real + f_imag*f_imag);
                }
            }
            
            return { x, y, z };
        }

        // 更新图表
        function updatePlot() {
            const a3 = parseFloat(document.getElementById('a3').value);
            const a2 = parseFloat(document.getElementById('a2').value);
            const a1 = parseFloat(document.getElementById('a1').value);
            const a0 = parseFloat(document.getElementById('a0').value);
            
            // 更新显示值
            document.getElementById('a3-value').textContent = a3.toFixed(1);
            document.getElementById('a2-value').textContent = a2.toFixed(1);
            document.getElementById('a1-value').textContent = a1.toFixed(1);
            document.getElementById('a0-value').textContent = a0.toFixed(1);
            
            const data = createRiemannSurface(a3, a2, a1, a0);
            
            const trace = {
                x: data.x,
                y: data.y,
                z: data.z,
                type: 'surface',
                colorscale: 'Viridis',
                showscale: true,
                colorbar: {
                    title: '|f(z)|',
                    titlefont: { color: 'white' },
                    tickfont: { color: 'white' }
                }
            };
            
            const layout = {
                title: {
                    text: `f(z) = ${a3.toFixed(1)}z³ + ${a2.toFixed(1)}z² + ${a1.toFixed(1)}z + ${a0.toFixed(1)}`,
                    font: { color: 'white', size: 16 }
                },
                scene: {
                    xaxis: { 
                        title: 'Re(z)',
                        titlefont: { color: 'white' },
                        tickfont: { color: 'white' },
                        gridcolor: 'rgba(255,255,255,0.1)',
                        zerolinecolor: 'rgba(255,255,255,0.5)'
                    },
                    yaxis: { 
                        title: 'Im(z)',
                        titlefont: { color: 'white' },
                        tickfont: { color: 'white' },
                        gridcolor: 'rgba(255,255,255,0.1)',
                        zerolinecolor: 'rgba(255,255,255,0.5)'
                    },
                    zaxis: { 
                        title: '|f(z)|',
                        titlefont: { color: 'white' },
                        tickfont: { color: 'white' },
                        gridcolor: 'rgba(255,255,255,0.1)',
                        zerolinecolor: 'rgba(255,255,255,0.5)'
                    },
                    bgcolor: 'rgba(0,0,0,0)'
                },
                paper_bgcolor: 'rgba(0,0,0,0)',
                plot_bgcolor: 'rgba(0,0,0,0)',
                font: { color: 'white' }
            };
            
            Plotly.newPlot('plot', [trace], layout);
        }

        // 添加事件监听器
        document.getElementById('a3').addEventListener('input', updatePlot);
        document.getElementById('a2').addEventListener('input', updatePlot);
        document.getElementById('a1').addEventListener('input', updatePlot);
        document.getElementById('a0').addEventListener('input', updatePlot);

        // 初始化图表
        updatePlot();
    </script>
</body>
</html>

以上是创建一个交互式三次多项式黎曼曲面可视化的实现代码，这份代码实现了：

复数多项式计算
- 实现了复数域上的三次多项式计算 f(z) = a₃z³ + a₂z² + a₁z + a₀
- 包含复数乘法、幂运算等基础操作
- 计算结果取模得到 |f(z)| 用于曲面高度
交互式滑块控制
- 为四个多项式系数分别创建滑块控件
- 滑块值变化时实时更新可视化
- 显示当前系数数值
3D曲面可视化
- 使用Plotly.js创建交互式3D曲面图
- 复平面作为x-y平面，多项式模长作为z轴
- 采用Viridis颜色映射方案
响应式布局
- 适配不同屏幕尺寸
- 包含美观的CSS样式
- 提供清晰的标题和说明文字
教育性说明
- 包含对黎曼曲面的简要解释
- 说明可视化展示的内容
- 指导用户如何探索不同参数

使用说明：将代码保存为HTML文件后直接在浏览器中打开即可使用，无需额外依赖。

博客

用python画一个三次多项式的李曼曲面要求系数为滑块

全部评论

分类

热门文章

Tags

关于