Add sea-mirage (by chuangyu J) and branched-flow.

ricktu288 · Jan 18, 2024 · 6b80bb4 · 6b80bb4
1 parent 9c15bd8
commit 6b80bb4
Show file tree

Hide file tree

Showing 34 changed files with 2,551 additions and 9 deletions.
diff --git a/cn/gallery/branched-flow-thumbnail.png b/cn/gallery/branched-flow-thumbnail.png
diff --git a/cn/gallery/branched-flow.html b/cn/gallery/branched-flow.html
@@ -0,0 +1,74 @@
+ <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>分支流 - 射线光学模拟</title>
+<meta property="og:title" content="分支流 - 射线光学模拟">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://phydemo.app/ray-optics/cn/gallery/branched-flow">
+<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/branched-flow-thumbnail.png">
+  <meta property="og:description" content="自由、开源的网页程序，用于建立及模拟二维几何光学场景。">
+<meta property="og:locale" content="zh-CN">
+<link rel="canonical" href="https://phydemo.app/ray-optics/cn/gallery/branched-flow">
+<link rel="alternate" href="https://phydemo.app/ray-optics/gallery/branched-flow" hreflang="en">
+<link rel="alternate" href="https://phydemo.app/ray-optics/cn/gallery/branched-flow" hreflang="zh-CN">
+<link rel="alternate" href="https://phydemo.app/ray-optics/tw/gallery/branched-flow" hreflang="zh-TW">
+
+<link rel="stylesheet" href="../../thirdparty/bootstrap-3.3.7/bootstrap.min.css">
+<link rel="stylesheet" href="gallery.css">
+<link rel="icon" href="../../icon128.png" type="image/png">
+</head>
+<body>
+<div class="navbar navbar-fixed-top container" style="background-color:white;max-height:90px;overflow:hidden">
+    <a href="https://phydemo.app/ray-optics/cn/" class="navbar-left brand">
+      <img src="../../icon128.png" alt="" style="width:18pt; height:18pt">
+      射线光学模拟
+    </a>
+    <div class="navbar-right">
+
+<span class="navul">
+     <a href="https://phydemo.app/ray-optics/cn/">首页</a>
+     <a href="https://phydemo.app/ray-optics/cn/gallery/" class="active">作品集</a>
+     <a href="https://phydemo.app/ray-optics/about">关于</a>
+</span>
+<span class="github-button-container">
+<a class="github-button" href="https://github.com/ricktu288/ray-optics" data-show-count="true" aria-label="Star ricktu288/ray-optics on GitHub">Star</a>
+</span>
+</div>
+</div>
+<div class="container">
+<center>
+<h1><b><span>分支流</span></b></h1>
+<p>
+贡献者：Yi-Ting Tu
+</p>
+<div class="description">
+<p>当光线经过折射率在空间上有随机扰动（相关长度远大于光的波长）的介质时，会形成一种类似树状的图案，称为分支流。本模拟使用一些余弦函数的和作为折射率函数来演示这个现象，其中余弦函数的振幅、波数与相位都是类似随机的数。</p>
+</div>
+<p>
+<a href="https://phydemo.app/ray-optics/simulator/?zh-CN#../cn/gallery/branched-flow" target="_blank" class="btn btn-success btn-lg">在模拟器中打开</a>
+</p>
+<img src="branched-flow.png" alt="分支流" style="width:100%">
+</center>
+
+  <div style="float: right; padding-top: 10px;">
+    <div class="dropup">
+      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+      <span id="language">语言：简体中文</span>
+      <span class="caret"></span></button>
+      <ul class="dropdown-menu">
+        <li><a href="https://phydemo.app/ray-optics/gallery/branched-flow">English</a></li><li><a href="https://phydemo.app/ray-optics/cn/gallery/branched-flow">简体中文</a></li><li><a href="https://phydemo.app/ray-optics/tw/gallery/branched-flow">正體中文</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+</div>
+<script src="../../thirdparty/jquery.min.js"></script>
+<script src="../../thirdparty/bootstrap-3.3.7/bootstrap.min.js"></script>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+</body>
+</html>
diff --git a/cn/gallery/branched-flow.json b/cn/gallery/branched-flow.json
@@ -0,0 +1,137 @@
+{
+  "version": 2,
+  "objs": [
+    {
+      "type": "grin_refractor",
+      "path": [
+        {
+          "x": 340,
+          "y": 180,
+          "arc": false
+        },
+        {
+          "x": 340,
+          "y": 920,
+          "arc": false
+        },
+        {
+          "x": 1540,
+          "y": 920,
+          "arc": false
+        },
+        {
+          "x": 1540,
+          "y": 180,
+          "arc": false
+        }
+      ],
+      "notDone": false,
+      "origin": {
+        "type": 1,
+        "x": 0,
+        "y": 0,
+        "exist": true
+      },
+      "p": "1 + cos(x / 6.3 + y / 6.7 + 4.3) / 86 + cos(x / 6.4 - y / 3.2 + 4.5) / 95 + cos(-(x / 3.4) - y / 5.4 + 3.4) / 82 + cos(-(x / 9.7) + y / 5.4 + 3.5) / 71 + cos(x / 1.2 + y / 3.5 + 2.2) / 75 + cos(x / 5.6 - y / 1.8 + 5.2) / 95 + cos(-(x / 5.4) - y / 3.2 + 5.4) / 82 + cos(-(x / 8.7) + y / 6.5 + 7.4) / 71 + cos(x / 9.4 + y / 4.2 + 2.3) / 94 + cos(x / 2.3 - y / 6.4 + 0.9) / 63 + cos(-(x / 7.5) - y / 8.6 + 5.7) / 81 + cos(-(x / 9.7) + y / 10 + 3.2) / 105",
+      "p_tex": "1+\\frac{\\cos\\left(\\frac{x}{6.3}+\\frac{y}{6.7}+4.3\\right)}{86}+\\frac{\\cos\\left(\\frac{x}{6.4}-\\frac{y}{3.2}+4.5\\right)}{95}+\\frac{\\cos\\left(-\\frac{x}{3.4}-\\frac{y}{5.4}+3.4\\right)}{82}+\\frac{\\cos\\left(-\\frac{x}{9.7}+\\frac{y}{5.4}+3.5\\right)}{71}+\\frac{\\cos\\left(\\frac{x}{1.2}+\\frac{y}{3.5}+2.2\\right)}{75}+\\frac{\\cos\\left(\\frac{x}{5.6}-\\frac{y}{1.8}+5.2\\right)}{95}+\\frac{\\cos\\left(-\\frac{x}{5.4}-\\frac{y}{3.2}+5.4\\right)}{82}+\\frac{\\cos\\left(-\\frac{x}{8.7}+\\frac{y}{6.5}+7.4\\right)}{71}+\\frac{\\cos\\left(\\frac{x}{9.4}+\\frac{y}{4.2}+2.3\\right)}{94}+\\frac{\\cos\\left(\\frac{x}{2.3}-\\frac{y}{6.4}+0.9\\right)}{63}+\\frac{\\cos\\left(-\\frac{x}{7.5}-\\frac{y}{8.6}+5.7\\right)}{81}+\\frac{\\cos\\left(-\\frac{x}{9.7}+\\frac{y}{10}+3.2\\right)}{105}",
+      "p_der_x": "sin(x * 10 / 63 + y * 10 / 67 + 43 / 10) * -5 / 2709 + sin(x * 5 / 32 + y * -5 / 16 + 9 / 2) * -1 / 608 + sin(x * -5 / 17 + y * -5 / 27 + 17 / 5) * 5 / 1394 + sin(x * -10 / 97 + y * 5 / 27 + 7 / 2) * 10 / 6887 + sin(x * 5 / 6 + y * 2 / 7 + 11 / 5) * -1 / 90 + sin(x * 5 / 28 + y * -5 / 9 + 26 / 5) * -1 / 532 + sin(x * -5 / 27 + y * -5 / 16 + 27 / 5) * 5 / 2214 + sin(x * -10 / 87 + y * 2 / 13 + 37 / 5) * 10 / 6177 + sin(x * 5 / 47 + y * 5 / 21 + 23 / 10) * -5 / 4418 + sin(x * 10 / 23 + y * -5 / 32 + 9 / 10) * -10 / 1449 + sin(x * -2 / 15 + y * -5 / 43 + 57 / 10) * 2 / 1215 + sin(x * -10 / 97 + y / 10 + 16 / 5) * 2 / 2037",
+      "p_der_x_tex": "\\frac{\\sin\\left(\\frac{ x\\cdot10}{63}+\\frac{ y\\cdot10}{67}+\\frac{43}{10}\\right)\\cdot-5}{2709}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{32}+\\frac{ y\\cdot-5}{16}+\\frac{9}{2}\\right)\\cdot-1}{608}+\\frac{\\sin\\left(\\frac{ x\\cdot-5}{17}+\\frac{ y\\cdot-5}{27}+\\frac{17}{5}\\right)\\cdot5}{1394}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{97}+\\frac{ y\\cdot5}{27}+\\frac{7}{2}\\right)\\cdot10}{6887}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{6}+\\frac{ y\\cdot2}{7}+\\frac{11}{5}\\right)\\cdot-1}{90}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{28}+\\frac{ y\\cdot-5}{9}+\\frac{26}{5}\\right)\\cdot-1}{532}+\\frac{\\sin\\left(\\frac{ x\\cdot-5}{27}+\\frac{ y\\cdot-5}{16}+\\frac{27}{5}\\right)\\cdot5}{2214}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{87}+\\frac{ y\\cdot2}{13}+\\frac{37}{5}\\right)\\cdot10}{6177}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{47}+\\frac{ y\\cdot5}{21}+\\frac{23}{10}\\right)\\cdot-5}{4418}+\\frac{\\sin\\left(\\frac{ x\\cdot10}{23}+\\frac{ y\\cdot-5}{32}+\\frac{9}{10}\\right)\\cdot-10}{1449}+\\frac{\\sin\\left(\\frac{ x\\cdot-2}{15}+\\frac{ y\\cdot-5}{43}+\\frac{57}{10}\\right)\\cdot2}{1215}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{97}+\\frac{ y}{10}+\\frac{16}{5}\\right)\\cdot2}{2037}",
+      "p_der_y": "sin(x * 10 / 63 + y * 10 / 67 + 43 / 10) * -5 / 2881 + sin(x * 5 / 32 + y * -5 / 16 + 9 / 2) / 304 + sin(x * -5 / 17 + y * -5 / 27 + 17 / 5) * 5 / 2214 + sin(x * -10 / 97 + y * 5 / 27 + 7 / 2) * -5 / 1917 + sin(x * 5 / 6 + y * 2 / 7 + 11 / 5) * -2 / 525 + sin(x * 5 / 28 + y * -5 / 9 + 26 / 5) / 171 + sin(x * -5 / 27 + y * -5 / 16 + 27 / 5) * 5 / 1312 + sin(x * -10 / 87 + y * 2 / 13 + 37 / 5) * -2 / 923 + sin(x * 5 / 47 + y * 5 / 21 + 23 / 10) * -5 / 1974 + sin(x * 10 / 23 + y * -5 / 32 + 9 / 10) * 5 / 2016 + sin(x * -2 / 15 + y * -5 / 43 + 57 / 10) * 5 / 3483 + sin(x * -10 / 97 + y / 10 + 16 / 5) * -1 / 1050",
+      "p_der_y_tex": "\\frac{\\sin\\left(\\frac{ x\\cdot10}{63}+\\frac{ y\\cdot10}{67}+\\frac{43}{10}\\right)\\cdot-5}{2881}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{32}+\\frac{ y\\cdot-5}{16}+\\frac{9}{2}\\right)}{304}+\\frac{\\sin\\left(\\frac{ x\\cdot-5}{17}+\\frac{ y\\cdot-5}{27}+\\frac{17}{5}\\right)\\cdot5}{2214}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{97}+\\frac{ y\\cdot5}{27}+\\frac{7}{2}\\right)\\cdot-5}{1917}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{6}+\\frac{ y\\cdot2}{7}+\\frac{11}{5}\\right)\\cdot-2}{525}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{28}+\\frac{ y\\cdot-5}{9}+\\frac{26}{5}\\right)}{171}+\\frac{\\sin\\left(\\frac{ x\\cdot-5}{27}+\\frac{ y\\cdot-5}{16}+\\frac{27}{5}\\right)\\cdot5}{1312}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{87}+\\frac{ y\\cdot2}{13}+\\frac{37}{5}\\right)\\cdot-2}{923}+\\frac{\\sin\\left(\\frac{ x\\cdot5}{47}+\\frac{ y\\cdot5}{21}+\\frac{23}{10}\\right)\\cdot-5}{1974}+\\frac{\\sin\\left(\\frac{ x\\cdot10}{23}+\\frac{ y\\cdot-5}{32}+\\frac{9}{10}\\right)\\cdot5}{2016}+\\frac{\\sin\\left(\\frac{ x\\cdot-2}{15}+\\frac{ y\\cdot-5}{43}+\\frac{57}{10}\\right)\\cdot5}{3483}+\\frac{\\sin\\left(\\frac{ x\\cdot-10}{97}+\\frac{ y}{10}+\\frac{16}{5}\\right)\\cdot-1}{1050}",
+      "step_size": 1,
+      "eps": 0.001
+    },
+    {
+      "type": "led",
+      "p1": {
+        "type": 1,
+        "x": 370.2510318821846,
+        "y": 219.920967054945,
+        "exist": true
+      },
+      "p2": {
+        "type": 1,
+        "x": 1533.4524236453497,
+        "y": 937.9465175260342,
+        "exist": true
+      },
+      "p": 60,
+      "symmetric": true
+    },
+    {
+      "type": "cropbox",
+      "p1": {
+        "type": 1,
+        "x": 347.78639218940026,
+        "y": 197.52184723512215,
+        "exist": true
+      },
+      "p2": {
+        "type": 1,
+        "x": 1526.8996492250376,
+        "y": 197.52184723512215,
+        "exist": true
+      },
+      "p3": {
+        "type": 1,
+        "x": 347.78639218940026,
+        "y": 898.8649570887015,
+        "exist": true
+      },
+      "p4": {
+        "type": 1,
+        "x": 1526.8996492250376,
+        "y": 898.8649570887015,
+        "exist": true
+      },
+      "width": 1140,
+      "format": "png"
+    },
+    {
+      "type": "cropbox",
+      "p1": {
+        "type": 1,
+        "x": 362.4755187529593,
+        "y": 210.44068265320084,
+        "exist": true
+      },
+      "p2": {
+        "type": 1,
+        "x": 703.7142665766871,
+        "y": 210.44068265320084,
+        "exist": true
+      },
+      "p3": {
+        "type": 1,
+        "x": 362.4755187529593,
+        "y": 551.6794306532008,
+        "exist": true
+      },
+      "p4": {
+        "type": 1,
+        "x": 703.7142665766871,
+        "y": 551.6794306532008,
+        "exist": true
+      },
+      "width": 500,
+      "format": "png"
+    }
+  ],
+  "mode": "light",
+  "rayDensity_light": 11.136188159988388,
+  "rayDensity_images": 1,
+  "showGrid": false,
+  "grid": false,
+  "lockobjs": false,
+  "gridSize": 20,
+  "observer": null,
+  "origin": {
+    "x": 55.48670487150166,
+    "y": 72.25021015127004
+  },
+  "scale": 0.5648788350735808,
+  "width": 1200,
+  "height": 700,
+  "colorMode": false,
+  "symbolicGrin": false
+}
diff --git a/cn/gallery/branched-flow.png b/cn/gallery/branched-flow.png
diff --git a/cn/gallery/data.json b/cn/gallery/data.json
@@ -360,6 +360,14 @@
         "title": "下蜃景",
         "description": "<p>此为下蜃景效果的定性模拟。将天空的折射率模拟为 \\(n(y)=\\sqrt{1 + (\\frac{y}{h})^2 }\\)，其中 \\(h=600\\) 代表太阳在地面以上的高度。</p>"
       },
