作品说明

《光镜实验室》是一个围绕初中物理「凸透镜成像规律」的交互式虚拟实验作品。它不止于演示现象，而是提供一条完整的科学探究路径：动手操作 → 实时测量 → 记录数据 → 拟合图像 → 归纳规律。

一、设计思路

课本上凸透镜成像的规律通常以五条结论的形式出现，学生容易「背下来但想不通」。本作品把抽象结论还原为可操作、可测量的实验过程，让规律由学生自己从数据中看出来。

• 可操作：物体可直接拖动，物距、物高随之改变；焦距、光屏位置连续可调。
• 可测量：画面实时给出物距、像距、放大率与标尺读数，而非只给定性描述。
• 可记录：一键把当前状态记入实验记录本，支持逐条删除与导出 CSV。
• 可归纳：自动以 1/u 为横轴、1/v 为纵轴描点并做最小二乘拟合，学生可亲眼看到数据点落在一条斜率约 −1 的直线上，从而「发现」成像公式。
• 可检验：六个挑战任务覆盖照相机、投影仪、放大镜三类应用与两个临界状态，系统自动判定是否达成。

二、科学性的保证

作品中所有像的位置与大小都不是预设动画，而是由成像公式实时解算，并与三条特殊光线的几何作图结果互相印证。

1. 成像公式

1/u + 1/v = 1/f        ⇒   v = f·u / (u − f)
放大率 m = |v/u|        像高 h′ = −h·v/u

2. 三种情形的统一处理

• u > f：v > 0，实像，倒立，位于透镜另一侧；
• u = f：出射光彼此平行，系统明确提示「不成像」，而不是给出错误读数；
• u < f：v < 0，虚像，正立放大，折射光发散，另以虚线绘制反向延长线。

3. 光线几何的一致性校验

以「平行主光轴」与「过光心」两条光线为例：前者折射后斜率为 −h/f，后者斜率为 −h/u。联立两条直线方程：

h − (h/f)·x = −(h/u)·x
⇒ 1 = x·(1/f − 1/u)
⇒ x = f·u/(u − f) = v

交点横坐标恰好等于公式解出的像距，说明画面上的光线交点与公式读数严格一致，不存在「图对不上数」的情况。

4. 光屏的物理意义

开启光屏后，屏上光斑的清晰度随光屏与像点的偏离程度变化：只有移动到真实像距附近才会变清晰；虚像情形下则明确提示「虚像无法成在光屏上」，避免形成错误概念。

三、技术实现

• 渲染：Canvas 2D，按 devicePixelRatio 适配高分屏，避免文字与光线发虚。
• 动画：目标状态与渲染状态分离，每帧做线性插值，参数变化时光线与像平滑过渡而非瞬间跳变。
• 取景：根据当前物距、像距、焦距自动计算缩放与中心，保证物体、像、焦点始终在画面内。
• 交互：使用 Pointer Events，同时支持鼠标与触屏；拖动时通过 setPointerCapture 防止指针移出画布导致状态卡死。
• 存储：实验数据与挑战进度默认保存在浏览器 localStorage，离线可用；云端保存为可选增强。
• 后端：PHP 仅负责页面装配与数据保存接口，所有数值字段经过类型与范围校验，文件名由服务端生成。
• 兼容性：不依赖任何第三方框架、外部字体或 CDN，Chrome / Edge / Firefox 均可直接运行。

四、AI 工具的使用与自主改进

本作品在创作过程中使用 WorkBuddy 辅助完成结构设计、代码编写与文案起草，并在其生成结果的基础上进行了人工推导与实质性修改：

1. 物理模型的重推导：AI 初稿只处理实像。人工补充了 u = f 临界与 u < f 虚像两种情形，并推导出反向延长线的斜率同样等于 −h/f，确保虚像位置与折射光线严格共线。
2. 从「演示」改为「探究」：AI 初稿只有实时演示。人工提出并实现了实验记录本、1/u − 1/v 散点图与最小二乘拟合，使作品具备完整的数据探究闭环。
3. 光屏交互：人工增加光屏可拖动、清晰度随偏离程度变化的设计，用于区分实像与虚像的承接条件。
4. 挑战任务与容差：人工设计六个任务，并为「等大」「放大 2 倍」等定量目标设定合理容差，避免浮点误差造成误判。
5. 离线可用与接口安全：人工决定核心逻辑不依赖后端，并为云端保存接口补充了字段校验、长度限制与文件名服务端生成。

五、使用方法

1. 在「实验参数」中设定焦距，或直接用滑块/拖动物体改变物距。
2. 观察三条特殊光线的走向与像的位置、正倒、大小变化。
3. 勾选「放置光屏」，拖动光屏寻找最清晰的位置，体会实像的承接条件。
4. 点击「记录数据」保存若干组不同物距下的测量结果。
5. 在「数据与规律」区观察散点与拟合直线，尝试自己写出成像公式。
6. 完成「挑战任务」中的六项，检验对规律的掌握程度。

六、文件结构

ai.chaotan.icu/
├── index.php            实验台主页面
├── about.php            本说明页
├── api.php              实验数据保存 / 读取接口
├── assets/
│   ├── css/style.css    视觉样式
│   └── js/
│       ├── lens.js      成像物理引擎与 Canvas 渲染
│       └── lab.js       交互逻辑、数据记录、拟合与挑战判定
└── data/                云端保存的实验数据（JSON）