水波干涉互动课件

这个程序要实现的是沪科版选择性必修一第二章第四节机械波的干涉和衍射中的图 3–28。如下图所示。

图 3–28 两列相同波相遇

做出的成品如下所示：

核心代码解读

这个程序主要要解决三个问题：表示波峰、谷的圆的绘制，表示振动加强、减弱区域的双曲线的绘制，干涉图样的绘制，其中前两个问题主要涉及的是几何知识。

一、表示波峰、谷的圆的绘制

波速是由介质决定的，因此本程序的波速 v = 100（像素/秒）保持不变，而两列波的频率可以改变，可由 λ = \(\dfrac{v}{f}\) 求得两列波的波长。在动画代码中由 r = vt 求出波前圆的半径，缩小 λ/4 波长后绘制出最外层的波峰圆，颜色为黑色。然后持续缩小 λ/4，依次绘制波谷（蓝色）、波峰（黑色）……。代码如下：

// 计算波峰和波谷
function calculateWaveCrestsAndTroughs(time, speed, wavelength, phaseOffset) {
    if (time <= 0) {
        return [];
    }
    const distance = speed * time;
    const phaseShift = phaseOffset * wavelength / (2 * Math.PI);
    const waveCircles = [];

    let i = 0;
    while (true) {
        // 波峰比波前小四分之一波长
        const rawRadius = distance + phaseShift - i * (wavelength / 2) - wavelength / 4;

        if (rawRadius <= 0) {
            break;
        }

        if (rawRadius < params.maxRadius) {
            const type = i % 2 === 0 ? 'crest' : 'trough';
            waveCircles.push({
                radius: rawRadius,
                type: type
            });
        }

        i++;
    }

    return waveCircles;
}

二、表示振动加强、减弱区域的双曲线的绘制

写起来比较复杂，让 AI 帮我写吧：

1．核心算法：从物理条件到几何图形

代码严格遵循了干涉加强/减弱的物理定义来生成曲线，而不是简单地画圆找交点。

物理条件（体现在 drawSingleHyperbola 函数中）：

加强（实线）：光程差 Δd = nλ – \(\dfrac{{\Delta \varphi }}{{2\pi }}\) λ
减弱（虚线）：光程差 Δd = (n + 0.5)λ – \(\dfrac{{\Delta \varphi }}{{2\pi }}\) λ
代码实现：通过 phaseOffsetInWavelengths 计算相位差引起的偏移，然后分别计算出实线和虚线对应的目标路程差 pathDiff。

2．关键函数：getPointOnHyperbola 的作用

这是一个通用的数学工具函数，负责生成标准双曲线上的点，并将其旋转平移到实际位置。

处理流程：

生成：使用双曲函数（Math.cosh 和 Math.sinh）生成一个以原点为中心、焦点在 X 轴上的标准双曲线上的点 (x0, y0)。
旋转：计算两个实际波源连线的角度，通过旋转变换将标准双曲线旋转到与实际焦点连线一致的方向。
平移：将旋转后的双曲线平移到两个焦点的中心点位置。

3．绘制逻辑：drawHyperbola 的执行步骤

第一步：参数计算

计算波长 wavelength。
计算相位差 phaseDiff（从滑块值转换为弧度）。
计算相位差对应的距离偏移量 phaseOffsetInWavelengths（核心！这体现了你之前问的“相位差导致平移”的原理）。

第二步：循环绘制

绘制加强线：循环 n 从 -maxN 到 maxN，调用 drawSingleHyperbola(n, true) 绘制实线。
绘制减弱线：再次循环，调用 drawSingleHyperbola(n, false) 绘制虚线。

第三步：特殊处理：中垂线（n = 0且无相位差）

当计算出的路程差 pathDiff 非常接近 0 时（对应 n = 0 且相位差也为 0 的情况），双曲线会退化为一条直线——中垂线。

代码会计算焦点连线的垂直向量，然后绘制一条长长的直线来代替双曲线，避免了 a = 0 时双曲线计算失效的问题。

第四步：左右分支的处理

代码通过判断 pathDiff 的符号来决定绘制哪一侧的双曲线：

pathDiff > 0：表示 d1 > d2，绘制靠近波源 1（右侧）的那一支。
pathDiff < 0：表示 d1 < d2，通过手动设置 x0 = -a * Math.cosh(t) 来绘制靠近波源 2（左侧）的那一支。

三、干涉图样的绘制

……

完整代码

发布时间：2026/3/7 下午10:36:59 阅读次数：15