+      {
+        "id": "sea-mirage",
+        "contributors": [
+          "chuangyu J"
+        ],
+        "title": "海市蜃楼",
+        "description": "<p>当一个物体在地平线以下时，有时我们仍然能看见其形成的上蜃景。此为这个效果的定性模拟。</p>"
+      },
       {
         "id": "logarithmic-spiral-lens",
         "contributors": [
@@ -383,6 +391,14 @@
         ],
         "title": "麦克斯韦鱼眼透镜",
         "description": "<p>麦克斯韦鱼眼透镜（Maxwell fisheye lens）是一个球形介电材料，折射率为 \\(n(\\rho) = \\frac{n_0}{1+(\\frac{\\rho}{R})^2} \\)，其中 \\(n_0=2\\) 是其球心的折射率，\\(R=100\\) 是球的半径，\\(\\rho\\) 是与球心的距离。 </p><p>上方的介电材料为由 \\(N=20\\) 个同心球组成的麦克斯韦鱼眼透镜，半径 \\(R_i=5(N+1-i)\\)，折射率 \\(n_i = \\frac{n_0}{1+(\\frac{R_i}{R})^2} \\)，其中 \\(i=1,...,N\\)。然而，由于此模拟器会将互相重叠的光学元件的折射率相乘，所以第 \\(i\\) 个同心球形镜的数值折射率为 \\(n_{i}^\\text{numerical}=\\frac{n_i}{\\prod\\limits_{k=i+1}^{N}n_k}\\)。 </p><p>下方的介电材料是折射率为\\(n(r)\\)的渐变折射率材料。 </p>"
+      },
+      {
+        "id": "branched-flow",
+        "contributors": [
+          "Yi-Ting Tu"
+        ],
+        "title": "分支流",
+        "description": "<p>当光线经过折射率在空间上有随机扰动（相关长度远大于光的波长）的介质时，会形成一种类似树状的图案，称为分支流。本模拟使用一些余弦函数的和作为折射率函数来演示这个现象，其中余弦函数的振幅、波数与相位都是类似随机的数。</p>"
       }
     ]
   },

