# 实验二 AI协作记录

使用工具：OpenAI Codex。以下记录保留了关键提问，并把建议与我自己的计算、画面和 Console 核验分开记录。

## AI协作1：Koch 算法方向判断

### 我的目标与初步判断

目标是让逆时针排列的初始三角形向外产生凸起。我先判断：沿逆时针边行走时内部在左侧，因此外部在右侧，`PQ` 应旋转 `-60°`。Level 3 应有 `3×4³=192` 段。

### 关键提示词（原文）

> 初始三角形三个点按逆时针排列。对每条有向边 A 到 B，怎样用向量判断 Koch 突起应旋转 +60° 还是 -60°？请只解释方向判断和验证方法，不给完整程序。

### AI关键建议摘要

AI 建议先用多边形有向面积确认绕行方向，再用二维叉积判断内外侧；逆时针轮廓的内部在边的左侧，所以外凸点应取右转 60°。单独用水平底边可核对新点应落在底边下方。

### 我的测试方法与结果

我打印 Level 1 第一条底边的 `P、R、Q`：`P.y=Q.y=-0.43`，`R.y` 更小，说明突起在三角形外侧。随后逐层检查数组长度，Level 0—4 分别得到 3、12、48、192、768 个起点，与公式一致；`LINE_LOOP` 闭合后没有断线。

### 是否采纳、修正后的结论

采纳“先确认绕行方向再选旋转符号”的方法。最初我只凭截图猜方向，容易在更换顶点顺序后出错；最终在代码注释中明确了“逆时针轮廓对应右转 60°”。

## AI协作2：交互绘图坐标调试

### 具体错误现象

为验证坐标公式，我暂时把 `yNDC` 写成 `2*y/height-1`。点击画布左上角时，点却出现在左下角；缩放页面后若直接使用 CSS 像素，位置也有轻微偏差。

### 我的初步排查

我猜测有两个原因：浏览器坐标 Y 轴向下，而 WebGL NDC 的 Y 轴向上；Canvas 的显示尺寸与内部像素尺寸可能不同。

### 关键提示词（原文）

> WebGL 绘图板点击位置上下颠倒，而且页面缩放后出现偏移。请列出三个最可能原因，并给出不重写程序的逐项验证步骤。

### AI建议及逐项测试

AI 建议依次检查 `getBoundingClientRect()`、CSS 尺寸到 Canvas 像素的比例、Y 轴翻转，并在四角与中心做定位测试。我在 100% 与 125% 页面缩放下分别点击四角附近及中心：加入 `canvas.width/rect.width`、`canvas.height/rect.height` 比例后横向无偏移，恢复 `1-2*y/height` 后上下方向正确。

### 最终原因与修复证据

根因是漏掉 Y 翻转；缩放偏差则来自把 CSS 像素直接当内部像素。修复后，四角点均落在对应角附近；先点线段第一点后切换矩形，状态会重置为“等待点击”，旧第一点未被复用。

## AI协作3：主题化整合方案比较

### 主题与预期效果

我选“节律”，希望画面同时表现周期运动、中心脉冲和对象之间的连接，不只是给 Koch 雪花换颜色。

### 提示词（原文）

> 请用 WebGL 基本图元为“节律”提出两种方案。每种都要复用 Koch 或旋转/鼠标定位中的两项能力，新增至少两个几何组成，并比较顶点量、交互难度和可解释性。

### AI提出的可选方案

方案一“生长花冠”：Koch 外轮廓、递归枝条、端点花蕾，拖动改变生长方向；优点是形象，缺点是还需维护分支递归与较多动态顶点。方案二“节律星轨”：中心 Koch 边界、三层轨道、放射连接线、节点和运动标志点；用脉冲、旋转方向和点击定位交互，图元结构更清楚。

### 方案取舍与理由

采用方案二。它能直接复用 Task B 的 Koch 数据、Task C 的 uniform 旋转和 Task D 的 NDC 定位；新增部分只需 `LINE_LOOP`、`LINES`、`POINTS`，便于解释和核验。我没有采用花冠方案，因为枝条递归会分散本实验对状态与交互的说明重点。

### 实际实现与验证结果

最终新增三条同心轨道、12 条连接线及节点、3 个运动标志点。Level 改变时 Koch 线段数按 4 倍增长；尺度滑块改变整体大小；脉冲滑块改变轨道呼吸幅度；点击画布移动中心并限制在可见范围；开始/暂停和反向按钮均只改变状态，不重复创建动画循环。

## 其他实际使用的 AI 协作

AI 还帮助检查了 WebGL2/GLSL ES 3.00 语法、相对路径和提交目录结构。我保留了每个任务的独立 JS，便于课堂逐项打开和解释；最终又用语法检查与浏览器 Console 核对阻断错误。