ข้ามไปยังเนื้อหา
Tayakorn

ห้องทดลอง

ของที่กำลังลองทำ — ยังไม่ถึงขั้นเคลมเป็นผล⁠งาน แต่ทุกการทดลองต้องรายงานผล

LAB. 01กำลังทดลองเริ่ม

เรนเดอร์วิดีโอจากหน้า HTML

ทดลองอะไร

ทำวิดีโอแนะนำเว็บด้วยการเขียนหน้า HTML หนึ่งไฟล์แล้วเรนเดอร์เป็นวิดีโอ — เลย์เอาต์ สี ฟอนต์ จังหวะ motion และเสียงประกอบ สังเคราะห์จากโค้ดทั้งหมด ไม่ใช้โปรแกรมตัดต่อ

ได้เรียนรู้อะไร

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

LAB. 01 — วิดีโอเงียบจากไฟล์ทดลองจริง
LAB. 02กำลังทดลองเริ่ม

แยกโซนเล่นออกจากโซนอ่าน

ทดลองอะไร

รื้อหน้าเปิดตัว GPT-6 Astra ของ OpenAI แล้วพบว่าสนามดาวเป็นเลเยอร์เดียวทับทั้งหน้า 32,783 พิกเซล แต่พื้นที่ที่ลากได้จริงมีแค่ 1,908 พิกเซล — ส่วนที่เหลือหน้าตาเหมือนกันเป๊ะแต่แตะไม่ได้ และไปลอยทับตัวเลขในตาราง จึงลองสร้างสนามจุดที่ประกาศตัวชัดว่าตรงไหนเล่นได้ พร้อมสวิตช์สลับดูสองแบบด้วยตาตัวเอง

ได้เรียนรู้อะไร

การแยกชั้นได้ผลชัดกว่าที่คิด — พอถอดพื้นทึบออกให้จุดลอยทับตาราง ค่าอย่าง 5.8% กับ 1,908 / 32,783 px อ่านสะดุดทันที ปัญหาจึงไม่ใช่ 'มีของประดับ' แต่คือของที่เล่นได้กับเล่นไม่ได้ใช้ภาพเดียวกัน ที่ยังไม่ถึง: ตัดสินจากตัวเองคนเดียว ยังไม่มีใครนอกจากผู้เขียนลองว่าป้ายโซนช่วยจริงไหม · บนพื้นกระดาษอุ่นคอนทราสต์ต่ำกว่าจุดขาวบนพื้นดำ เอฟเฟกต์หลบเคอร์เซอร์จึงอ่านออกยากกว่าต้นฉบับ · และโซนเล่นตั้ง touch-action เป็น none เพื่อให้ลากหมุนได้ แลกมาด้วยนิ้วที่วางในโซนนั้นเลื่อนหน้าไม่ได้ ยังไม่ได้แก้

โซนอ่าน — ตัวเลขต้องคม
ค่าตัวเลข
จุดในสนาม140
โซนเล่น · pointer-eventsauto
โซนอ่าน · pointer-eventsnone
หน้าต้นฉบับ: พื้นที่ลากได้จริง1,908 / 32,783 px
คิดเป็นสัดส่วนของหน้า5.8%
LAB. 02 — สนามจุดก้อนเดียว สองโซน — กดปุ่มสลับเพื่อดูว่าจุดทับตัวเลขแล้วอ่านยากขึ้นแค่ไหน
LAB. 03กำลังทดลองเริ่ม

ลูกโลกบท — 10 รูปทรงก่อนจะเป็นแบบสุดท้าย

ทดลองอะไร

ต่อยอด LAB.02 ให้ 'สนามจุด' บนหน้าแรกแบกข้อมูลจริง (หนึ่งจุด = หนึ่งบทจาก 18 เล่ม 228 บท) แล้วหารูปทรงด้วยการทำ mock เล่นจริงแล้วเคาะทีละรอบ ตั้งแต่ทรงกลมจุดธรรมดา ผ่านลูกโลกที่ขั้นบันไดเป็นชั้นซ้อนข้างในและลิ่มผ่าโชว์ชั้น จนถึงแบบที่เคาะ

ได้เรียนรู้อะไร