diff --git a/cn/gallery/index.html b/cn/gallery/index.html
@@ -472,6 +472,13 @@ <h2>渐变折射率光学</h2>
     <p class="example-contributor">Stas Fainer</p>
   </div>
 </a>
+<a href="sea-mirage" class="thumbnail example-container">
+  <img src="sea-mirage-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <div class="caption">
+    <p class="example-title">海市蜃楼</p>
+    <p class="example-contributor">chuangyu J</p>
+  </div>
+</a>
 <a href="logarithmic-spiral-lens" class="thumbnail example-container">
   <img src="logarithmic-spiral-lens-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
   <div class="caption">
@@ -493,6 +500,13 @@ <h2>渐变折射率光学</h2>
     <p class="example-contributor">Stas Fainer</p>
   </div>
 </a>
+<a href="branched-flow" class="thumbnail example-container">
+  <img src="branched-flow-thumbnail.png" alt="Thumbnail" class="img-rounded example-image" loading="lazy">
+  <div class="caption">
+    <p class="example-title">分支流</p>
+    <p class="example-contributor">Yi-Ting Tu</p>
+  </div>
+</a>
 
 <br>
 <a name="miscellaneous" class="anchor">&nbsp;</a>
@@ -570,7 +584,7 @@ <h2>其他</h2>
       <span id="language">语言：简体中文</span>
       <span class="caret"></span></button>
       <ul class="dropdown-menu">
