一、整体效果
把电磁场的实验报告做成网页PPT,原文是这里:<【电磁场实验作业】有限差分法(FDM)求解静电场电位分布_轩辕衍的博客-CSDN博客>
二、核心代码讲解
0.创建页面
第一篇内容有详细的讲解,可以去这里看看<【前端学习日记】用reveal.js实现制作网页幻灯片_轩辕衍的博客-CSDN博客>
1.插入数学公式
如果想在演示文稿中显示数学方程,可以使用MathJax插件,这是围绕MathJax库的一个的包装器,默认使用LaTeX,也可以通过数学配置对象进行调整。
如果你不知道什么是LaTeX,可以去看看这里<LaTeX - 知乎 (zhihu.com)>
如果不想输入复杂的代码,想要通过图形化界面输入公式转换后得到LaTeX公式,可以去这里看看<用公式编辑器将数学公式转为LaTeX代码_轩辕衍的博客-CSDN博客>
下面这是一个插入数学公式简单的demo:
<h3>2.3求解方法</h3>
<small>
\[\begin{equation}
\text{简单迭代法:}\quad \varphi_{i, j}^{n+1}=\frac{1}{4}\left(\varphi_{i, j+1}^{n}+\varphi_{i,
j-1}^{n}+\varphi_{i-1, j}^{n}+\varphi_{i+1, j}^{n}\right)
\end{equation} \]
\[\begin{equation}
\text{松弛迭代法:}\quad \varphi_{i, j}^{n+1}=\varphi_{i, j}^{n}+\frac{\omega}{4}\left(\varphi_{i,
j+1}^{n}+\varphi_{i, j-1}^{n+1}+\varphi_{i-1, j}^{n+1}+\varphi_{i+1, j}^{n}-4 \varphi_{i,
j}^{n}\right)\\
\omega=\frac{2}{1+\sqrt{1-\left[\frac{\cos (\pi / m)+\cos (\pi / n)}{2}\right]^{2}}}
\end{equation} \]
</small>
</section>
<script src="plugin/math/math.js"></script>
<script>
Reveal.initialize({
math: {
mathjax: 'https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js',
config: 'TeX-AMS_HTML-full',
// pass other options into `MathJax.Hub.Config()`
TeX: { Macros: { RR: "{\\bf R}" } }
},
plugins: [ RevealMath ]
});
</script>
2.插入代码
reveal.js包括一套强大的功能,旨在展示语法高亮的代码 ,这个功能由highlight.js提供,并包含在我们的默认演示模板中。
下面这是一个Java代码简单的demo:
<section>
<pre><code data-trim data-noescape>
public class hello{
public static void main(String[] args){
System.out.println("Hello world!");
}
}
</code></pre>
</section>
data-trim:自动删除<code>周围的空白;
data-noescape:避免HTML被转义;
三、全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有限差分法(FDM)求解静电场电位分布</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png">
<h3>有限差分法(FDM)求解静电场电位分布</h3>
<img src="pic/Avatar.jpg" height="300px" width="300px">
<h5>作者:<a href="https://blog.csdn.net/weixin_48276030?spm=1001.2101.3001.5343">轩辕怡湘</a></h5>
</section>
<section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png">
<h3>一、题目描述</h3>
<small>
试用超松弛法确定如图二维静电场区域的电位分布
</small>
<img src="pic/15931a95b32a47ed914c6bfa43d7f9a6.png" height="300" width="450px">
</section>
<section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png">
<section>
<h3>二、有限差分法</h3>
<p>
<small>
有限差分法(Finite Difference Methods,简称FDM),是一种微分方程的数值解法,是通过有限差分来近似导数,
从而寻求微分方程的近似解,是一种以以差分为原理的一种数值解法。
</small>
</p>
</section>
<section>
<h3>2.1差分的基本定义</h3>
<small>
\[\begin{equation}
\text{一阶差分:}\quad \Delta f(x)=f(x+h)-f(x)
\end{equation} \]
\[\begin{equation}
\text{一阶差商:}\quad \frac{\Delta f(x)}{\Delta x}=\frac{f(x+h)-f(x)}{h}
\end{equation} \]
\[\begin{equation}
\text{二阶差分:}\quad \Delta^{2} f(x)=\Delta f(x+h)-\Delta f(x)
\end{equation} \]
\[\begin{equation}
\text{二阶差商:}\quad \frac{\Delta^{2} f(x)}{\Delta x^{2}}=\frac{1}{h}\left[\frac{\Delta
f(x+h)}{h}-\frac{\Delta f(x)}{h}\right]
\end{equation} \]
</small>
</section>
<section>
<h3>2.2拉普拉斯方程的有限差分形式</h3>
<small>
\[\begin{aligned}
\varphi_{i, j+1}&=\varphi_{i, j}+\frac{\partial \varphi}{\partial x} h+\frac{1}{2}
\frac{\partial^{2} \varphi}{\partial x^{2}} h^{2}+\frac{1}{6} \frac{\partial^{3}
\varphi}{\partial x^{3}} h^{3}+\cdots \\
\varphi_{i, j-1}&=\varphi_{i, j}-\frac{\partial \varphi}{\partial x} h+\frac{1}{2}
\frac{\partial^{2} \varphi}{\partial x^{2}} h^{2}-\frac{1}{6} \frac{\partial^{3}
\varphi}{\partial x^{3}} h^{3}+\cdots \\
\varphi_{i-1, j}&=\varphi_{i, j}-\frac{\partial \varphi}{\partial y} h+\frac{1}{2}
\frac{\partial^{2} \varphi}{\partial y^{2}} h^{2}-\frac{1}{6} \frac{\partial^{3}
\varphi}{\partial y^{3}} h^{3}+\cdots \\
\varphi_{i+1, j}&=\varphi_{i, j}+\frac{\partial \varphi}{\partial y} h+\frac{1}{2}
\frac{\partial^{2} \varphi}{\partial y^{2}} h^{2}+\frac{1}{6} \frac{\partial^{3}
\varphi}{\partial y^{3}} h^{3}+\cdots \\
\varphi_{i, j+1}+\varphi_{i, j-1}&+\varphi_{i-1, j}+\varphi_{i+1, j}=4 \varphi_{i,
j}+h^{2}\left(\frac{\partial^{2} \varphi}{\partial x^{2}}+\frac{\partial^{2} \varphi}{\partial
y^{2}}\right)+\cdots \\
\nabla^{2} \varphi&=\frac{\partial^{2} \varphi}{\partial x^{2}}+\frac{\partial^{2}
\varphi}{\partial y^{2}}=0 \\
\varphi_{i, j}&=\frac{1}{4}\left(\varphi_{i, j+1}+\varphi_{i, j-1}+\varphi_{i-1,
j}+\varphi_{i+1, j}\right)
\end{aligned}\]
</small>
</section>
<section>
<h3>2.3求解方法</h3>
<small>
\[\begin{equation}
\text{简单迭代法:}\quad \varphi_{i, j}^{n+1}=\frac{1}{4}\left(\varphi_{i, j+1}^{n}+\varphi_{i,
j-1}^{n}+\varphi_{i-1, j}^{n}+\varphi_{i+1, j}^{n}\right)
\end{equation} \]
\[\begin{equation}
\text{松弛迭代法:}\quad \varphi_{i, j}^{n+1}=\varphi_{i, j}^{n}+\frac{\omega}{4}\left(\varphi_{i,
j+1}^{n}+\varphi_{i, j-1}^{n+1}+\varphi_{i-1, j}^{n+1}+\varphi_{i+1, j}^{n}-4 \varphi_{i,
j}^{n}\right)\\
\omega=\frac{2}{1+\sqrt{1-\left[\frac{\cos (\pi / m)+\cos (\pi / n)}{2}\right]^{2}}}
\end{equation} \]
</small>
</section>
</section>
<section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png">
<h3>三、示例代码</h3>
<pre><code data-trim data-line-numbers>
hx=25;hy=17; %设置网格节点数
v1=ones(hy,hx); %设置行列二维数组
v1(6:12,8:18)=zeros(7,11);
m=24;n=16;%横纵向网格数
%边界的Dirichlet边界条件值
v1(1,1:25)=0; %上边界
v1(17,1:25)=0;%下边界
v1(2:16,1)=0;%左边界
v1(2:16,25)=0;%右边界
v1(6,9:18)=ones(10,1)*100;%中间上边界
v1(7:11,18)=ones(5,1)*100;%中间上边界
%计算松弛因子
t1=(cos(pi/m)+cos(pi/n))/2;
w=2/(1+sqrt(1-t1*t1));
v2=v1;maxt=1;t=0;%初始化
k=0;
while(maxt>1e-6)%由v1迭代,算出v2,迭代精度为0.000001
k=k+1;%计算迭代次数
maxt=0;
for i=2:16%从2到16行循环
for j=2:7%从2到7列循环
v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式
t=abs(v2(i,j)-v1(i,j));
if(t>maxt)
maxt=t;
end
end
end
for i=2:5%从2到5行循环
for j=8:18%从8到18列循环
v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式
t=abs(v2(i,j)-v1(i,j));
if(t>maxt)
maxt=t;
end
end
end
for i=13:16%从13到16行循环
for j=8:18%从8到18列循环
v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式
t=abs(v2(i,j)-v1(i,j));
if(t>maxt)
maxt=t;
end
end
end
for i=2:16%从2到16行循环
for j=19:24%从19到24列循环
v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式
t=abs(v2(i,j)-v1(i,j));
if(t>maxt)
maxt=t;
end
end
end
v2(6:12,8)=v2(6:12,7);
v2(12,8:18)=v2(13,8:18);
v1=v2;
end
v1=v2(hy:-1:1,:);
save v1data v1
subplot(1,2,1),mesh(v1)%画三维曲面图
axis([0,25,0,17,0,100])
subplot(1,2,2),contour(v1,50)%画等电位线图
hold on
x=1:1:hx;y=1:1:hy;
[xx,yy]=meshgrid(x,y);%形成栅格
[Gx,Gy]=gradient(v1,0.6,0.6);%计算梯度
quiver(xx,yy,Gx,Gy,'r')%根据梯度数据画箭头
axis([-1.5,hx+2.5,-2,20])%设置坐标边框
plot([1,1,hx,hx,1],[1,hy,hy,1,1],'k')%画导体边框
text(hx/2-0.5,hy+0.4,'0V','fontsize',11);%上标注
text(hx/2-0.5,0.4,'0V','fontsize',11);%下标注
text(-1,hy/2,'0V','fontsize',11);%左标注
text(hx+1,hy/2,'0V','fontsize',11);%右标注
text(hx/2-3,hy/2+2,'\phi=50V','fontsize',11);%中间上标注
text(hx/2-4,hy/2-1,'\partial\phi/\partialn=0','fontsize',11);%中间下标注
hold off
</code></pre>
</section>
<section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png">
<h3>四、实验结果</h3>
<img src="pic/exp1.jpg" height="400" width="600">
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/math/math.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight, RevealMath],
math: {
mathjax: 'https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js',
config: 'TeX-AMS_HTML-full',
TeX: { Macros: { RR: "{\\bf R}" } }
},
});
</script>
</body>
</html>
觉得有用别忘了点个赞呀😄