รูปทรงที่ 'สร้างสรรค์' ที่สุด (บทร้อยเป็นสายเจาะ) แพ้รูปทรงที่มองเห็นชัดที่สุด · จุดแสงเบลอที่ดูสวยบนจอดำ มองไม่เห็นบนกระดาษอุ่น — บนกระดาษ ความสว่างคือสีอิ่มกับขอบคม ไม่ใช่เบลอ · ลิ่มผ่าที่คงที่กับสายตาให้ความรู้สึก 'ล็อก' ต้องติดไปกับลูกโลกถึงจะเป็นวัตถุ · ที่ยังไม่ถึง: ตัดสินด้วยสายตาคนเดียวทั้ง 10 รอบ — ใบนี้คือบันทึกช่วงหารูปทรง ตัวจริงที่สร้างตามอยู่ในใบถัดไป

  1. ทรงกลมของจุดวงกลมสีบันไดบนกระดาษอุ่น มีตารางตัวเลขอยู่ใต้
    ROUND 01ทิ้ง

    ทรงกลมจุดวงกลม — จุดเป็นแค่จุด ไม่มีเรื่องเล่า

  2. จุดเรียงเป็นคอลัมน์ต่อเล่ม ชั้นตามขั้นบันได มีชื่อย่อเล่มใต้คอลัมน์
    ROUND 02เก็บ

    ชั้นสะสมกว้าง — ย้ายไปเป็นแผนที่นำทางบน /handbooks

  3. ลูกโลกที่มีลิ่มผ่าเป็นเสี้ยววงกลมแบนขนานกับจอ
    ROUND 03ทิ้ง

    แกนเจาะรุ่นแรก ลิ่มขนานจอ — หน้าตัดสองด้านฉายเป็นเส้น แบนเป็น 2D

  4. ลูกโลกที่ถูกผ่าออกเป็นเสี้ยวใหญ่ หน้าตัดกินพื้นที่ครึ่งลูก (ภาพจำลองใหม่จากรุ่นสุดท้าย)
    ROUND 04ทิ้ง

    octant เอียง — หน้าตัดกินพื้นที่ครึ่งลูก จุดหายเกือบหมด · ภาพจำลองใหม่ ของเดิมถูกเขียนทับ

  5. ลูกโลกที่ผ่าเป็นชิ้นเค้กเต็มความสูง เห็นผนังข้างเดียวเต็มหน้า
    ROUND 05ทิ้ง

    ชิ้นเค้กเต็มความสูง — เห็นผนังข้างเดียว อีกข้างเป็นเส้น

  6. ลูกโลกผ่าลิ่มซีกล่างกว้าง 60 องศา เห็นวงแหวนชั้นสีทองถึงแดง
    ROUND 06เก็บ

    ลิ่มซีกล่าง 60° — รูปทรงใช่ แต่ยังคงที่กับสายตา เป็น 'หน้าต่าง' ไม่ใช่วัตถุ

  7. ลูกโลกไม่มีกล่อง ลอยบนกระดาษกราฟ มีวงเส้นประรอบ ลิ่มผ่าติดไปกับลูกโลก
    ROUND 07เก็บ

    ลิ่มติดลูกโลก ถอดกล่อง ตัวเลข 2×2 — เป็นวัตถุจริง หมุนตามมือ

  8. ลูกโลกที่บทถูกร้อยเป็นสายเกลียว 18 สายจากเปลือกเข้าแก่น
    ROUND 08ทิ้ง

    สายเจาะ — 'แย่กว่าเดิม' จุดจับกลุ่มเป็นสาย อ่านไม่ออก

  9. ลูกโลกที่จุดเป็นแสงเบลอนุ่มสีอุ่นบนกระดาษ
    ROUND 09ทิ้ง

    จุดแสงโบเก้ — สวยบนจอมืด แต่มองไม่เห็นบนกระดาษ

  10. ลูกโลกที่จุดเป็นแผ่นหมึกขอบคมสีบันได จางเมื่อยังไม่อ่าน เต็มเมื่ออ่านแล้ว
    ROUND 10เก็บ

    จุดหมึกขอบคม — ภาษาชาร์ตของเว็บ เห็นชัดทุกดวง · รูปทรงที่เคาะ

LAB. 03 — ป้ายบนภาพบอกว่าเก็บหรือทิ้ง · เหตุผลอยู่ใต้ภาพแต่ละใบ

เปิด mock ตัวสุดท้ายแบบเล่นได้ (snapshot 5 ก.ย. 2569)

LAB. 04กำลังทดลองเริ่ม

ลูกโลกบทตัวจริง — รอบที่หนึ่งบนผิวหลัก

ทดลองอะไร

สร้างรูปทรงที่เคาะไว้ใน LAB.03 ขึ้นมาจริงแล้วต่อเข้าผิวหลักสองผิว: hero หน้าแรกเป็นลูกโลกแกนเจาะ (หนึ่งจุด = หนึ่งบทจาก 18 เล่ม 228 บท · สี = ขั้นบันได · ขนาด = ความยาวบท · สีเต็ม = อ่านแล้ว · กดเล่มแล้วโซนตัวเลขกลายเป็นแท่งตัวอย่างของเล่มนั้น) และ /handbooks เป็นแกนเจาะทุกเล่มเรียงกันเหนือรายชื่อเดิม ข้อมูลนับตอน build ไม่ใช่ค่าที่พิมพ์ไว้ · ตัวจริงเล่นได้ในใบนี้ ทั้งสองรูปทรง สลับได้ด้วยปุ่ม และอ่าน progress จากเครื่องของผู้อ่านเอง

