ดูลื่นไม่นับ

ไฟล์ที่ออกมาชื่อ contact-2s-x4.jpg ขนาด 1650 คูณ 1940 พิกเซล ข้างในเป็นภาพนิ่ง 24 ช่อง เรียง 6 คอลัมน์ 4 แถว มุมซ้ายบนของทุกช่องมีเลขเฟรมกับวินาทีพิมพ์ทับไว้ เปิดดูแล้วช่องแรกคือ f60 2.00s โลโก้ Aquarium ตัวใหญ่กลางจอ ช่องถัดไป f64 2.13s โลโก้ลอยขึ้นไปครึ่งทาง การ์ดสองใบแรกโผล่มาแล้ว ใบที่สามยังจาง ช่องที่สาม f68 2.27s ทุกอย่างเข้าที่ เหลือ caption บรรทัดล่างที่ยังไม่มา

ภาพแบบนี้เรียกว่า contact sheet คำนี้มาจากการ์ด prompt ใบหนึ่งที่ส่งเข้ามาตอนเช้า หัวการ์ดเขียนว่า The Karpathy Loop ข้างในเป็นคำสั่งสำหรับให้ AI เขียนโค้ด motion graphic มีประโยคหนึ่งขีดเส้นไว้ชัด

A video that “looks smooth” is not the deliverable.
วิดีโอที่ “ดูลื่น” ไม่ใช่ของที่ต้องส่ง

ของที่ต้องส่งตามการ์ดคือไฟล์โค้ด บวกตารางจังหวะ บวก contact sheet ที่ถ่ายทุกเฟรมที่สี่ มีเลขเฟรมที่มุม แล้วอ่านภาพนั้นเทียบกับตารางทีละช่อง ช่องไหนไม่ตรงค่อยแก้ตัวเลข ห้ามรื้อ timeline

อ่านจบก็นึกถึงคลิปตัวหนึ่งที่ทำไว้เมื่อสองสัปดาห์ก่อน คลิปแนวตั้ง 15 วินาที พาทัวร์เว็บ portfolio ทำด้วย DOM กับ CSS transform ล้วน ทุกพิกเซลเป็นฟังก์ชันของเวลา เรียก seek(t) แล้วได้เฟรมนั้นทันที ตอนทำเสร็จเปิดวิดีโอดูสองสามรอบ รู้สึกว่าลื่น แล้วก็ส่ง

ตารางที่ไม่เคยเขียน

เปิดโฟลเดอร์คลิปนั้นดูอีกที มีไฟล์ beats.json อยู่จริง แต่ข้างในมีแค่เวลาเริ่มของแต่ละฉาก 18 ค่า ไม่มีความยาว ไม่มีเส้นโค้ง ไม่มีตัวเลขว่าของแต่ละชิ้นเด้งเกินตำแหน่งกี่เปอร์เซ็นต์ ตารางที่การ์ดขอมีสี่คอลัมน์ ของจริงมีคอลัมน์เดียว

เลยเขียนตารางย้อนหลังจากโค้ด คลิปนี้ใช้ spring ทุกชิ้น กำหนดด้วยความถี่กับค่าหน่วง ไม่ใช่ระยะเวลา เขียนสคริปต์สั้น ๆ ให้วนเวลาทีละมิลลิวินาที หาว่าของแต่ละชิ้นนิ่งสนิทเมื่อไหร่ และเด้งเกินสูงสุดเท่าไหร่ ได้ตาราง 15 แถว

การ์ดใบนั้นมีกติกาแนบมาหกข้อ เอาตารางที่ได้ไปทาบ ตกสามข้อ

ข้อแรก การ์ดบอกว่าขาเข้าควรยาวกว่าขาออก 30 ถึง 50 เปอร์เซ็นต์ การ์ดโปรเจกต์แปดใบในคลิปนี้ใช้เวลานิ่ง 398 มิลลิวินาที ตอนออกใช้ 220 ยาวกว่า 81 เปอร์เซ็นต์ เกินไปเท่าตัว ข้อสอง stagger รวมไม่เกิน 500 มิลลิวินาที roster 13 ใบในคลิปนี้ไล่ทีละ 125 มิลลิวินาที รวม 1,500 เกินสามเท่า ตอนทำตั้งใจให้ตรงกับจังหวะเพลงที่ 120 BPM เลยไม่เคยคิดว่าจะมีเพดาน ข้อสาม การ์ดเด้งเกินตำแหน่งได้ 3 ถึง 5 เปอร์เซ็นต์ tile ใน roster ของคลิปนี้เด้ง 12.6 ตัวอักษรโลโก้เด้ง 8.4

แล้วมีอีกข้อที่ตารางไม่ฟ้อง แต่ grep ฟ้อง การ์ดเขียนว่าใช้ transform กับ opacity เท่านั้น ห้ามแตะ width height top left เปิดโค้ดดู ภาพปกที่ขยายจากการ์ดเล็กไปเต็มจอในวินาทีที่หก เขียน left top width height ตรง ๆ ทั้งสี่ค่า

สิ่งที่แผ่นภาพเห็น และสิ่งที่ไม่เห็น

