Netscape Meteors

 (erynwells.me)
2 คะแนน โดย GN⁺ 2023-08-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ใช้เวลาหลายวันในการตามหาต้นฉบับของแอนิเมชันโหลด “meteors” ของ Netscape Navigator ซึ่งเชื่อมโยงกับความทรงจำวัยเด็กเกี่ยวกับเว็บ และขนาดต้นฉบับอ้างอิงคือ 60×60 px
  • ตัวเลือกที่พบบนเว็บแตกต่างจากต้นฉบับ โดยเฉพาะเวอร์ชัน 400×400 px ที่ใหญ่เกินไปและพิกเซลถูกยืดจนเป็นสี่เหลี่ยมผืนผ้า ทำให้เชื่อถือได้ยาก
  • แม้จะตรวจดูทั้ง GitHub mirror ของ Netscape 5.0 และซอร์สอาร์ไคฟ์เก่าบน Mozilla FTP แล้ว แต่ไฟล์แอนิเมชันก็ถูกลบออกไปแล้ว
  • หลังขอความช่วยเหลือบน Mastodon เพื่อนได้แท็ก Jamie Zawinski และจากหน้าที่เขาส่งมา ซึ่งเขาเคยมีส่วนร่วมพัฒนา Netscape Navigator ก็สามารถพบต้นฉบับได้
  • ในต้นฉบับมีอาร์ติแฟกต์เล็ก ๆ ค้างอยู่ที่ ด้านซ้ายของเฟรม 10 และจึงได้สร้างฉบับแก้ไขขนาด 60×60 px และ 240×240 px โดยปรับให้เข้ากับพิกเซลรอบข้าง

กระบวนการตามหาต้นฉบับของแอนิเมชัน Netscape

  • เป้าหมายคือการหาต้นฉบับของแอนิเมชัน “meteors” ของ Netscape Navigator
    • แอนิเมชันนี้เป็นภาพที่เชื่อมโยงอย่างมากกับความทรงจำของผู้เขียนในช่วงที่ค้นพบโลกเว็บตอนเด็ก
    • ขนาดต้นฉบับคือ 60×60 px
  • ค้นหาบนเว็บแล้วพบหลายตัวเลือก แต่ยังไม่ดีพอจะถือเป็นต้นฉบับ
    • เวอร์ชันหนึ่งมีขนาด 400×400 px ซึ่งใหญ่เกินไป
    • เนื่องจากการปรับขนาดที่ผิด พิกเซลจึงถูกเปลี่ยนรูปจนดูเป็นสี่เหลี่ยมผืนผ้า
  • การสำรวจซอร์สอาร์ไคฟ์ก็ยังไม่ให้ผลลัพธ์ในทันที

