AI 协作日志

学号：202312215301009 · 来源：ai-log.md

# 实验二 AI协作记录（代码建议已提供；运行证据待本人核验）

> 重要：以下“实际测试结果”“Console状态”“截图”必须在本人电脑运行后填写。不要将尚未执行的检查写成通过。请保留真实提示词，并根据你实际与 AI 的对话调整记录。

## AI协作1 · Koch算法
### 我的目标与初步判断（本人填写）
- 我原先认为：

### 关键提示词（原文）
- 请检查我上传的实验二说明和ZIP起始项目，完成Task A到E的代码补全，保留原有目录结构，说明需要我实际运行验证的内容。
- （如另有针对 Koch 算法的提问，请粘贴真实原文）

### AI关键建议摘要
- 每条线段先计算三等分点 P、Q，再将向量 Q-P 顺时针旋转 60° 得到向外凸起点 R。
- 递归地将 A→B 替换为 A→P→R→Q→B；Level n 的边数应为 3×4^n。
- 顶点按边界连续顺序输出，使用 LINE_LOOP 绘制封闭边界。

### 我的测试方法与结果（运行后填写）
- 预测的 Level 0—4 线段数：3、12、48、192、768。
- 实际运行结果 / 截图文件名：
- Console 状态：

### 采纳情况及修正结论（本人填写）
- 我采纳或修改了哪些建议？依据是什么？

## AI协作2 · 绘图板调试
### 具体错误现象（运行后填写）
- 实际现象：

### 我的初步排查（本人填写）
- 我首先检查：

### 关键提示词（原文）
- （请记录你实际用于调试的提示词；如尚未单独提问，请运行后再进行并记录）

### AI建议与逐项测试
- 使用 getBoundingClientRect() 把 clientX/clientY 转为 Canvas 像素坐标，再转为 NDC，并翻转 Y 轴。
- 测试点：四角、中心、窗口缩放、工具切换时取消未完成的第一次点击、清空后重画。
- 实际测试结果 / Console 状态：

### 最终原因及修复证据（本人填写）
- 修复前现象：
- 修复后现象 / 截图：

## AI协作3 · 主题整合
### 主题及预期效果
- 当前代码默认主题为“绽放”；可以修改主题文字及设计说明，建议结合本人实际修改后的作品填写。

### 两个方案的AI提示词（原文）
- （粘贴真实提示词；如尚未询问方案比较，请勿声称已完成）

### 方案比较、取舍理由（本人填写）
- 方案一：Koch 边界 + 外环 + 放射连接线/节点。
- 方案二（请根据实际讨论补充）：
- 取舍理由：

### 实际实现、测试与结果（运行后填写）
- 新增几何组成：外环、放射连接线、节点。
- 交互：缩放滑块、点击画布移动中心、旋转开始/暂停、层次滑块。
- 实际验证的变化 / 截图文件名：
- Console 状态：

## 其他AI使用（如有）
- 工具、提示词及本人核验记录：
AI协作1：Koch算法
我的目标与初步判断
本次任务的目标是理解 Koch 雪花的生成规则，并通过 JavaScript 计算顶点，再使用 WebGL 绘制雪花边界。
我的初步判断是：每条线段需要分成三等份，并在中间部分构造一个向外凸出的等边三角形。每次细分后，一条线段会变成四条线段，因此随着层数增加，线段数量会不断增加。
关键提示词（保留原文）
“如何理解 Koch 雪花算法中线段三等分和旋转 ±60° 的计算？为什么 Level 3 应该有 192 条线段？如何检查凸起方向是否正确？”
AI关键建议摘要
AI 建议先理解单条线段的替换过程，再扩展到等边三角形的三条边。设线段端点为 A、B，先计算三等分点 P、Q，再通过旋转向量计算凸起顶点 R，最后按 A、P、R、Q、B 的顺序组织顶点。
AI 还指出，每次细分都会使线段数量变为原来的 4 倍，因此 Level 为 n 时，线段总数为 3 × 4ⁿ。计算凸起方向时，需要结合初始三角形的顶点顺序和边的方向判断。
我的测试方法与结果
测试方法：在浏览器中打开 Task B，分别选择 Level 0、1、2、3、4，观察雪花的形状，并核对页面显示的线段数量。
Level 0：线段数为3。
Level 1：线段数为12。
Level 2：线段数为48。
Level 3：线段数为192。
Level 4：线段数为768。
采纳情况及修正结论
我理解了 Koch 雪花中一条线段替换为四条线段的原因。通过对不同层数的图案和线段数量进行核对，可以判断递归终止条件及顶点生成顺序是否合理。
最终结论：线段数量与预期一致，图案连续且凸起方向正确

