用python画一个三次多项式的李曼曲面要求系数为滑块
6 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文件后直接在浏览器中打开即可使用，无需额外依赖。
分类
热门文章
Tags
关于
提供Arduino芯片编程、Java网站设计、抢票系统、秒杀系统的支持以及创客服务
全部评论