contact sheet อ่านได้สามอย่างตามที่การ์ดบอก ระยะห่างระหว่างตำแหน่งในช่องติดกัน ถ้าเท่ากันคือ linear ถ้าถ่างแล้วหุบคือ ease-in-out ไล่ดูการ์ดที่เลื่อนขึ้นระหว่าง f84 ถึง f152 ระยะถ่างออกช่วงกลางแล้วแคบลงปลายทาง ตรงกับที่เขียนไว้ อ่านได้ว่าอะไรเริ่มพร้อมกัน ที่ f64 โลโก้ลอยขึ้น การ์ดโผล่ขึ้น แถบ nav จางเข้า สามอย่างเริ่มที่วินาทีเดียวกัน ตอนเขียนโค้ดรู้ แต่ไม่เคยเห็นเป็นภาพ อ่านได้ว่าของแต่ละชิ้นนิ่งที่เฟรมไหน

แต่ตัวเลข 12.6 เปอร์เซ็นต์ที่คำนวณได้ หาในแผ่นภาพไม่เจอ ไม่มีช่องไหนที่ tile ดูใหญ่เกิน ลองนับดู คลิปนี้ 30 เฟรมต่อวินาที ทุกเฟรมที่สี่เท่ากับห่างกัน 133 มิลลิวินาที spring 5 เฮิรตซ์เด้งถึงยอดแล้วกลับลงมาภายในราว 100 มิลลิวินาที ยอดเด้งตกอยู่ระหว่างช่องพอดี การ์ดเขียนสูตรนี้ไว้สำหรับ 60 เฟรมต่อวินาที ที่ทุกเฟรมที่สี่คือ 67 มิลลิวินาที เอามาใช้กับคลิป 30 เฟรมโดยไม่คิด ก็ได้แผ่นภาพที่ดูเรียบร้อยกว่าของจริง

ตัวเลขบนการ์ดมาจากไหน

ก่อนจะเชื่อการ์ด ลองไล่ที่มาของมันก่อน การ์ดให้ตารางเส้นโค้งห้าตัว standard คือ cubic-bezier(0.2, 0, 0, 1) enter คือ (0, 0, 0, 1) exit คือ (0.3, 0, 1, 1) เปิดเทียบกับ token ของ Material Design 3 ตรงกันสี่ในห้าตัว แค่เปลี่ยนชื่อ ตัวที่ห้าคือ overshoot ที่ Material ไม่มี การ์ดเขียนเครดิตว่าตัวเลขมาจากบทความชื่อ Specify the Curve, Not the Adjective ค้นสองรอบ ทั้งแบบเร็วและแบบละเอียด ไม่เจอบทความนั้นที่ไหนเลย

ส่วนชื่อ Karpathy บนหัวการ์ด การ์ดเองเขียนไว้ท้ายสุดว่าหลักการเป็นการถอดความจาก talk ของเขา ไม่ใช่เขาเขียน เปิด transcript ของ talk ที่ YC AI Startup School เดือนมิถุนายนปีที่แล้วดู ประโยคที่การ์ดอ้างอยู่ในนั้นจริง

It’s less Iron Man robots and more Iron Man suits that you want to build.
สิ่งที่ควรสร้างไม่ใช่หุ่นยนต์ Iron Man แต่เป็นชุดเกราะ Iron Man

And there should be an autonomy slider in your product.
และในผลิตภัณฑ์ควรมีแถบเลื่อนระดับความอิสระของ AI

คำว่า loop ที่ชื่อการ์ด ไม่ได้อยู่ใน talk นั้น ตอนค้นชื่อ Karpathy Loop เจอของอีกชิ้นที่ใช้ชื่อเดียวกัน เป็น repo ให้ agent ทดลองแก้โค้ดเทรนโมเดลข้ามคืนแล้วเก็บเฉพาะรอบที่ดีขึ้น คนละเรื่องกันหมด แต่ชื่อซ้ำ

เก็บอะไร ทิ้งอะไร

เก็บสองอย่าง ตารางสี่คอลัมน์ที่เขียนก่อนลงมือ กับแผ่นภาพทุกเฟรมที่สี่ที่ถ่ายหลังลงมือ ทั้งคู่ใช้เวลารวมกันไม่ถึงครึ่งชั่วโมง สคริปต์ถ่ายแผ่นภาพยาว 40 บรรทัด อยู่ข้างไฟล์ render ของคลิปแล้ว คลิปตัวต่อไปจะได้ไม่ส่งเพราะรู้สึกว่าลื่น

ทิ้งตารางตัวเลขบนการ์ด ไปอ่านจากต้นทางที่ Material ดีกว่า และทิ้งกติกาห้ามเด้ง deck อีกชุดที่ทำไว้ การ์ดเด้งตอนโผล่เป็นความตั้งใจ ยังไม่ได้เอาแผ่นภาพไปทาบ deck ชุดนั้น และยังไม่รู้ว่าถ้าเขียนตารางก่อนโค้ดจริง ๆ ตามที่การ์ดบอก ตัวเลขจะต่างจากตารางที่เขียนย้อนหลังวันนี้แค่ไหน