AI 协作日志

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

# \# 实验二 AI协作记录

# \## AI协作1 · Koch算法

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

# 目标：搞清楚Koch雪花细分时，向量应该旋转+60°还是‑60°，保证三角形向外凸起而不是向内凹陷；同时验证公式 $3\\times4^{\\text{Level}}$ 的线段数量是否正确。

# 初步判断：基础三角形顶点是逆时针顺序，线段沿着逆时针方向行走，向量PQ逆时针旋转60°可以得到向外的顶点R；如果符号写反，雪花会向内凹。Level每加1，每条线段分裂为4段，线段总数按4倍增长。

# 

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

# > WebGL实现Koch雪花，基础三角形顶点逆时针排布，线段A到B，把PQ向量旋转多少度才能让凸起向外？给出旋转矩阵。另外为什么线段总数是3\*4^n，怎么验证方向是否正确？

# 

# \### AI关键建议摘要

# 1\. 轮廓逆时针绕行，PQ向量\*\*逆时针旋转60°\*\*得到向外凸起顶点R；$\\cos60^\\circ=0.5$，$\\sin60^\\circ=\\sqrt{3}/2$；旋转公式：

# $r\_x = p\_x + c\\cdot dx - s\\cdot dy$

# $r\_y = p\_y + s\\cdot dx + c\\cdot dy$

# 2\. 若sin项取负，会向内凹陷；可以拿一条水平线段做最小单元测试观察R点y坐标正负。

# 3\. Level0共3条边；每一条线段迭代后生成4条新线段，递推得到线段数 $3\\times4^n$。

# 

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

# 1\. 单元测试：取水平线段A(-0.6,0)、B(0.6,0)，level=1，打印计算出R点坐标。

# 2\. 使用正确旋转公式，R点y>0，向上凸起，雪花向外；人为把sin前面符号改为负，R点y<0，图案向内凹。

# 3\. 分别运行Level0‑4，统计页面显示线段数：3、12、48、192、768，与理论 $3\\times4^n$ 完全吻合。

# 

# \### 采纳情况及修正结论

# 采纳逆时针旋转60°的实现；确认`subdivideSegment`递归终止条件、递归调用顺序。

# 修正：一开始草稿中R直接取PQ中点，这是错误；改为旋转计算得到R。最终不同层级雪花形态正常，没有出现向内凹陷。

# 

# \## AI协作2 · 绘图板调试

# \### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）

# 人为制造bug：把NDC转换中Y轴翻转代码注释掉。现象：鼠标点击画布上方，绘制的图形出现在画布下方；点击下方，图形出现在上方；X方向坐标正常，Y轴完全颠倒。测试完成后恢复原始正确代码。

# 

# \### 我的初步排查

# 猜想1：没有调用`getBoundingClientRect()`获取canvas在页面上的位置；

# 猜想2：没有区分canvas内部像素宽高和CSS渲染尺寸；

# 猜想3：NDC转换缺少Y轴翻转步骤，WebGL NDC坐标系Y向上，浏览器屏幕Y向下。

# 

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

# > WebGL2鼠标点击绘图，Y轴坐标颠倒，点击位置和绘制位置不匹配，请给出排查步骤与完整NDC转换代码。

# 

# \### AI建议与逐项测试

# 1\. 使用`getBoundingClientRect()`拿到canvas布局位置。✅测试：去掉该函数，点击位置整体偏移。

# 2\. 区分canvas.width/height（绘图缓冲区像素）与rect.width/height（CSS显示大小），做缩放换算。✅测试：不做换算，浏览器缩放页面时点击错位。

# 3\. Y轴翻转公式：`yNDC = 1 - 2 \* yCanvas / canvas.height`。✅测试：注释掉翻转，重现Y颠倒bug；恢复后位置正确。

# 

# \### 最终原因及修复证据

# 根源：浏览器屏幕Y轴向下，WebGL NDC Y轴向上，缺少Y坐标翻转转换；同时没有处理canvas布局与内部像素的换算。

# 修复证据：画布四角点击绘制点，绘制点和鼠标点击位置完全对齐；浏览器缩放页面后点击依然准确。

# 

# \## AI协作3 · 主题整合

# \### 主题及预期效果

# 主题：\*\*绽放\*\*

# 预期效果：复用Task‑B的Koch雪花分形、Task‑C旋转动画；新增至少两套独立几何图形；提供两种交互，其中一种为新增交互。整体模拟花朵向外绽放舒展的视觉效果。

# 

# \### 两个方案的AI提示词（原文）

# > WebGL2主题作品，主题“绽放”，复用Koch雪花分形和rAF旋转动画，请给出两套可行实现方案；对比两套方案的图元数量、交互难度、性能、可解释性。

# 

# \### 方案比较、取舍理由

# \*\*方案1（最终选用）\*\*

# \- 几何：Koch雪花主体 + 外圈装饰圆环 + 放射辐条 + 辐条端点节点圆点；

# \- 交互：滑块控制雪花层级、整体缩放；按钮启停旋转；\*\*点击画布移动图案中心（新增交互）\*\*；

# \- 图元：`LINE\_LOOP`、`LINES`、`POINTS`；图元数量适中；

# \- 优点：性能稳定，逻辑清晰，每一部分几何独立可观察，便于调试验证。

# 

# \*\*方案2（拒绝）\*\*

# \- 几何：多层嵌套不同大小Koch雪花叠加形成绽放效果；

# \- 交互：鼠标滚轮修改嵌套层数；

# \- 缺点：分形顶点指数爆炸，层级稍微增大顶点数量暴涨，浏览器卡顿；图形堆叠在一起，难以区分各个组成部分，可解释性差。

# 

# 取舍：选用方案1。性能可控，新增几何部件明确，新增交互（点击移动中心）直观，满足实验E全部要求；舍弃方案2，规避指数级性能问题。

# 

# \### 实际实现、测试与结果

# 实现：Koch雪花作为花朵主体，绘制外圈圆环、12根放射辐条、辐条端点节点圆点。

# 交互：滑块改变Koch层级与缩放；按钮控制旋转启停；点击画布移动图案中心点。

# 测试：切换level观察分形变化；启停旋转；点击画布不同位置图案跟随移动；复位按钮回到初始状态。初始画面与点击移动后画面对比效果符合“绽放”主题预期。



# \## 挑战任务：对象级编辑（选做加分）

# 1\. 实现功能：AABB包围盒对象拾取选中，选中对象高亮；修改选中对象颜色；撤销上一个图形对象。

# 2\. 关键代码位置：task‑d.js中selectedIndex状态、hitTest()命中检测函数、undo按钮事件、render中高亮渲染逻辑。

# 3\. 实现约束：未使用离屏颜色ID拾取，使用JS层包围盒检测；对象元数据保存在objects数组，GPU仅负责渲染顶点。

# 4\. 测试结果：点、线、矩形均可被选中；颜色修改生效；撤销、清空、切换工具逻辑正常。



# \## 其他AI使用（若有）

# 无其他AI协作。

# > 工具：豆包；仅用于方案讨论、bug排查；所有核心逻辑经过手动阅读、单元测试验证，关键代码手动修改，没有直接复制完整程序。