-        <li><a href="https://phydemo.app/ray-optics/gallery/">English</a></li><li><a href="https://phydemo.app/ray-optics/pl/gallery/">polski <span style="color:gray">(98% 已翻译)</span></a></li><li><a href="https://phydemo.app/ray-optics/cn/gallery/">简体中文 <span style="color:gray">(100% 已翻译)</span></a></li><li><a href="https://phydemo.app/ray-optics/tw/gallery/">正體中文 <span style="color:gray">(100% 已翻译)</span></a></li>
+        <li><a href="https://phydemo.app/ray-optics/gallery/">English</a></li><li><a href="https://phydemo.app/ray-optics/pl/gallery/">polski <span style="color:gray">(95% 已翻译)</span></a></li><li><a href="https://phydemo.app/ray-optics/cn/gallery/">简体中文 <span style="color:gray">(100% 已翻译)</span></a></li><li><a href="https://phydemo.app/ray-optics/tw/gallery/">正體中文 <span style="color:gray">(100% 已翻译)</span></a></li>
       </ul>
     </div>
   </div>

diff --git a/cn/gallery/sea-mirage-thumbnail.png b/cn/gallery/sea-mirage-thumbnail.png
diff --git a/cn/gallery/sea-mirage.html b/cn/gallery/sea-mirage.html
@@ -0,0 +1,74 @@
+ <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>海市蜃楼 - 射线光学模拟</title>
+<meta property="og:title" content="海市蜃楼 - 射线光学模拟">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://phydemo.app/ray-optics/cn/gallery/sea-mirage">
+<meta property="og:image" content="https://phydemo.app/ray-optics/cn/gallery/sea-mirage-thumbnail.png">
+  <meta property="og:description" content="自由、开源的网页程序，用于建立及模拟二维几何光学场景。">
+<meta property="og:locale" content="zh-CN">
+<link rel="canonical" href="https://phydemo.app/ray-optics/cn/gallery/sea-mirage">
+<link rel="alternate" href="https://phydemo.app/ray-optics/gallery/sea-mirage" hreflang="en">
+<link rel="alternate" href="https://phydemo.app/ray-optics/cn/gallery/sea-mirage" hreflang="zh-CN">
+<link rel="alternate" href="https://phydemo.app/ray-optics/tw/gallery/sea-mirage" hreflang="zh-TW">
+
+<link rel="stylesheet" href="../../thirdparty/bootstrap-3.3.7/bootstrap.min.css">
+<link rel="stylesheet" href="gallery.css">
+<link rel="icon" href="../../icon128.png" type="image/png">
+</head>
+<body>
+<div class="navbar navbar-fixed-top container" style="background-color:white;max-height:90px;overflow:hidden">
+    <a href="https://phydemo.app/ray-optics/cn/" class="navbar-left brand">
+      <img src="../../icon128.png" alt="" style="width:18pt; height:18pt">
+      射线光学模拟
+    </a>
+    <div class="navbar-right">
+
+<span class="navul">
+     <a href="https://phydemo.app/ray-optics/cn/">首页</a>
+     <a href="https://phydemo.app/ray-optics/cn/gallery/" class="active">作品集</a>
+     <a href="https://phydemo.app/ray-optics/about">关于</a>
+</span>
+<span class="github-button-container">
+<a class="github-button" href="https://github.com/ricktu288/ray-optics" data-show-count="true" aria-label="Star ricktu288/ray-optics on GitHub">Star</a>
+</span>
+</div>
+</div>
+<div class="container">
+<center>
+<h1><b><span>海市蜃楼</span></b></h1>
+<p>
+贡献者：chuangyu J
+</p>
+<div class="description">
+<p>当一个物体在地平线以下时，有时我们仍然能看见其形成的上蜃景。此为这个效果的定性模拟。</p>
+</div>
+<p>
+<a href="https://phydemo.app/ray-optics/simulator/?zh-CN#../cn/gallery/sea-mirage" target="_blank" class="btn btn-success btn-lg">在模拟器中打开</a>
+</p>
+<img src="sea-mirage.png" alt="海市蜃楼" style="width:100%">
+</center>
+
+  <div style="float: right; padding-top: 10px;">
+    <div class="dropup">
+      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+      <span id="language">语言：简体中文</span>
+      <span class="caret"></span></button>
+      <ul class="dropdown-menu">
+        <li><a href="https://phydemo.app/ray-optics/gallery/sea-mirage">English</a></li><li><a href="https://phydemo.app/ray-optics/cn/gallery/sea-mirage">简体中文</a></li><li><a href="https://phydemo.app/ray-optics/tw/gallery/sea-mirage">正體中文</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+</div>
+<script src="../../thirdparty/jquery.min.js"></script>
+<script src="../../thirdparty/bootstrap-3.3.7/bootstrap.min.js"></script>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+</body>
+</html>