02เฟรมคือฟังก์ชันของเวลา

บทนี้สำคัญที่สุดในเล่ม แนวคิดเดียวข้างล่างนี้คือเหตุผลเบื้องหลังกฎแทบทุกข้อของ HyperFrames เข้าใจมันแล้ว กฎทั้งหมดจะเปลี่ยนจาก "ข้อห้ามที่ต้องท่อง" เป็น "เรื่องที่เดาได้เอง"

2.1 ไม่มีการอัดหน้าจอ — มีแต่การถาม

ความเข้าใจผิดที่พบบ่อยคือคิดว่า HyperFrames "อัด" เว็บเพจแบบโปรแกรมอัดหน้าจอ: เปิดเพจ ปล่อยให้ animation เล่นไป แล้วบันทึกสิ่งที่เห็น ความจริงตรงกันข้าม — ระหว่างเรนเดอร์ ไม่มีเวลาจริงไหลผ่านเลยสักวินาที

เครื่องเรนเดอร์ทำแบบนี้แทน: ถามเพจว่า "วินาทีที่ 0.000 หน้าตาเป็นยังไง" แล้วถ่ายรูปเก็บ ถามต่อ "วินาทีที่ 0.033 ล่ะ" ถ่ายอีกรูป ไล่ถามอย่างนี้ 300 ครั้งสำหรับคลิป 10 วินาทีที่ 30 เฟรมต่อวินาที (เลข 300 นี้อยู่ใน log จริงของการเรนเดอร์บทที่ 1) เสร็จแล้วส่งรูปทั้งกองให้ FFmpeg เย็บเป็นไฟล์วิดีโอ

วิดีโอใน HyperFrames ไม่ใช่สิ่งที่ถูกอัด แต่คือคำตอบของฟังก์ชัน: ใส่เวลา t เข้าไป ได้ภาพหนึ่งเฟรมออกมา — และต้องได้ภาพเดิมทุกครั้งที่ถาม t เดิม

2.2 ผลข้อแรก: เวลาถูก "ประกาศ" ไม่ใช่ถูก "สั่งเล่น"

การจะตอบ "วินาที 7.2 หน้าตาเป็นยังไง" ได้ทันที เพจต้องรู้อนาคตทั้งเรื่องล่วงหน้า: อะไรโผล่เมื่อไหร่ อยู่นานแค่ไหน กำลังเคลื่อนที่ถึงจุดไหน ณ เสี้ยววินาทีนั้น ใน HyperFrames จึงไม่มีโค้ดสั่ง "เล่นเดี๋ยวนี้" มีแต่การประกาศแผนเวลาไว้ล่วงหน้า สองชั้น:

• ชั้น DOM — แต่ละ element ประกาศช่วงเวลาของตัวเองตรง ๆ บน HTML: "ฉันอยู่บนจอตั้งแต่วินาที 2.5 นาน 7.5 วินาที" ผ่าน data-start และ data-duration (บท 3–4)
• ชั้น animation — timeline ประกาศการเคลื่อนไหวทั้งเส้นจบตั้งแต่เพจโหลด แล้วหยุดนิ่งรอ ไม่เล่นเอง คนหมุนเข็มเวลาไปยังจุดที่ต้องการคือเครื่องเรนเดอร์ ไม่ใช่ตัวเพจ (บท 5)

มองผ่านเลนส์นี้ DOM ของ composition ก็คือ timeline ที่ประกาศตัวเอง — สิ่งที่โปรแกรมตัดต่อวาดเป็นแถบสีบนราง HyperFrames เขียนเป็น attribute บน element

2.3 ผลข้อสอง: อะไรที่ผันแปรตามโลกจริง คือบั๊กทั้งหมด

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

• ทำไมห้ามใช้ Math.random() และนาฬิกาจริง ทั้งที่โค้ดเว็บทั่วไปใช้กันปกติ (บทที่ 11 ไข)
• ทำไมเพจถูกห้ามเล่นไฟล์ <video> และ <audio> เอง ต้องยกสิทธิ์ให้ framework คุม (บทที่ 7 ไข)
• ทำไมเครื่องตรวจปฏิเสธ animation ที่วนลูปไม่รู้จบ (บทที่ 11 ไข)

2.4 ลองพิสูจน์ด้วยตาเอง

คำถาม f(t) ไม่ใช่เรื่องเปรียบเปรย มันคือคำสั่งที่คุณยิงเองได้เดี๋ยวนี้:

$ npx hyperframes snapshot
◇  5 snapshots saved to snapshots/
   snapshots\frame-00-at-0s.png
   snapshots\frame-01-at-2.5s.png
   snapshots\frame-02-at-5s.png
   snapshots\frame-03-at-7.5s.png
   snapshots\frame-04-at-9.7s.png

นี่คือการถาม f(t) ห้าครั้งที่ t = 0, 2.5, 5, 7.5, 9.7 ได้ภาพนิ่งห้าใบโดยไม่ต้องเรนเดอร์วิดีโอทั้งไฟล์ รันซ้ำกี่รอบก็ได้ภาพชุดเดิมเป๊ะ — หลักฐานว่าไม่มีการอัด มีแต่การถาม