เมืองในขวด – ระบบเรย์แคสติ้ง 256 ไบต์

 (frankforce.com)
3 คะแนน โดย GN⁺ 2024-05-21 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

City In A Bottle – ระบบเรย์แคสติ้ง 256 ไบต์

  • บทนำ

    • วันนี้ขอแนะนำเอนจินเรย์แคสติ้งขนาดเล็กและตัวสร้างเมืองที่บรรจุอยู่ในไฟล์ HTML ขนาด 256 ไบต์
    • โปรแกรมนี้รวมแนวคิดหลายอย่างไว้ในพื้นที่เล็กมาก จนสามารถทำความเข้าใจได้เหมือนการแก้ปริศนา
    • องค์ประกอบหลักคือโค้ด HTML, ลูปอัปเดตเฟรม, ระบบเรนเดอร์, เอนจินเรย์แคสติ้ง และตัวเมืองเอง

  • โค้ดทั้งหมด

    • โค้ดนี้ไม่ใช่เพียง JavaScript snippet แบบง่าย ๆ แต่เป็นโปรแกรม HTML ทั้งชุด
    • <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>

โค้ด HTML

  • โค้ด HTML
    • ส่วน HTML ประกอบด้วยองค์ประกอบ canvas แบบเรียบง่ายและอีเวนต์ onclick
    • <canvas style=width:99% id=c onclick=setInterval('',t=9)>
    • id ขององค์ประกอบ canvas ถูกตั้งเป็น c เพื่อให้ JavaScript เข้าถึงได้
    • อีเวนต์ onclick ใช้เริ่มโปรแกรม และสร้างลูปอัปเดตผ่านการเรียก setInterval

โค้ด JavaScript

  • โค้ด JavaScript

    • โค้ด JavaScript ขนาด 199 ไบต์ที่จะทำงานเมื่อคลิกที่ canvas
    • for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a

  • การวิเคราะห์โค้ด

    • มีการแยกโค้ดออกมาเพื่อให้อ่านง่ายขึ้น
    • c.width = w = 99
++t
for (i = 6e3; i--;){
  a = i%w/50 - 1
  s = b = 1 - i/4e3
  X = t
  Y = Z = d = 1
  for(; ++Z<w &  (Y < 6 - (32<Z & 27<X%w && X/9^Z/8)*8%46 ||  d | (s = (X&Y&Z)%3/Z, a = b = 1, d = Z/w));) {
    X += a
    Y -= b
  }
  c.getContext`2d`.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1)
}

  • คำอธิบายโค้ดทีละขั้น

    • c.width = w = 99: กำหนดค่าเริ่มต้นให้ canvas และตั้งความกว้างเป็น 99 พิกเซล
    • ++t: เพิ่มค่าตัวแปรเวลาเพื่อสร้างแอนิเมชัน
    • for (i = 6e3; i--;){}: วนลูปเพื่อกำหนดความสว่างของแต่ละพิกเซล
    • a = i % w / 50 - 1: คำนวณองค์ประกอบแนวนอนของเวกเตอร์กล้อง
    • b = s = 1 - i / 4e3: คำนวณองค์ประกอบแนวตั้งของเวกเตอร์กล้อง
    • X = t: ใช้ค่าเวลาเป็นตำแหน่ง X เริ่มต้น
    • Y = Z = d = 1: กำหนดค่าเริ่มต้นให้ Y, Z, d
    • for(; ++Z<w & ...;): ระบบเรย์แคสติ้งจะวนลูปจนกว่าจะตรวจพบการชน
    • c.getContext2d.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1): วาดแต่ละพิกเซลเพื่อสร้างภาพสุดท้าย

การเรียนรู้เพิ่มเติม

  • การเรียนรู้เพิ่มเติม
    • เดโมนี้ถูกส่งเข้าร่วมงานเดโมปาร์ตี้ Revision 2022 และสามารถดูได้บน Pouet
    • สามารถดูเวอร์ชันที่ขยายเป็นเชดเดอร์ 256 ไบต์ได้บน Shadertoy
    • มีเครื่องมือแบบอินเทอร์แอ็กทีฟที่สร้างโดย Daniel Darabos ซึ่งสามารถใช้ปรับแต่งแง่มุมต่าง ๆ ของโปรแกรมได้แบบเรียลไทม์

ความเห็นของ GN⁺

  • จุดที่น่าสนใจ

    • โปรแกรมนี้แสดงให้เห็นวิธีสร้างกราฟิกที่ซับซ้อนด้วยโค้ดขนาดเล็กมาก
    • ใช้เพียงคณิตศาสตร์พื้นฐานที่แม้แต่วิศวกรซอฟต์แวร์ระดับเริ่มต้นก็เข้าใจได้ง่าย
    • เป็นตัวอย่างที่ดีของการทำโค้ดให้เหมาะที่สุดและแนวมินิมัล ซึ่งอาจเป็นประโยชน์ในการแข่งขันอย่าง code golf

  • มุมมองเชิงวิจารณ์

    • โค้ดถูกบีบอัดอย่างมาก จนอาจทำให้อ่านยาก
    • เหมาะกับจุดประสงค์เชิงศิลปะและการทดลองมากกว่าการใช้งานจริง

  • เทคโนโลยีที่เกี่ยวข้อง

    • โปรเจ็กต์ที่คล้ายกันสามารถดูตัวอย่างเชดเดอร์หลากหลายแบบได้บน Shadertoy
    • สามารถสำรวจตัวอย่างโค้ดขนาดเล็กอื่น ๆ ได้บนแพลตฟอร์มอย่าง Dwitter

  • ข้อควรพิจารณาในการนำเทคโนโลยีไปใช้

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-05-21
ความคิดเห็นบน Hacker News

สรุปรวมความคิดเห็นจาก Hacker News

  • 1K Pinball Game in JavaScript:

    • "น่าทึ่งที่สามารถอัดข้อมูลได้มากขนาดนี้ด้วยโค้ดเพียงเท่านี้"
    • "มันเจ๋งมากจริง ๆ แต่ระหว่างที่อ่านบทความ ลูปก็รันต่อเนื่องจนโน้ตบุ๊กผมร้อนเกินไป"
    • "ข้อมูลที่เกี่ยวข้อง: วิธีสร้างโลกของ [Atari 2600] Pitfall, การสร้างเชิงกระบวนวิธี, lazy evaluation เป็นต้น"

  • การสร้างเชิงกระบวนวิธีและ lazy evaluation:

    • "มีการให้ลิงก์แหล่งข้อมูลหลากหลายเกี่ยวกับการสร้างเชิงกระบวนวิธี"
    • "มีข้อสังเกตเกี่ยวกับความคล้ายกันระหว่าง lazy evaluation กับอัลกอริทึม ray tracing"

  • ความคิดเห็นอื่น ๆ:

    • "เจ๋งมากจริง ๆ! ทำได้ดีมาก"
    • "ทั้งผลงานและบทความน่าทึ่งมาก"
    • "Remnants by Alcatraz ที่คล้ายกับเดโม MS-DOS ขนาด 256 ไบต์ - มีลิงก์ YouTube รวมอยู่ด้วย"
    • "ยิ่งน่าประทับใจขึ้นไปอีกที่เขียนด้วย JavaScript"
    • "น่าทึ่งจริง ๆ"
    • "อ่านสนุกมาก"
    • "ถ้าคุณชอบสิ่งนี้ คุณน่าจะชอบ #tweetcart บน Twitter ด้วย เป็นโปรแกรมขนาดเท่าทวีตสำหรับเครื่องคอนโซลเสมือน Pico-8"