เดโมนี้วัดอะไร?
หลายคนคิดว่า “ให้ AI เขียนโค้ด SVG” คือวัดความจำ syntax แต่เทสต์นี้ตั้งใจวัดอีกอย่าง: การให้เหตุผลเชิงโครงสร้าง (structural/spatial reasoning) ผ่านการประกอบการเคลื่อนที่หลายชั้นโดยไม่ใช้ JavaScript มาช่วยคำนวณเฟรม
โจทย์: Nested orbital motion (Sun → Earth → Moon)
- Earth ต้องโคจรรอบ Sun
- Moon ต้องโคจรรอบ Earth (และต้อง “ติดไปกับ” การโคจรของโลก)
- ข้อกำหนดสำคัญ: ทำด้วย SVG/SMIL (เช่น
<animateTransform>) โดยไม่ให้ใช้ JS วาดตำแหน่งทีละเฟรม
คลิปเดโม
ทำไมมันถึงเป็น spatial reasoning test ที่ดี
หัวใจอยู่ที่คำว่า coordinate frames / reference frames:
- โลกอยู่ใน “กรอบพิกัดของดวงอาทิตย์” (Sun frame)
- ดวงจันทร์อยู่ใน “กรอบพิกัดของโลก” (Earth frame)
- การเคลื่อนที่ของดวงจันทร์ที่เห็นจริง ๆ คือผลจาก transform ที่ compose กันอย่างถูกลำดับ (parent → child)
โมเดลที่ “เดาโค้ด” มักพลาดตรงนี้: มันอาจทำให้มีวงกลมหมุน ๆ เหมือนถูก แต่พอคุณดูด้วยตา คุณจะเห็นทันทีว่า ศูนย์กลางผิด หรือ ลำดับการแปลงพิกัดผิด
Failure modes ที่เจอบ่อย (ดูออกใน 3 วินาที)
- Moon ไปโคจรรอบ Sun โดยไม่ตั้งใจ — เกิดจากการวาง child motion นอก Earth frame
- ศูนย์กลางเพี้ยน — หมุนถูกแต่รัศมี/ตำแหน่งหลุด เพราะลำดับ rotate/translate ไม่สอดคล้องกับสิ่งที่ต้องการ
- ภาพ “ดูหมุน” แต่ไม่ “ดูโคจร” — เหมือนแค่หมุนวัตถุรอบตัวเอง ไม่ได้หมุนรอบจุดอ้างอิงที่ถูก
- แก้ด้วย JS เพื่อให้ผ่านตา — รันได้สวย แต่ไม่ได้ตอบโจทย์เรื่อง structural reasoning
Rubric แบบง่าย (ผ่าน/ไม่ผ่าน)
ใช้ 4 ข้อนี้เทียบโมเดล/เทียบ implementation แบบแฟร์ ๆ:
- R1: Nested frames ถูกต้อง — Moon motion ต้องอยู่ภายใต้ Earth system จริง
- R2: Center-of-rotation ถูก — ดูแล้ว “อ่านออก” ว่า Moon หมุนรอบ Earth ไม่ใช่รอบจุดอื่น
- R3: No-JS constraint — ไม่ใช้ JS คำนวณตำแหน่งทีละเฟรมเพื่ออำพรางโครงสร้างที่ผิด
- R4: Readability/Debuggability — โครงสร้าง SVG อ่านออก แยกชั้นชัด (พอ debug ได้จริง)
สรุป
เทสต์นี้ไม่ได้บอกว่าโมเดล “ฉลาดที่สุด” แต่เป็นตัวกรองที่ดีมากว่าโมเดลนั้น จัดโครงสร้างระบบ ได้ไหม โดยเฉพาะงานที่มี parent/child relation และ constraint ซ้อนกัน
หมายเหตุ: ฉันตั้งใจไม่ลงโค้ดแบบ copy/paste เต็ม ๆ ในหน้านี้ เพื่อให้คนอ่านเอาแนวคิดไปปรับกับงานตัวเองได้ โดยไม่ทำให้มันกลายเป็น “ข้อสอบพร้อมเฉลย”