ขอแนะนำ 'Orbit of Night' นาฬิกาเว็บสำหรับนั่งเหม่อมองอวกาศ
(orbit.ggoban.com)สวัสดีครับ!
วันนี้ขอแนะนำโปรเจกต์ข้างที่ทำขึ้นด้วย "vibe coding" ร่วมกับ AI ตั้งแต่เช้านี้ นั่นคือ นาฬิกาพร้อมวอลเปเปอร์อวกาศสุดสวยอย่าง 'Bam-ui Gwedo (Orbit of Night)'
เดิมทีมันเป็นเพียงหน้าเดียวในฟีเจอร์เว็บที่กำลังทำอยู่ แต่รู้สึกว่าเสียดายถ้าจะปล่อยให้เป็นแค่หน้าเดียว เลยเริ่มทำมันขึ้นมา โดยตั้งเป้าให้เป็นประสบการณ์ที่แค่มองดูก็อยากหยุดนิ่งแล้วปล่อยใจเหม่อไปสักพัก
คุณสมบัติหลัก
- วอลเปเปอร์มีชีวิต: พื้นหลังที่มีดาว เนบิวลา และดาวตกเคลื่อนไหวอยู่ตลอดเวลา
- ติดตาม ISS แบบเรียลไทม์: วงโคจรแบบไซน์ที่เคลื่อนไหวอย่างเสถียรภายในหน้าจอ และมีการปรับแก้ตามข้อมูลตำแหน่งจริงของ ISS
- องค์ประกอบแบบอินเทอร์แอ็กทีฟ: คลิกดาวเคราะห์เพื่อสแกนแบบเสมือนได้ พร้อมลูกเล่นเล็ก ๆ อย่าง UFO และเอฟเฟกต์หลุมดำ
- การตั้งค่าสำหรับผู้ใช้: สามารถเปิดปิดองค์ประกอบอย่างดาวเคราะห์, UFO, ISS เป็นต้นได้ตามความชอบ และมีธีมให้ 3 แบบ
สร้างขึ้นด้วย JavaScript และ CSS animation ล้วน ๆ โดยไม่ใช้เฟรมเวิร์กแยกต่างหาก (แม้ AI จะเป็นคนลงมือทำ แต่ตอนตรวจงานผมก็โดน AI บ่นว่าละเอียดจัดเหมือนกัน?) โดยเฉพาะวงโคจรของ ISS ผมลองทำเป็นวิธีแบบไฮบริดที่ผสานการจำลองที่เสถียรเข้ากับการปรับแก้จากข้อมูลเรียลไทม์
เกร็ดเล็กเกร็ดน้อย: เรื่องเล่าของคุณพ่อวัย 40 ที่ได้มาเขียนโค้ดกับ AI
จริง ๆ แล้วตอนนี้ผมก็เป็นคุณพ่อวัย 40 ที่มีลูกชายลูกสาวแล้วครับ
ถ้าจะแนะนำตัวแบบสั้น ๆ ก็ต้องบอกว่าเป็นคนรุ่นที่เคยผ่านทั้งเกมแบบข้อความและเกมแนว MUD มาก่อน และก็เป็นเกมเมอร์ที่รักเว็บเกมไม่น้อยเช่นกัน
แม้จะจบคอมพิวเตอร์มาและทำงานสาย IT ก็จริง แต่ก็ใกล้กับสายวิศวกรเซิร์ฟเวอร์มากกว่า จึงเป็นพนักงานออฟฟิศธรรมดาคนหนึ่งที่พอจับงาน middleware, backend และ frontend ได้อยู่บ้าง
แต่ผมมีความฝันอยากทำเกมมาตลอด พอได้สัมผัสประสิทธิภาพของ AI ที่พัฒนาขึ้น ก็รู้สึกว่า "ถึงเวลาแล้ว!" และตั้งแต่เดือนตุลาคมปีที่แล้ว เวลาว่างของผมก็เลยหมดไปกับการทำสิ่งที่เดี๋ยวนี้เรียกว่า vibe coding กับ AI เป็นหลัก
ตอนนี้กำลังทำเว็บเกมโปรเจกต์ของเล่นชิ้นที่สามอยู่ ระหว่างนั้นมีหน้าฟีเจอร์หนึ่งที่ทำไปแล้วเกิดไอเดียแบบฉับพลันจนใส่ใจเป็นพิเศษ พอมาคิดดูอีกที ก็รู้สึกว่าเสียดายถ้าจะใช้มันอยู่แค่ตรงนั้น เลยกลายมาเป็นโปรเจกต์นี้ขึ้นมา
ลองแวะเข้ามาแล้วปล่อยใจเหม่อกับอวกาศกันสักหน่อยไหมครับ?
ยินดีรับฟีดแบ็กเสมอครับ!
21 ความคิดเห็น
เป็นโปรเจ็กต์ที่ยอดเยี่ยมมาก
ขอบคุณที่ให้ความสนใจ!
เท่มาก!
ขอบคุณสำหรับความสนใจอันอบอุ่น!
เหมาะมากที่จะใช้เป็นภาพพื้นหลังของเบราว์เซอร์เลยนะครับ! ให้ความรู้สึกคล้ายกับตอนเอาอวกาศมาไว้เป็นภาพพื้นหลังบน iPhone เลย
ขอบคุณสำหรับความสนใจอันอบอุ่นครับ! ผมกะว่าจะเปิดทิ้งไว้บนแท็บเล็ตรุ่นเก่าที่บ้านซึ่งไม่ได้ใช้แล้ว แล้วทำกรอบแบบง่าย ๆ ใช้เป็นนาฬิกาครับ ฮ่า!
ดีเลย~
ถ้าอ้างอิงอันนี้แล้วอัปเกรดดาวเคราะห์ด้วยก็น่าจะยิ่งดีขึ้น
https://codepen.io/jamesfinn180/pen/VwzENbR
ว้าว! บนโลกนี้มีคนเก่ง ๆ เยอะมากจริง ๆ นะครับ/คะ ขอบคุณที่ให้ความสนใจนะครับ/คะ เพราะเป็นความรู้สึกแบบมองจากโลก เลยอาจจะไม่ได้มีโลกปรากฏออกมาตรง ๆ แต่ผม/ฉันจะลองนำไปประยุกต์และท้าทายตัวเองเพื่ออัปเกรดต่อไปครับ/ค่ะ!
ฮีลใจและมีความสุขมากจริง ๆ
ขอบคุณที่สร้างสรรค์ผลงานดี ๆ ขึ้นมานะคะ :)
ขอบคุณสำหรับคำตอบที่อบอุ่นมากครับ/ค่ะ T_T ทำให้มีกำลังใจขึ้นอีกเลยครับ/ค่ะ
เราได้รวบรวมความคิดเห็นที่ทุกคนบอกมาแล้วนำไปปรับแก้ไว้เรียบร้อยครับ! 1. ดาวเคราะห์จะมีข้อมูลคงที่ตั้งแต่ตอนถูกสร้างขึ้น 2. สามารถปรับตัวเลือกฝนดาวตกให้ตรงกับความชอบส่วนตัวได้ในตั้งค่า (ความถี่ในการเกิด, ความเร็ว, จำนวน) 3. มีการปรับเนบิวลา รวมถึงทางช้างเผือกที่อาจสังเกตได้ไม่ชัดนัก และแสงดาว 4. ตอนนี้หากปิดตัวเลือกหลุมดำ มันจะไม่ทำงานอีกต่อไป 5. ได้เพิ่มเอฟเฟกต์ที่เป็นการคารวะซึ่งคล้ายกับวาร์ปใน Sxwarx 6. บางครั้งจะมีเพื่อนหน้าตาแปลก ๆ ปรากฏตัวขึ้นบนดาวเคราะห์ ขอขอบคุณทุกคนมากสำหรับความสนใจครับ!
เป็นเรื่องเล็กน้อยนะ แต่ถึงจะปิดเอฟเฟ็กต์หลุมดำแล้ว เอฟเฟ็กต์หลุมดำก็ยังทำงานอยู่เหมือนเดิมครับ ^^ เป็นโปรเจกต์ที่เท่มากเลย~!
ครับ ขอบคุณมากครับ ^^ เราจะนำบั๊กเหล่านั้นรวมถึงความคิดเห็นของท่านอื่น ๆ ไปปรับปรุง และมีแผนจะนำเวอร์ชันที่ปรับปรุงแล้วมาใช้งานในเร็ว ๆ นี้ ขอบคุณที่ให้ความสนใจครับ!
ดีไซน์ดูคล้ายกับที่เคยเห็นในเว็บ Pomodoro เว็บหนึ่งเมื่อก่อนเลยนะครับ ถ้าทำให้มีดาวเคราะห์หลายแบบโผล่ออกมาด้วยจะเป็นอย่างไรบ้าง?
อ๊ะ อย่างที่ว่าไว้จริง ๆ ว่าใต้ฟ้านี้ไม่มีอะไรใหม่...! ตอนนี้มีดาวเคราะห์ออกมาแค่ 1 ดวง และกำลังคิดว่าจะเพิ่มความสนุกด้วยการให้มีองค์ประกอบยูนีคปรากฏขึ้นบนนั้น แต่จะลองทดสอบแบบที่มีหลายดาวเคราะห์ออกมาด้วยนะครับ ขอบคุณครับ
พอเห็นว่าเอาไว้ใช้เหม่อเหมือนกัน ผมก็เลยคาดหวังว่าจะเป็นอะไรประมาณภาพถ่ายอวกาศแบบเปิดรับแสงนานของจริง.. แต่ดูเหมือนว่ามันจะแตกต่างจากที่คาดไว้มากพอสมควร
ขอบคุณสำหรับความคิดเห็นอันมีค่านะครับ ส่วนนี้เราจะลองปรึกษากับ AI ดูด้วยเหมือนกัน! 555 แต่คอนเซปต์ที่วางไว้คืออยากถ่ายทอดทุกอย่างออกมาให้มากที่สุดผ่าน
cssหรือsvgดังนั้นจะลองดูรูปที่เกี่ยวข้องเพื่อหาแรงบันดาลใจครับ!น่าจะดีถ้ามีอวกาศที่ให้ความรู้สึกนิ่งขึ้นและสมจริงขึ้นอีกหน่อย~
เราจะขยายให้สามารถเลือกจักรวาลได้หลากหลายแบบ นอกเหนือจากธีมสีด้วย ขอบคุณสำหรับความคิดเห็นอันมีค่าครับ!
ขอบคุณที่แนะนำโปรเจกต์ที่มีความหมายครับ/ค่ะ น่าชื่นชมและน่าเคารพมากที่คุณยังไม่ทิ้งความฝันและยังคงท้าทายตัวเองต่อไปแม้เวลาจะผ่านไปแล้ว คิดว่าลูก ๆ ของคุณก็น่าจะชอบด้วย! ถ้าขอเสนอฟีดแบ็กสักเล็กน้อย 1) ฝนดาวตกร่วงเร็วและถี่เกินไป จนให้ความรู้สึกตื่นเต้นเกินกว่าจะนั่งมองเพลิน ๆ ถ้าทำให้จางลง น้อยลง และตกช้าลงอีกหน่อย ก็น่าจะสร้างบรรยากาศที่สงบและมีอารมณ์มากขึ้นได้ 2) ในการสแกนดาวเคราะห์ ถ้าเป็นดาวดวงเดิม แสดงข้อมูลเดิมเสมอจะเป็นอย่างไรบ้าง? 3) เอฟเฟกต์หลุมดำในการตั้งค่าหมายถึงเอฟเฟกต์ตอนคลิกใช่ไหมครับ/คะ? ถึงจะปิดเป็น Off แล้ว เอฟเฟกต์นั้นก็ยังไม่หายไป 4) ผม/ฉันยังไม่ค่อยเข้าใจว่า Random Color ในการตั้งค่าเปลี่ยนสีของอะไรครับ/คะ
ขอบคุณสำหรับฟีดแบ็กครับ/ค่ะ ตอนนี้กำลังพิจารณาตัวเลือกสำหรับปรับความถี่ของฝนดาวตกผ่านสไลด์อยู่ ส่วนดาวเคราะห์ที่ข้อมูลแสดงออกมาแตกต่างกันทุกครั้งที่คลิก ก็เป็นรายการที่ต้องแก้ไขเช่นกัน T_T ฮือ
Random Colorเป็นตัวเลือกที่ทำให้สีของดาวเคราะห์ที่ปรากฏออกมาเป็นแบบสุ่มทุกครั้ง ตัวดาวเคราะห์เองจะเคลื่อนที่ช้า ๆ ดังนั้นถ้าอยากตรวจสอบ ลองปิดแล้วเปิดตัวเลือกPlanetด้านบนอีกครั้ง ก็จะเห็นว่ามีดาวเคราะห์สีต่างกันปรากฏขึ้นมาได้ครับ/ค่ะ haha เดิมทีสำหรับหลุมดำ ผม/ฉันอยากใส่เอฟเฟกต์ให้ดาวรอบ ๆ กับยานอวกาศถูกดูดเข้าไปเมื่อคลิก แต่การทำสิ่งนั้นด้วยแค่เบราว์เซอร์และ javascript อย่างเดียวค่อนข้างไม่ง่าย เลยทำได้ถึงแค่ความรู้สึกว่ามีเพียงพาร์ติเคิลแยกต่างหากที่ถูกดูดเข้าไป เศร้า เรื่องที่ปิดด้วยoffไม่ได้ ก็มีแผนจะแก้ไขเช่นกันครับ/ค่ะ ขอบคุณมากสำหรับความคิดเห็นอันมีค่าของคุณ!