docs: 更新 examples/Readme.md 并新增 Readme.html
- 覆盖全部 10 个案例（原 Readme 只到 case06） - 新增案例选择指南表格 - Readme.html 为深色主题独立 HTML 页面 （含卡片布局、标签分类、代码高亮、响应式设计） - 各案例详情对齐最新配置参数
This commit is contained in:
@@ -0,0 +1,436 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dynamics 示例案例总览</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--surface: #161b22;
|
||||
--border: #30363d;
|
||||
--text: #c9d1d9;
|
||||
--text-dim: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--green: #3fb950;
|
||||
--orange: #d29922;
|
||||
--red: #f85149;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Helvetica, Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
.container { max-width: 960px; margin: 0 auto; }
|
||||
|
||||
h1 { font-size: 2rem; margin-bottom: 8px; color: #f0f6fc; }
|
||||
h1 small { font-size: 1rem; color: var(--text-dim); font-weight: 400; }
|
||||
.subtitle { color: var(--text-dim); margin-bottom: 32px; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: #f0f6fc;
|
||||
}
|
||||
|
||||
/* 案例总览表格 */
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.case-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
.case-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.case-card .num {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent);
|
||||
color: #0d1117;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.case-card h3 {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 6px;
|
||||
color: #f0f6fc;
|
||||
}
|
||||
.case-card p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.case-card .meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tag-python { background: #3572A533; color: #3572A5; }
|
||||
.tag-c { background: #55555533; color: #aaa; }
|
||||
.tag-fortran { background: #73422233; color: #e9954a; }
|
||||
.tag-gravity { background: #d2992233; color: var(--orange); }
|
||||
.tag-spring { background: #3fb95033; color: var(--green); }
|
||||
.tag-drive { background: #58a6ff33; color: var(--accent); }
|
||||
.tag-warning { background: #f8514933; color: var(--red); }
|
||||
|
||||
/* 详情区域 */
|
||||
.detail-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.detail-card h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 8px;
|
||||
color: #f0f6fc;
|
||||
}
|
||||
.detail-card h3 a { color: var(--accent); text-decoration: none; }
|
||||
.detail-card h3 a:hover { text-decoration: underline; }
|
||||
.detail-card p { color: var(--text-dim); margin-bottom: 8px; }
|
||||
.detail-card ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.detail-card li { font-size: 0.8rem; }
|
||||
.detail-card .highlight {
|
||||
background: #1f242e;
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 8px 12px;
|
||||
margin-top: 8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 使用指南 */
|
||||
.guide {
|
||||
background: #1f242e;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.guide h3 { color: #f0f6fc; margin-bottom: 12px; }
|
||||
.guide code {
|
||||
display: block;
|
||||
background: #0d1117;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
color: var(--green);
|
||||
}
|
||||
.guide table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
||||
.guide th, .guide td {
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.guide th { color: var(--text-dim); font-weight: 600; }
|
||||
.guide td:first-child { color: var(--accent); font-weight: 500; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body { padding: 16px; }
|
||||
.case-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<h1>Dynamics 示例案例 <small>v2.0</small></h1>
|
||||
<p class="subtitle">10 个从简单到复杂的物理模拟案例，展示分子动力学模拟框架的多种应用场景</p>
|
||||
|
||||
<h2>📋 案例总览</h2>
|
||||
<div class="case-grid">
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">01</span>
|
||||
<h3>双粒子弹簧系统</h3>
|
||||
<p>两个原子由弹簧连接，在重力场中运动</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-python">Python</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-gravity">重力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">02</span>
|
||||
<h3>行星运动</h3>
|
||||
<p>地球绕太阳椭圆公转（万有引力）</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-python">Python</span>
|
||||
<span class="tag tag-gravity">万有引力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">03</span>
|
||||
<h3>日地月系统（失稳）</h3>
|
||||
<p>三体系统参数不当导致轨道发散</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-python">Python</span>
|
||||
<span class="tag tag-gravity">万有引力</span>
|
||||
<span class="tag tag-warning">失败案例</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">04</span>
|
||||
<h3>日地月系统（稳定）</h3>
|
||||
<p>三体系统稳定椭圆轨道</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-python">Python</span>
|
||||
<span class="tag tag-gravity">万有引力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">05</span>
|
||||
<h3>一维原子链纵波</h3>
|
||||
<p>驱动原子 1 沿 x 振动，产生纵波传播</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-python">Python</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-drive">驱动力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">06</span>
|
||||
<h3>一维原子链横波</h3>
|
||||
<p>带阻尼的横波传播（FPU 非线性）</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-c">C 引擎</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-drive">驱动力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">07</span>
|
||||
<h3>一维链横波·双端驱动</h3>
|
||||
<p>原子 1 + 原子 120 同时驱动，波相遇干涉</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-c">C 引擎</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-drive">驱动力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">08</span>
|
||||
<h3>双原子弹簧·C 引擎测试</h3>
|
||||
<p>2 原子快速验证 C 引擎正确性</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-c">C 引擎</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">09</span>
|
||||
<h3>一维链纵波·Fortran 引擎</h3>
|
||||
<p>Fortran 引擎驱动的纵波传播测试</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-fortran">Fortran</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-drive">驱动力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card">
|
||||
<span class="num">10</span>
|
||||
<h3>一维链纵波·能量分析</h3>
|
||||
<p>纵波传播 + 轨迹/能量图绘制</p>
|
||||
<div class="meta">
|
||||
<span class="tag tag-c">C 引擎</span>
|
||||
<span class="tag tag-spring">弹簧</span>
|
||||
<span class="tag tag-drive">驱动力</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>📖 各案例详情</h2>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case01/">case01 — 双粒子弹簧系统</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-python">Python 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-gravity">重力场</li>
|
||||
</ul>
|
||||
<p>两个原子通过弹簧连接，在均匀重力场（G=[0,0,-9.8]）中自由运动。展示重力作用下的耦合振动与落体运动的复合。</p>
|
||||
<div class="highlight">🔬 教学案例：算法 leapfrog，渲染 Sphere 模式，建议作为入门第一个案例</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case02/">case02 — 行星运动</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-python">Python 引擎</li>
|
||||
<li class="tag tag-gravity">万有引力</li>
|
||||
</ul>
|
||||
<p>模拟地球绕太阳的椭圆轨道运动。大质量中心体固定，小质量体绕行。</p>
|
||||
<div class="highlight">🌍 万有引力强度 gravity_strength=100.0，leapfrog 算法确保能量守恒</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case03/">case03 — 日地月系统（失败案例）</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-python">Python 引擎</li>
|
||||
<li class="tag tag-gravity">万有引力</li>
|
||||
<li class="tag tag-warning">失稳</li>
|
||||
</ul>
|
||||
<p>三体系统（太阳-地球-月球）。初始条件或参数设置不当，轨道不稳定。展示数值模拟中参数选择的重要性。</p>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case04/">case04 — 日地月系统（成功案例）</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-python">Python 引擎</li>
|
||||
<li class="tag tag-gravity">万有引力</li>
|
||||
</ul>
|
||||
<p>与 case03 相同的三体系统，但采用恰当的初始条件，地球和月球维持稳定的椭圆轨道运动。</p>
|
||||
<div class="highlight">✅ 与 case03 对比学习：初始条件对数值稳定性的影响</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case05/">case05 — 一维原子链纵波</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-python">Python 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-drive">驱动力</li>
|
||||
</ul>
|
||||
<p>60 原子沿 x 轴排列。原子 1 受 x 方向驱动力，产生沿链传播的纵波（压缩波）。原子 x 自由，y/z 锁定。</p>
|
||||
<div class="highlight">📈 纵波波速快（x 方向弹簧力线性），T_total=10, NSTEP=50</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case06/">case06 — 一维原子链横波（带阻尼）</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-c">C 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-drive">驱动力</li>
|
||||
</ul>
|
||||
<p>120 原子沿 x 轴排列，带横向阻尼。驱动沿 z 方向，原子 z 自由，x/y 锁定。横波传播具有 FPU 型非线性。</p>
|
||||
<div class="highlight">⚡ C 引擎高性能计算，T_total=1000, NSTEP=500，支持运动相机</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case07/">case07 — 一维链横波·双端驱动</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-c">C 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-drive">驱动力</li>
|
||||
</ul>
|
||||
<p>120 原子，原子 1 和原子 120 同时受 z 方向驱动（同频率、相位差 90°），两端向中间传播的横波相遇。</p>
|
||||
<div class="highlight">🌊 波干涉演示，视觉放大 display_amp=[1,1,10] 便于观察小幅度振动</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case08/">case08 — 双原子弹簧（C 引擎快速测试）</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-c">C 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
</ul>
|
||||
<p>2 原子弹簧系统，T_total=100 的短时模拟。用于快速验证 C 引擎的正确性和性能。</p>
|
||||
<div class="highlight">🧪 引擎快速验证用例，无动画输出</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case09/">case09 — 一维链纵波·Fortran 引擎</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-fortran">Fortran 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-drive">驱动力</li>
|
||||
</ul>
|
||||
<p>40 原子沿 x 轴排列，Fortran 引擎驱动的纵波传播测试。验证 Fortran 引擎的输出兼容性。</p>
|
||||
<div class="highlight">🔧 Fortran 引擎兼容性验证，T_total=200, NSTEP=100</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<h3><a href="./case10/">case10 — 一维链纵波·能量分析</a></h3>
|
||||
<ul>
|
||||
<li class="tag tag-c">C 引擎</li>
|
||||
<li class="tag tag-spring">弹簧键力</li>
|
||||
<li class="tag tag-drive">驱动力</li>
|
||||
</ul>
|
||||
<p>40 原子纵波传播，支持轨迹/能量图绘制（step_plot=1）。原子 x/y/z 全部自由。</p>
|
||||
<div class="highlight">📊 能量分析演示，T_total=10, NSTEP=20</div>
|
||||
</div>
|
||||
|
||||
<h2>🚀 使用方法</h2>
|
||||
<div class="guide">
|
||||
<h3>命令行</h3>
|
||||
<code># 进入案例目录并运行<br>cd examples/case05<br>python run_dynamics.py<br><br># 仅运行模拟，跳过动画<br>python run_dynamics.py --no-plot<br><br># 手动启动 3D 动画<br>python ../../draw.py output/</code>
|
||||
|
||||
<h3>案例选择指南</h3>
|
||||
<table>
|
||||
<tr><th>目标</th><th>推荐案例</th></tr>
|
||||
<tr><td>快速上手框架</td><td>case01</td></tr>
|
||||
<tr><td>天体力学/万有引力</td><td>case02 / case04</td></tr>
|
||||
<tr><td>波动物理（纵波）</td><td>case05</td></tr>
|
||||
<tr><td>波动物理（横波/非线性/阻尼）</td><td>case06</td></tr>
|
||||
<tr><td>双端驱动/波干涉</td><td>case07</td></tr>
|
||||
<tr><td>引擎性能对比</td><td>case08 (C) / case09 (Fortran)</td></tr>
|
||||
<tr><td>能量分析</td><td>case10</td></tr>
|
||||
</table>
|
||||
|
||||
<h3>配置</h3>
|
||||
<p style="color:var(--text-dim); font-size:0.875rem;">
|
||||
每个案例的 <code>input/input.txt</code> 可配置物理参数、力开关、算法、引擎、渲染方式等。
|
||||
从 case06 起支持 <code>save_trajectory</code> 开关、摄像机初始位置、<code>display_amp</code> 视觉放大等高级功能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>📁 框架结构</h2>
|
||||
<div class="detail-card">
|
||||
<pre style="font-size:0.825rem; color:var(--text-dim); line-height:1.5;">
|
||||
dynamics/
|
||||
├── dynamics.py # 统一运行入口
|
||||
├── compute.py # Python 物理引擎
|
||||
├── draw.py # VisPy 3D 动画
|
||||
├── plot_wave.py # 波形能量图
|
||||
├── engines/ # C / C++ / Fortran 引擎
|
||||
├── examples/ # 案例目录
|
||||
│ ├── case01/ ~ case10/
|
||||
└── output/ # 默认输出目录
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user