คำตอบจาก Jamie Zawinski และฉบับแก้ไข

  • หลังจากขอความช่วยเหลือบน Mastodon เพื่อนก็แท็ก @jwz เพื่อถามว่าเขายังมีไฟล์อยู่หรือไม่
  • Jamie Zawinski ตอบกลับด้วยตัวเอง และจากหน้าที่เขาส่งมา ก็สามารถพบแอนิเมชันโหลด Netscape meteors ได้
    • Jamie Zawinski เคยมีส่วนร่วมในหลายโครงการซอฟต์แวร์ช่วงทศวรรษ 1990 และมีส่วนเกี่ยวข้องกับการพัฒนา Netscape Navigator
    • เขาเป็นผู้สร้างและดูแล Xscreensaver และปัจจุบันดำเนินกิจการ DNA Lounge ในซานฟรานซิสโก
  • ต้นฉบับที่พบมีอาร์ติแฟกต์เล็ก ๆ ค้างอยู่ที่ ด้านซ้ายของเฟรม 10
    • ส่วนนั้นถูกเรนเดอร์ออกมาเหมือนพิกเซลสีแดงและสีส้ม
    • ผู้เขียนจึงสร้างฉบับแก้ไขโดยแทนที่พิกเซลเหล่านี้ด้วยพิกเซลที่กลมกลืนกับบริเวณรอบข้าง
  • ฉบับแก้ไขถูกทำไว้ทั้งเวอร์ชัน 60×60 px และเวอร์ชันใหญ่ขึ้นที่ 240×240 px

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

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

 
GN⁺ 2023-08-04
ความคิดเห็นบน Hacker News

  • ผมสามารถดึงแอนิเมชันออกมาจาก Netscape Communicator ที่ได้จาก winworldpc.com ด้วยขั้นตอนที่ค่อนข้างง่าย: binwalk -e cc32d48.exe, cd _cc32d48.exe.extracted, unshieldv3 extract comm.z comm, python extract_images.py --ico --png -d ns/ ~/Downloads/Netscape/_cc32d48.exe.extracted/comm/program/*.dll --continue-on-errors
    โดย extract_images.py เป็นเครื่องมือจากโปรเจกต์ https://github.com/akx/res-extract ที่ผมเคยทำให้ใครสักคนเมื่อนานมาแล้ว เพราะเขาต้องการ ไอคอน Excel 95
    แต่ผลลัพธ์มีแค่ เฟรม 32x32 ไม่ใช่ขนาด 60x60 สวย ๆ แบบในบทความ: https://i.imgur.com/sXcEEDU.png

    • บนมือถือแทบเป็นไปไม่ได้เลยที่จะดูภาพจริงในหน้า imgur ไม่ได้จะบ่นนะ แต่ด้านบนมีโฆษณา Futurama ขนาดยักษ์ ด้านล่างก็มีคอนเทนต์โปรโมต และมีแค่ราว 3% ของหน้าจอเท่านั้นที่เป็นภาพนั้น เลยรู้สึกงง ๆ อยู่เหมือนกัน แน่นอนว่าส่วนหนึ่งก็เพราะภาพสูงแค่ 30px
    • ถ้าพูดว่า “เคยทำให้ใครสักคนเมื่อนานมาแล้ว เพราะเขาต้องการไอคอน Excel 95” ผมก็อยากแนะนำ reshacker.exe ด้วย: http://www.angusj.com/resourcehacker/
      ตอนเป็นวัยรุ่น ผมใช้มันเปลี่ยน กราฟิกของ Windows อยู่บ่อยมาก เช่น เปลี่ยนภาพหน้าจอโหลดของ Windows หรือภาพหน้าจอตอนปิดเครื่อง PC เป็นช่วงเวลาที่สนุกดี
    • อาจเดาได้จากชื่อว่านี่เป็นเวอร์ชัน Netscape Communicator ที่ออกมาทีหลัง หรูหราและมีสีสันมากกว่าที่พูดถึงในบทความ มักเรียกกันว่า “Netscape 4” มี UI ที่ออกทอง ๆ มากกว่าและ “ละเอียด” กว่า
      บทความน่าจะพูดถึงแอนิเมชันของ Netscape Navigator เวอร์ชัน 3 หรือ “Netscape 3”
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • ตอนนี้ชักอยากรู้แล้วว่า แอนิเมชันดาวตก มีทั้งหมดกี่เวอร์ชัน
      แอนิเมชันที่แยกเฉพาะส่วนลูปอยู่ที่นี่ ไม่รวมเฟรมแรก: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

  • ในอาร์ไคฟ์ของเว็บไซต์ Dataglyph (Marsh Chamberlain) มีแอนิเมชันนี้เวอร์ชันอื่น ๆ อยู่: https://web.archive.org/web/20011214155044/http://dataglyph....
    ในเว็บไซต์เวอร์ชันเก่ากว่านั้น ยังระบุด้วยว่า Dataglyph เป็นผู้ทำ เข็มทิศหมุน ซึ่งเป็นไอคอนที่ไม่ได้ถูกใช้งาน: https://web.archive.org/web/19981206034010/http://www.datagl...

    • น่าทึ่งว่าหาของแบบนี้เจอได้ยังไง

  • ทั้งหมดอยู่ที่นี่ ไม่ได้มีแค่ของ Netscape 4: http://www.netscape-communications.com/netscapes-throbber-an...

    • ไหน ๆ เว็บก็กลับมาออนไลน์แล้ว ลองดูแล้วก็ไม่แน่ใจว่ามีทั้งหมดจริงไหม ดูเหมือนจะไม่มีอันที่อยู่ในต้นฉบับด้วย อันในต้นฉบับก็ดูไม่น่าใช่ Netscape 4 และตาม [1] สิ่งที่ต้นฉบับกำลังตามหาน่าจะเป็น Netscape 1 หรือฝั่ง “original Netscape Navigator” ตามที่ผู้เขียนพูดถึง
      และภาพใน [1] ก็ดูเหมือนผ่านการแก้ไขมา มีขอบสีขาว เหมือนเฟรมท้าย ๆ หายไปบางเฟรม และพาเลตก็ไม่ตรงพอดี ในทางกลับกัน พาเลตของต้นฉบับให้ความรู้สึกของยุคนั้นได้แม่นยำ ทำให้ประเด็นของบทความยิ่งชัดขึ้น
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • ช่างย้อนแย้งที่มีคนยอมใช้เวลาเขียนบล็อกเพื่อสร้างชิ้นส่วนเล็ก ๆ ของสิ่งที่คนหลายพันคนเคยเห็นขึ้นมาใหม่ ให้ความรู้สึกเหมือนยุคที่ข้อมูล กระจัดกระจายเป็นเกาะ ๆ
    • ดูเหมือนว่าเว็บนั้นจะรับทราฟฟิกจาก HN ไม่ไหว แต่บทความบล็อกยังอยู่
    • NCSA Mosaic ยอดเยี่ยมที่สุด โดยเฉพาะคิดถึงตอนรันบน SunOS

  • การผสมกันของ dithering กับพาเลตที่ถูก quantize ทำให้นึกถึงยุคนั้นอย่างแรง

    • นานมากแล้วที่ไม่ได้คิดถึงสีสำหรับเว็บแบบปลอดภัย (web-safe colors)
    • ถ้าดูตัวอย่างเปรียบเทียบแบบวางข้างกันด้านล่าง โดยเฉพาะ สีแดงที่ถูก dither น่าสนใจมาก

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

  • แน่นอนว่าฟังดูตลกอยู่บ้าง แต่ IE 3 และ 4 มัก “รู้สึก” เร็วกว่า Netscape เสมอเพราะความเร็วของแอนิเมชัน
    ผมสงสัยมาตลอดว่า Microsoft จงใจทำให้มันเร็วขึ้นเพื่อสร้างการรับรู้แบบนั้นหรือเปล่า

    • มันต่างกันจริง ๆ ทีม Facebook เคยเปลี่ยนตัวโหลดตอนเปิดแอป iOS จากแถบลายแบบ Facebook ||||| ไปเป็นสปินเนอร์มาตรฐานของ iOS เพราะผู้ใช้รู้สึกว่า Facebook ช้าเมื่อเห็นตัวโหลดของ Facebook แต่เมื่อเห็นสปินเนอร์ iOS กลับรู้สึกว่า iPhone ช้าแทน
    • ไม่ใช่เรื่องตลกเลย แต่ใกล้เคียงกับ จิตวิทยามนุษย์ มากกว่า ผมเคยอ่านบทความว่า แม้จริง ๆ จะช้ากว่า แต่ถ้ามีการตอบสนองให้เห็น ก็จะรู้สึกว่าเร็วกว่า
      ถ้าอยากลองเอง ให้ทำแอปที่มีปุ่ม 3 ปุ่มด้วยภาษาที่ชอบ ปุ่มแรกให้รอ 9 วินาทีแล้วแสดง “done” ปุ่มที่สองให้อัปเดตแถบความคืบหน้าทุก 1 วินาทีเป็นเวลา 10 วินาทีแล้วแสดง “done” ปุ่มที่สามให้อัปเดตแถบความคืบหน้าทุก 100ms เป็นเวลา 10 วินาทีแล้วแสดง “done” แล้วดูว่าอันไหนรู้สึกว่าเร็วที่สุด
    • อยากลองสำรวจเรื่องนั้นดู ลองจับ จังหวะการเปลี่ยนแปลงของ UI ให้ตรงกัน โดยมีหรือไม่มีสปินเนอร์/ตัวโหลดที่กระตุกหรือหน่วง แล้วเปรียบเทียบว่าการรับรู้ของผู้ใช้เปลี่ยนไปอย่างไรน่าจะดี
      ถ้ามีความรู้สึกลื่นไหล ก็ทำให้รู้สึกว่าเครื่องถูกโปรแกรมมาอย่างดีและเป็นระเบียบ แต่แอนิเมชัน GIF ที่ช้าจะให้ความรู้สึกว่ามีอะไรผิดปกติ
    • หมายถึงไอคอนที่มีก้อนเมฆเคลื่อนอยู่หลังโลโก้ Windows หรือเปล่า? บนแล็ปท็อปของผมมันเร็วแบบไม่สมเหตุสมผล จนเหมือนเมฆเคลื่อนที่ด้วยความเร็ววาร์ป จำไม่ได้ว่าเป็น IE 3 ไหม แต่ดูแปลกเสมอ
      แก้ไข: เป็น IE 2
    • IE เวอร์ชันแรก ๆ เร็วและมีฟีเจอร์เยอะจริง ๆ ขนาดไฟล์ executable ก็ค่อนข้างเล็กด้วย

  • กระตุ้นความคิดถึงได้ตรงจุดมาก เป็นช่วงเวลาที่ยอดเยี่ยมจริง ๆ สำหรับการเข้าร่วมเวิลด์ไวด์เว็บ

    • เป็นยุคที่เว็บยังบริสุทธิ์ ไม่มีของตกแต่งสารพัด
      แล้ว Netscape ก็สร้าง JavaScript ขึ้นมา ตอนแรกชื่อ Mocha/LiveScript และสุดท้ายก็มาถึงสภาพอย่างทุกวันนี้
    • ทำให้นึกถึงหนึ่งในโปรเจกต์เขียนโปรแกรมแรก ๆ ของผมด้วย ครูทำเกมยานอวกาศสำหรับ Netscape ไว้ แล้วผมพอร์ตมันไปยังโมเดล UI ของ IE
      ตอนนั้นยังไม่มี DOM ที่เป็นมาตรฐาน และเท่าที่จำได้ การบังคับให้เกิดความไม่เข้ากัน เป็นหนึ่งในแกนของกลยุทธ์ Microsoft

  • ผมจะวางกอง .net กับ นิตยสาร Wired ไว้ตรงนี้ แล้วคุณก็ฟังเสียงโมเด็มแฮนด์เชกไป

    • อย่าลืมนิตยสาร “Yahoo! Internet Life” ด้วย

  • มีใครรู้ไหมว่าเดิมทีเขาสร้างแอนิเมชันด้วยกระบวนการแบบไหน? อยากรู้ว่าเขาวาดแต่ละเฟรมด้วยมือ หรือใช้เทคนิคอื่น

    • ผมเดาว่าน่าจะวาดเฟรมเอง แต่ตอนนั้นก็มี เครื่องมือแปลง ANI เป็น GIF อยู่ด้วย
      ดังนั้นอาจทำใน 3D Studio Max หรือ Maya ของ SGI หรือ Lightwave บน Amiga แล้วผ่าน .ANI ไปเป็น .GIF ก็ได้
      ถ้าเป็นแบบนั้น ก็อาจมีทางขุดไฟล์โปรเจกต์ต้นฉบับออกมาแล้วทำเรนเดอร์ 8K สวย ๆ ได้
    • น่าจะเป็นเวิร์กโฟลว์แบบแฮ็ก ๆ ทำนองนี้ แอนิเมชันพื้นฐานและการเรนเดอร์แสงอาจทำด้วย Autodesk 3D Studio R3/R4 (DOS) หรือ Lightwave 3D (Amiga) อะไรทำนองนั้น เพราะถ้าทำมือทั้งหมดคงทรมานเกินไป
      จากนั้นก็น่าจะมีซอฟต์แวร์คัสตอมสำหรับปรับพาเลตให้เหมาะสม, Mac Photoshop สำหรับคอมโพสิต และงานแต่งทีละเฟรมด้วยมือปนกันไป ลำดับอาจไม่จำเป็นต้องเป็นแบบนี้
      3ds Max ออกในปี 1996 ส่วน Maya ออกในปี 1998 อย่างไรก็ตาม Netscape ก่อตั้งโดย Jim Clark ซึ่งโด่งดังจาก SGI ดังนั้นงาน 3D น่าจะทำด้วยซอฟต์แวร์ที่รันบน เครื่อง SGI เป็นไปได้สูง
    • มันเป็น ภาพบิตแมป ที่เอาแต่ละเฟรมมาต่อกันในแนวนอน วิธีสร้างอะไรแบบนี้พบได้ทั่วไปใน GIF แอนิเมชันที่เคยมีเยอะและได้รับความนิยมบนเว็บอยู่ช่วงหนึ่ง: http://leighb.com/throbgif.htm

  • เป็นยุคที่อินเทอร์เน็ตให้ความรู้สึกว่าใคร ๆ ก็สามารถไปซื้อหนังสือหนา 6 นิ้วจาก Borders Bookstore มานั่งอ่าน เรียน HTML แล้วลองทำทันทีจนสร้างอาชีพได้
    จริง ๆ แล้วผมก็ทำแบบนั้น และตอนเริ่มต้นก็ใช้โปรแกรมที่อยู่ใน Netscape

    • ตัวแก้ไข WYSIWYG ของ Netscape นั้นคือ Composer
      https://en.wikipedia.org/wiki/Netscape_Composer
    • อา Borders นี่มันเป็นยุคที่เหมือนมีเวทมนตร์จริง ๆ