ได้เรียนรู้อะไร

บั๊กที่แพงที่สุดสี่ตัวไม่มีตัวไหนถูกเทสต์จับได้เลย — ทุกตัวเจอตอนเปิดภาพดูเอง: แกนขั้นบน /handbooks กลับหัวขัดกับ caption ที่ตัวเองพิมพ์อยู่ (mock ต้นฉบับผิดมาแต่แรก ก็อปมาทั้งความผิด) · รัศมีสนามไม่ตรงกับกฎที่เขียนไว้ในคอมเมนต์ของตัวเอง จุดแถวบนเลยโดนขอบตัด · แท็กภาษาอังกฤษยาวเกินช่องจนตกเป็นก้อนสองบรรทัด (ไทยพอดี เลยไม่มีใครเห็น) · แท็กกับ hint ทับกันจนอ่านไม่ออกบนจอ 390 ⇒ บทเรียนคือด่านอัตโนมัติยืนยันได้แค่ว่า 'ไม่พัง' ไม่ได้ยืนยันว่า 'ถูก' และเอกสารที่ขัดกับโค้ดต้องให้เอกสารชนะเมื่อมันคือข้อตกลงที่ประกาศกับผู้อ่านไปแล้ว · ที่ยังไม่ถึง: ตัดสินด้วยสายตาคนเดียวเหมือนเดิม · ยันด้วยเครื่องไม่ได้ว่าปัดนิ้วบนวงแล้วหน้าเลื่อนถูกจังหวะไหม (สคริปต์ยันได้แค่ค่า touch-action กับการแตะ) · และข้อใหญ่สุดคือพอเปิดใช้จริง เจ้าของยังชอบสนามจุดล้วนแบบ LAB.02 มากกว่าลูกโลกที่มีโครงแกนอยู่ข้างใน รูปทรงจึงยังไม่นิ่ง ใบนี้คือบันทึกรอบที่หนึ่งก่อนรื้อ

รูปทรง

สถานะสะสม · นับใหม่ทุกครั้งที่เว็บอัปเดต

คู่มือ
18เล่ม
บทที่เขียนจบ
228บท
ไดอะแกรมวาดเอง
145ชิ้น
ผลงานในทะเบียน
15รายการ
อ่านแล้ว (เครื่องนี้)
บท
LAB. 04 — ตัวจริงจากผิวหลัก ต่อจากข้อมูลชุดเดียวกัน: 18 เล่ม 228 บท · จุด = บทจริง (ใหญ่ = ยาว) · สี = ขั้น L0→L4 · สีเต็ม = อ่านแล้วบนเครื่องนี้ · ลูกโลก: กดเล่ม = เจาะ · แกนเจาะเรียง: กดจุด = เปิดบท
  1. ลูกโลกบนกระดาษกราฟ มีวงเส้นประรอบ ลิ่มผ่าโชว์วงแหวนห้าชั้นสีทองถึงแดง จุดสีบันไดกระจายทั่ว
    ROUND 01เก็บ

    hero หน้าแรก — ทุกจุดคือบทจริง ยังไม่อ่านจึงจางทั้งลูก

  2. โซนตัวเลขกลายเป็นแท่งตัวอย่างของคู่มือ Git ช่องสีเต็มเก้าช่องแล้วจางหกช่อง พร้อมบรรทัดบอกว่าลึกถึง L2 บท 9 จาก 15
    ROUND 02เก็บ

    กดเล่มแล้วตัวเลขรวมกลายเป็นแกนเจาะของเล่มนั้น — อ่านถึงบทไหนเห็นตรงนั้น

  3. สนามจุดของทุกเล่มเรียงกันเป็นชั้น ขั้น L0 อยู่บน L4 อยู่ล่าง มีชิปกรองขั้นอยู่เหนือสนาม
    ROUND 03เก็บ

    /handbooks — แกนเจาะทุกเล่มเรียงกัน ชั้นบนคือ L0 ชั้นล่างคือ L4 ตามที่ caption สัญญา

  4. ลูกโลกเดียวกันบนธีมมืด จุดสีบันไดยังแยกออกจากพื้นหมึกได้ กระดาษกราฟจางลง
    ROUND 04เก็บ

    ธีมมืด — จุดยังไม่จมกับพื้นหมึก ข้อที่กลัวที่สุดตอนย้ายจากจอขาว

LAB. 04 — ป้ายบนภาพบอกว่าเก็บหรือทิ้ง · เหตุผลอยู่ใต้ภาพแต่ละใบ