AI 协作日志

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

# 实验二 AI协作记录

> 工具：豆包（Doubao）。以下三次协作均为先自行预测/猜想，再向 AI 提问，最后用浏览器实际运行验证。

## AI协作1 · Koch算法

### 我的目标与初步判断
目标：把一条线段 A→B 替换成 A→P→R→Q→B 四段时，R 点要让雪花向外凸起。
我的初步判断：P、Q 是三等分点没问题；R 应该在 PQ 这一段的外侧。初始三角形是逆时针排列的三个顶点（左下→右下→上方），沿边逆时针走时图形内部在左边，所以外凸应该在右边，即把向量 Q→P 顺时针转 60°。但我不确定旋转方向该用 +60° 还是 -60°，也不确定是绕 P 还是绕 Q 转。

### 关键提示词（原文）
> "Koch 雪花里，已知 P、Q 是线段 AB 的两个三等分点，要在 PQ 上向外作等边三角形得到 R。初始三角形三个顶点是逆时针排列的。请告诉我：向量 Q-P 应该旋转 +60° 还是 -60°？R = P + 旋转后的向量，这个对吗？怎么用一条水平线段先测试凸起方向？"

### AI关键建议摘要
AI 给出：逆时针绕行时外凸在右侧，应把向量 `Q-P` 旋转 **-60°**（顺时针/右转），公式 `R = P + Rot(-60°)(Q-P)`，其中 `x'=dx·cos(-60°)-dy·sin(-60°)=dx·0.5+dy·√3/2`，`y'=dx·sin(-60°)+dy·cos(-60°)=-dx·√3/2+dy·0.5`。建议先用底边 A=(-1,0)→B=(1,0) 测试，若 R 的 y 为负就说明向外凸（底边外侧朝下）。

### 我的测试方法与结果
我先在纸上算底边 A=(-0.82,-0.43)→B=(0.82,-0.43)：
- P=(-0.273,-0.43)，Q=(0.273,-0.43)，Q-P=(0.547,0)
- 用 -60° 旋转：R=P+(0.273,-0.473)=(0,-0.903)，R 在底边下方 ✅（外侧朝下）
- 又试了 +60°：R=(0,0.043)，会凸到三角形内部 ❌
然后在浏览器跑 Level 1，看到三条边都向外凸起，轮廓是标准六角星；再切到 Level 2、3、4，线段数分别显示 12、48、192、768，与 `3×4^n` 完全一致。

### 采纳情况及修正结论
采纳 AI 的 -60° 方案。我原先猜"绕 P 转"是对的，但方向记反了——一开始写成 `+60°`，跑出来雪花向内凹，对照 AI 的提示改成 `-60°` 后正常。结论：**逆时针三角形 → 右转(-60°)外凸；R = P + Rot(-60°)(Q-P)**。

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

### 具体错误现象
按课堂公式写好坐标转换后，我故意先把 Y 轴翻转那行删掉（即 `yNDC = 2*yCanvas/canvas.height - 1`，不翻转），观察现象：在 Canvas 上方点击画点，点却出现在下方；画矩形时上下位置完全反了。

### 我的初步排查
我猜两个可能：① `getBoundingClientRect()` 拿到的矩形尺寸和 `canvas.width` 不一致；② Y 轴没翻转。先打印 `rect.width` 和 `canvas.width`，发现两者不同（CSS 缩放了画布），所以必须用 `(event.clientX-rect.left)*canvas.width/rect.width` 换算像素，不能直接用 clientX。

### 关键提示词（原文）
> "WebGL 绘图板，我点击 Canvas 上方画点，点却出现在下方。课堂给的公式是 xNDC=2*xCanvas/canvas.width-1, yNDC=1-2*yCanvas/canvas.height。我怀疑是 Y 轴方向问题，但不确定为什么要写 1-2*yCanvas/... 而不是直接 2*yCanvas/...。请解释原因，并告诉我点击位置偏移还可能有哪些原因。"

### AI建议与逐项测试
AI 解释：Canvas 2D 的原点在左上角、Y 向下；而 WebGL NDC 原点在中心、Y 向上，所以必须 `yNDC = 1 - 2*yCanvas/height` 翻转。还提醒要处理 CSS 尺寸与画布像素尺寸不一致的问题。
逐项测试：
1. 恢复 `yNDC=1-2*yCanvas/height` 后，上方点击出现在上方 ✅
2. 打印 rect.width vs canvas.width，发现确实不等，加入比例换算后，浏览器窗口缩放后再点中心仍准确 ✅
3. 第一次点击线段后切换为矩形，再点一次——旧的 firstPoint 没被清掉，画出了错误图形；在工具 `change` 事件里加 `firstPoint=null` 后正常 ✅

### 最终原因及修复证据
两个原因：① Y 轴未翻转导致上下镜像；② CSS 缩放导致像素换算偏差。修复后在 Canvas 四角分别画点，位置与点击处一致；先画点、线、矩形再切换工具，旧对象保留、新工具状态干净；点清空后全部消失。

## AI协作3 · 主题整合

### 主题及预期效果
主题选"绽放"：中间是旋转的 Koch 花芯，外面要有花瓣和花蕊的感觉，能交互。

### 两个方案的AI提示词（原文）
> "我要用 WebGL 基本图元（POINTS/LINES/LINE_LOOP）做一个'绽放'主题作品，复用 Koch 雪花和旋转动画。请给我两种几何方案：方案A用外环+放射线，方案B用多层嵌套三角形。比较两种方案的图元数量、交互难度和可解释性。"

### AI提出的可选方案
- 方案A：中心 Koch 花芯 + 外层虚线圆环（POINTS 沿圆周）+ 12 条放射花瓣线 + 端点花蕊节点（POINTS）。图元少、颜色层次清楚、易解释。
- 方案B：3~4 层大小递增的 Koch 三角形嵌套，每层独立旋转。视觉更华丽但顶点数随层数暴涨（Level 4 单环就 768 点），且嵌套层次关系不好向老师解释。

### 方案取舍与理由
选方案A。理由：图元数量可控（外环 60 点 + 12 条线 + 12 节点），性能无压力；两个新增几何组成（虚线环、放射花瓣+节点）一眼能看出是"花瓣轮廓"和"花蕊"，与主题对应；交互也更好做（点击移动花芯中心、滑块调层数和尺度）。放弃方案B，因为多层嵌套在 NDC 下容易互相裁切，且顶点数翻倍不利于课堂演示。

### 实际实现、测试与结果
实际实现：Koch 花芯（复用 Task B）+ 旋转（复用 Task C）+ 外层虚线环 + 放射花瓣线与花蕊节点；新增交互为点击画布移动花芯中心（复用 Task D 的坐标转换）和开始/暂停旋转按钮。测试：拖动层数滑块 Level 0→4，花芯变复杂但外环和花瓣不动；点击画布不同位置，整朵花平移到该位置；开始/暂停旋转正常。

## 其他AI使用
- 请 AI 帮忙检查 Task C 中 `requestAnimationFrame` 是否会重复启动多个循环，确认只在脚本末尾启动一次、事件回调里不再调用 rAF。
- 请 AI 确认 Task D 矩形四角用 `LINE_LOOP` 时顶点顺序应为逆时针（左下→右下→右上→左上），已核对正确。