一块挡板上开两条平行细缝单色光打过去屏幕上映出的不是两条亮线而是一排等间距的明暗条纹。把其中一条缝遮住条纹立刻消失、只剩一团中间亮两边暗的光斑——同一束光只因「知道不知道它走了哪条缝」结果就完全不同。静态图讲不清两件事条纹间距到底由什么决定为什么挡住一条缝条纹就没了所以我把它做成了一个能拖、能遮、能一颗一颗发射光子的网页上半屏是俯视波浪场两条缝当成两个同频点波源实时叠加并着色下半屏是屏上光强曲线 I(y)/I₀ 与光子累积点阵右边一块数值面板把 ΔY 和 y₁/y₂/y₃ 算给你看。几条关键信息先摆出来源码Demo Park 公开仓库 → https://atomgit.com/deli007/demo_park/tree/main/codearts-double-slit-labindex.html可直接下载生成物单个index.html约 28 KB纯前端、零依赖、不联网、不上传全部计算在本地完成本地运行双击文件即可或python -m http.server 8000本地验证1920×1200 视口默认 λ550nm、d0.30mm、L1.50m 下 ΔY2.750mm、y₁/y₂/y₃2.750/5.500/8.250mm自检 8/8 通过连发 3600 颗光子后主峰落在 2.649mm与理论 2.750mm 差 3.7%它算的是理想化双缝。缝是无限细的抽象线只有一个「缝间距 d」没有缝宽对条纹的调制光是标量波、没有偏振也没有单光子探测器的计数噪声模型。下面会如实写它的边界。为什么值得看两条缝的差别全在一个相位差里屏上某点 y 到底亮还是暗只看两条缝过来的光差了多少路程。这个路程差 Δ 写成相位就是φ π·d·y / (λ·L)d 是缝间距、L 是缝到屏的距离两束光叠加后的相对光强是I(y)/I₀ cos²(π·d·y / (λ·L)) 光强 ΔY λ·L / d 条纹间距 yₘ m·λ·L / d 第 m 级亮纹位置y0屏中心处两条缝的路程完全相等φ0cos²1——所以中心永远是亮纹不管参数怎么改相邻亮纹之间相位正好涨 π于是 y 走λL/d就又亮一次这就是 ΔYΔY 和 d 成反比缝拉得越开、条纹越密ΔY 和 λ、L 都成正比波长越长、屏越远条纹越宽。页面里有三个实现决定值得说清楚波浪场和光强曲线共用同一套公式。phaseRad()把物理量统一换算成相位Irel()再取cos²波浪场那两个点源用的也是同一个随距离衰减的相位差。所以上图里加强的方向和下图曲线的高峰位置是对齐的不是两张各画各的图。光子落点是按 I(y) 的累积分布采样出来的。makeSampler()先把曲线在 [-Ymax, Ymax] 上离散成 3000 段的累积分布再反解出落点。所以「一颗一颗发射」不会均匀乱撒而是老老实实按亮纹概率多、暗纹概率少来落——累积久了就还原出条纹。波长到颜色是一条真正的光谱映射。wavelengthToRGB()用分段线性插值算出 RGB紫→蓝→绿→黄→红再乘一个端部衰减因子压暗两端而不是简单按色相环取色。也说几处真实的边界缝是理想细缝。真实双缝实验里缝宽决定了单缝衍射包络——条纹会被一个中间亮、两边递减的包络调制所以远处的条纹会越来越暗。这里干涉项是纯cos²两侧条纹一样高单缝模式下的包络是另一套sinc²公式。光是标量波。没有偏振、没有光子的路径纠缠屏幕亮度是概率意义上的不是单个光子的轨迹。光点累积没有固定种子用的是Math.random()每次连发点阵都不一样但直方图轮廓会稳定收敛到同一条 I(y) 曲线上。任务描述需求是直接粘进码道 Web 输入框的原文如下开发一个单文件 index.html 的「双缝干涉实验室」网页应用纯前端、零依赖、不联网、不上传任何数据。 画面分两块 1) 上方是俯视波浪场两条缝当作两个同频点波源各自向右侧发出圆形波叠加处按瞬时振幅着色波峰偏暖色、波谷偏冷色能直接看出加强区和相消区连成的射线状条纹。 2) 下方是观察屏上的光强分布图横轴是屏上位置 y单位毫米纵轴是相对光强 I/I0曲线随参数实时重画。 物理公式必须真算不要假数据 - 双缝干涉相对光强 I(y)/I0 cos^2(pi * d * y / (lambda * L)) - 条纹间距 deltaY lambda * L / d - 第 m 级亮纹位置 y_m m * lambda * L / d - 波长到颜色用可见光谱近似映射380nm 偏紫450nm 蓝520nm 绿590nm 黄620nm 橙700nm 红 交互 - 波长滑杆 380~750 nm默认 550 - 缝间距滑杆 0.10~1.00 mm默认 0.30 - 屏距离滑杆 0.50~3.00 m默认 1.50 - 每个滑杆旁边配一个数字输入框可以精确输入输入为空、非数字或超出范围时页面上要给出明确中文提示说明合法范围并且保留上一次的有效值继续显示页面不能崩 - 「光点累积」模式可以点「发射 1 颗光子」单发也可以点「连发 300 颗」每颗光子按 I(y) 归一化后的概率密度随机落在屏上累积成点阵条纹提供「清空」按钮把累积点清零 - 「挡住一条缝」开关关掉其中一条缝后波浪场只剩一个波源光强曲线从等间距干涉条纹变成单缝衍射包络中央最亮、两侧迅速衰减用来对比「知道走了哪条缝条纹就没了」再打开恢复干涉条纹 - 右上角数值面板实时显示当前波长对应颜色、条纹间距 deltaY毫米、中央到第 1/2/3 级亮纹的位置 y1/y2/y3毫米、以及当前参数下一条缝与另一条缝到屏中心的光程差 自检放一个「运行自检」按钮点下去跑 8 条数值断言并在页面上逐条显示通过/失败最后显示「自检 8/8 通过」或列出失败条目。断言至少包含I(0) 等于 I0y deltaY/2 处强度约等于 0条纹间距与缝间距成反比条纹间距与波长成正比条纹间距与屏距离成正比650nm 的条纹间距大于 450nm 的屏中心永远是亮纹光子累积直方图的峰位与理论 y_m 的相对误差小于 10%。 界面深色、简洁、字号够大画布随窗口自适应。完成后打开预览让我直接看到运行效果。码道 Web 交回的是单文件index.html自己起了内置预览。下面的数字全部来自我在本机浏览器里对这个文件的重跑不是转述它的总结。它实际长成了什么样三个滑杆各拖一遍ΔY 跟着怎么动面板上默认参数是 λ550nm、d0.30mm、L1.50m它算出的 ΔY2.750mm、y₁/y₂/y₃2.750/5.500/8.250mm屏中心光程差 0.0000mm。为了看清 ΔY 到底由谁决定我把三个滑杆分别扫了一遍每次都只动一个变量固定变动ΔY 实测ΔY × 变量d0.30、L1.50λ450nm2.250 mmΔY/λ 0.00500d0.30、L1.50λ550nm2.750 mmΔY/λ 0.00500d0.30、L1.50λ650nm3.250 mmΔY/λ 0.00500λ550、L1.50d0.10mm8.250 mmΔY·d 0.825λ550、L1.50d0.30mm2.750 mmΔY·d 0.825λ550、L1.50d0.45mm1.833 mmΔY·d 0.825λ550、d0.30L1.00m1.833 mmΔY/L 1.833λ550、d0.30L1.50m2.750 mmΔY/L 1.833λ550、d0.30L3.00m5.500 mmΔY/L 1.833三列比值全是常数说明页面里 ΔY 确实严格正比于 λ 和 L、反比于 d没有掺进别的因子。波长那一档最直观450nm 的蓝光条纹最密650nm 的红光最疏同一个屏幕上条纹宽度差出 44%2.250 → 3.250。光子累积那部分是这篇的主角。连点 12 次「连发 300 颗」累积到 3600 颗屏幕上的点阵是这样的点阵主峰落在2.649mm理论 y₁2.750mm相对偏差3.7%3600 颗里有1542 颗42.8%落在 |y| 1.5ΔY 的范围内也就是被压进了中央那几条亮纹里页面自检用 16000 颗光子重跑同一项峰位 2.605mm、相对误差 5.29%——样本更多时峰位抖动量级就在几个百分点这是蒙特卡洛的噪声底线不是公式不准。把一条缝挡住条纹就没了。打开「挡住一条缝单缝模式」开关后波浪场只剩一个点源向外发散另一条缝被标了红叉屏上曲线从等间距的cos²换成单缝的sinc²包络——中央最高、往两侧迅速衰减而且面板里 ΔY、y₁、y₂、y₃ 四格直接变成「—单缝」。之所以会有这个对比干涉条纹的前提是「不知道光子走的哪条缝」。两条缝都开着时屏上每一点都是两条路径的叠加相位差决定加减一旦遮掉一条只剩一条路径可走就不存在「两条路径差多少」这件事条纹自然消失。这也是量子力学里那句常被引用的话的直观版本。踩坑与边界四处真实的不一致一、590nm 的颜色名字不是需求里说的「黄」。我在需求里点名了「590nm 黄」但页面把色名分成了 7 档紫430、蓝430479、蓝绿480514、绿515559、黄绿560589、橙590~629、红≥630。整套档位里没有单独的「黄」590nm 正好落在「橙」档。实测 590nm 与 620nm 都是「橙」560/570/580nm 都是「黄绿」。它的 RGB 插值其实是按物理分段来的590nm 给的是偏黄橙的 r1、g≈0.85所以问题只出在色名的分档阈值上不是颜色算错了。这提醒我需求里点名的锚点最好连「分几档、档位边界在哪」一起写清楚。二、「必须是数字」这条提示实际操作中走不到。三个输入框都是input typenumber。浏览器不允许把abc这类文本写进 number 输入框的 value——脚本里赋值后读回来已经是空字符串所以页面永远命中「不能为空」那条分支而不是「必须是数字」。我实测给 d 填abc提示是「缝间距 d不能为空请输入 0.1 ~ 1 之间的数字单位 mm。已恢复上次有效值。」和真的留空完全一样。三条校验分支写得很全但其中一条被输入框类型挡在了更前面。三、错误提示 5 秒后自动消失。showErr()里挂了一个 5 秒的setTimeout把提示清空而输入框和滑杆已经立刻回退到旧值。所以填错之后如果没马上看画面上只会看到「数值没变」看不到任何解释——想核对提示原文得赶在 5 秒内或者再填一次。这个是设计选择提示不长期占位但它让「页面给出明确提示」这件事变得有时效性。四、切到单缝模式后数值面板有几格变空。需求写的是「数值面板实时显示 ΔY 和 y₁/y₂/y₃」而单缝模式下这四格显示的是「—单缝」。从物理上讲这是对的单缝没有干涉条纹间距但严格对照需求就是「有 4 格不再是数值」。顺带一个没踩到的点我本来担心「连发 300 颗」点太快会让累积超过上限实测光子有硬上限 5000 颗到了会提示「已达上限 5000 颗请清空后再发射。」不会越界也不会卡死。自检 8/8但自检不能当验收点「运行自检」8 条断言我本机重跑的原文面板逐条列出是自检 8/8 通过 ✅ ✓ 通过I(0) 恒等于 I₀ 屏中心相对光强 cos²(0) 1 ✓ 通过y ΔY/2 处强度 ≈ 0 半条纹间距处相位差为 πcos²(π/2)0I(1.375mm)2.59e-32 ✓ 通过条纹间距与缝间距成反比 ΔY·d 为常数0.825000 0.825000 ✓ 通过条纹间距与波长成正比 ΔY/λ 为常数0.005000000 ≈ 0.005000000 ✓ 通过条纹间距与屏距离成正比 ΔY/L 为常数1.833333 1.833333 ✓ 通过650nm 的条纹间距 450nm 的 ΔY(650nm)3.2500mm ΔY(450nm)2.2500mm ✓ 通过屏中心永远是亮纹 对多组参数 I(0)1含单缝模式 ✓ 通过光子累积峰位与理论 y₁ 误差 10% 实测峰位 2.605mm理论 ΔY2.750mm相对误差 5.29%八条覆盖了「中心恒亮」「半间距处相消」「ΔY 与三个变量的比例关系」「颜色对应的单调性」「光子分布收敛」。但它验的是公式和采样的自洽性不验画面曲线画没画对、纹理对不对、单缝包络长得对不对这些它一句都没查——图上那两种情况图 2 的点阵聚束、图 3 的包络切换是我自己一张张看出来的。失败路径写得不错但提示是短暂出现的三种非法输入的实际提示原文如下输入提示原文缝间距填2缝间距 d超出范围2mm。合法范围0.1 ~ 1 mm已恢复上次有效值。屏距离填0.2屏距离 L超出范围0.2m。合法范围0.5 ~ 3 m已恢复上次有效值。波长留空波长 λ不能为空请输入 380 ~ 750 之间的数字单位 nm。已恢复上次有效值。三种都回退了上一次的有效值550/0.30/1.50页面继续正常显示没有白屏。准备环境进入码道 Web浏览器打开码道 Web 版https://devcloud.cn-north-4.huaweicloud.com/chat?sourcedmzntgwsfsourceaddmzntgwwbwz登录后就能在对话窗口输入需求不需要装软件。码道有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。本地复现生成物只有一个index.html复现没有依赖从 Demo Park 本案例目录下载index.html。双击打开。默认 λ550nm、d0.30mm、L1.50m上半屏立刻能看到两个波源叠出的射线状条纹。想走静态服务也行python -m http.server 8000然后访问http://localhost:8000。把窗口拉到一个较大的视口我用的是 1920×1200两块画布都会跟着窗口自适应重画。下面这些数是我本地逐条跑出来的都能自己复验画布视口 1920×1200 时波浪场画布 1302×552、光强画布 1302×444都随窗口宽度自适应。默认参数ΔY2.750mmy₁2.750mm、y₂5.500mm、y₃8.250mm屏中心光程差 0.0000mm。三组扫描ΔY/λ0.00500450/550/650nm、ΔY·d0.8250.10/0.30/0.45mm、ΔY/L1.8331.00/1.50/3.00m各自都是常数。光子累积3600 颗时主峰 2.649mm理论 2.750mm偏差 3.7%其中 42.8% 落在 |y|1.5ΔY 内。单缝模式波浪场只剩一个波源曲线换成 sinc² 包络ΔY 与 y₁/y₂/y₃ 显示「—单缝」。自检点「运行自检」8/8 通过每条都带实测数字。非法输入越界 / 空值都给出中文提示并回退旧值不白屏。使用码道体会把公式三件套都写进需求。我在需求里同时给了I(y)/I₀、ΔY、yₘ三个公式和各自的单位它交回来的页面就有了「曲线 面板数字 自检断言」三层互相印证的东西。只写「做一个双缝干涉动画」很可能只会得到好看的波纹量不出 ΔY。要求它把关键中间量摆出来。「数值面板实时显示 ΔY 和 y₁/y₂/y₃」这一条回报最大上面那张扫描表我一次都没用计算器——改一个滑杆、读一次面板三次就够看出比例关系。物理量之间的比例关系交给它做成断言。需求里的 8 条自检断言反比、正比、单调、中心恒亮不是随便写的它把「公式对不对」变成了「点一下就能看的勾」我才敢在文章里直接引用后续测量的数字。没写进需求的分档细节它就自己定一套。颜色那条我只给了 6 个锚点380 紫 / 450 蓝 / 520 绿 / 590 黄 / 620 橙 / 700 红没有给分档边界于是它把「黄绿」当一档、让 590nm 落进了「橙」。锚点写清楚档位边界也得写清楚。验收要自己动手。自检 8/8 全绿但它验的是公式自洽没验画面点阵有没有真的聚成条纹、单缝包络有没有真的切过去都是我自己看图确认的。Agent 说完成不算验收。亲手点三下页面打开就能验三下够了看条纹间距把「波长 λ」滑杆从 380 慢慢推到 750盯住面板里的 ΔY 和屏上的曲线。曲线会跟着疏密变化ΔY 从 1.900mm 一路涨到 3.750mm换成推「缝间距 d」方向正好相反——d 越大条纹越密。看条纹消失把「挡住一条缝单缝模式」开关打开上半屏的波浪场会从两个源变成一个源下半屏的曲线从等间距条纹变成中间高两边低的包络面板里 ΔY 那几格变成「—单缝」再关掉开关条纹原样回来。看失败路径在「缝间距 d」的数字框里填2回车必须看到一行中文红字提示、输入框退回 0.30、页面不白屏再把「波长 λ」清空回车提示会换成「不能为空」那一条。直接下载试玩Demo Park 仓库https://atomgit.com/deli007/demo_park本案例目录https://atomgit.com/deli007/demo_park/tree/main/codearts-double-slit-lab总结把双缝干涉做成能拖的页面之后最值得记住的不是那排条纹而是「挡住一条缝」那一下条纹之所以存在靠的是两条路径的相位差——把其中一条断掉屏上每一点就只剩一个来源装不出来干涉。所以条纹不是光照出来的花纹而是「同一个光子有两条路可走」的直接后果ΔY λL/d 只是这件事在几何上的刻度。想接着玩可以试试把缝间距 d 拉到最小0.10mm看条纹宽到只剩一两条、把 L 推到 3m 看条纹被拉得多开或者在单缝模式下把波长换成 380nm看单缝包络的中心亮斑是怎么收窄的。