AI协作2：交互绘图调试
具体错误现象
Task D 需要通过鼠标点击创建点、线段和矩形，并在同一个 Canvas 中保留已经创建的图形。
重点检查的问题包括：鼠标点击位置是否准确、矩形在不同对角点击顺序下是否正确、切换工具后是否清除了未完成的绘图状态，以及清空操作是否有效。
实际观察到的现象：鼠标坐标偏移
我的初步排查
我准备从以下方面排查问题：
检查鼠标坐标是否使用 getBoundingClientRect() 转换。
检查 Y 轴是否正确翻转为 WebGL 的坐标方向。
检查第一次点击保存的 firstPoint 是否在第二次点击后清除。
检查切换工具或清空画布时，未完成的绘图状态是否重置。
检查绘制新图形时，JavaScript 中保存的已有对象是否仍然保留。
关键提示词（保留原文）
“请帮我检查 WebGL 交互绘图板中可能出现的鼠标坐标偏移、矩形方向错误和两次点击状态混乱问题。请分析可能原因，并给出逐项验证的方法，不要直接重写整个程序。”
AI建议与逐项测试
AI 建议优先检查 Canvas 的显示尺寸与实际像素尺寸是否一致，并使用 getBoundingClientRect() 将浏览器窗口坐标转换为 Canvas 坐标，再转换为 NDC 坐标。
对于线段和矩形，建议通过状态变量保存第一次点击的位置，在第二次点击时生成完整图形，并及时清除临时状态。切换工具和清空画布时，也应取消尚未完成的绘图操作。
实际测试记录：
点的位置测试：正常。
线段与矩形测试：正常。
工具切换测试：正常切换。
清空测试：正常，旧图消失。

AI协作3：主题整合
主题及预期效果
我计划将 Task B 的 Koch 雪花算法与 Task C 的旋转控制结合起来，设计一个具有几何秩序感的 WebGL 交互图案。
主题：“秩序”。
预期效果：通过规则化的几何结构表现图案的重复与对称，并通过交互操作观察图案位置、尺度或旋转状态的变化。
两个方案的AI提示词（保留原文）
“请为计算机图形学实验的 WebGL 主题作品提出两种设计方案。要求复用 Koch 雪花算法、旋转动画或鼠标交互绘图中的至少两项能力，新增至少两个由 WebGL 绘制的几何组成部分，并设计至少两种有效交互。请比较图元数量、实现难度和可解释性。”
AI提出的可选方案
方案一：几何秩序图案
以 Koch 雪花为主体，增加外环和从中心向外延伸的连接线，并在连接线端点添加节点。使用旋转控件改变整体方向，使用滑块控制图案尺度。
优点：能够复用已有的雪花算法和旋转控制，几何构成容易解释。
需要注意：外环、连接线和节点必须由 WebGL 实际绘制，不能只使用 HTML 或 CSS 模拟。
方案二：交互式生长图案
以递归几何图案为基础，增加分支和端点标记，通过鼠标点击改变图案中心，并通过参数控件控制图案展开程度。
优点：主题表达直观，交互变化明显。
需要注意：需要额外维护分支顶点数据和鼠标交互状态，调试工作相对更多。
方案比较、取舍理由
我选择方案一，主要考虑了现有代码的复用程度、几何组成的可解释性以及交互实现难度。
没有选择另一方案的原因是：实现时间困难
实际实现、测试与结果
实际完成的几何组成部分：圆，线，雪花。
实际完成的交互方式：。
测试方法：先观察作品初始状态，再逐一操作交互控件，比较操作前后的图案变化。
实际测试结果：正常运行。
最终结论：符合实验要求。