Giới thiệu "Orbit of Night", chiếc đồng hồ web để bạn "thả hồn ngắm vũ trụ".
(orbit.ggoban.com)Xin chào!
Hôm nay tôi muốn giới thiệu một dự án phụ được tạo bằng "vibe coding" cùng AI từ sáng nay: chiếc đồng hồ với hình nền vũ trụ tuyệt đẹp mang tên "Orbit of Night".
Ban đầu đây chỉ là một trang trong một tính năng web mà tôi đang làm, nhưng tôi thấy nếu cứ để nó chỉ là một trang riêng lẻ thì hơi phí, nên đã bắt đầu phát triển nó thành một sản phẩm độc lập. Mục tiêu là tạo ra một trải nghiệm khiến bạn chỉ muốn ngắm nhìn và "thả hồn" trong chốc lát.
Các tính năng chính
- Hình nền sống động: nền với các vì sao, tinh vân và sao băng liên tục chuyển động
- Theo dõi ISS theo thời gian thực: quỹ đạo hình sin chuyển động ổn định trong màn hình, được hiệu chỉnh dựa trên dữ liệu vị trí ISS thực tế
- Yếu tố tương tác: có thêm những chi tiết thú vị nhỏ như bấm vào hành tinh để quét ảo, UFO, hiệu ứng hố đen
- Tùy chỉnh cho người dùng: có thể bật/tắt các yếu tố như hành tinh, UFO, ISS theo sở thích, đồng thời cung cấp 3 chủ đề
Tôi triển khai nó bằng JavaScript thuần và animation CSS mà không dùng framework riêng nào (dù là AI code, nhưng trong lúc rà soát tôi còn bị AI chê là quá khó tính?), đặc biệt quỹ đạo ISS được làm theo cách hybrid kết hợp giữa mô phỏng ổn định và hiệu chỉnh dữ liệu thời gian thực.
TMI: Câu chuyện một ông chú U40 gặp AI rồi bắt tay vào phát triển
Thật ra giờ tôi đã là một ông bố ngoài 40 có cả con trai lẫn con gái.
Nếu giới thiệu ngắn gọn về bản thân, thì vì cũng thuộc thế hệ có chút "niên đại", tôi là người từng trải qua thời của game văn bản và MUD, đồng thời cũng là một game thủ rất yêu thích web game.
Tôi học ngành khoa học máy tính và công việc cũng ở mảng IT, nhưng gần với kỹ sư server hơn, vì thế middleware, backend và frontend tôi cũng biết đụng vào ở mức nhất định — một nhân viên văn phòng khá bình thường mà thôi.
Dù vậy, từ xưa tôi luôn có ước mơ làm game, và sau khi trải nghiệm năng lực đã tiến bộ rất nhiều của AI, tôi đã nghĩ rằng "à, thời điểm đã đến rồi!" và từ tháng 10 năm ngoái đến nay, cứ mỗi lúc rảnh tôi lại chủ yếu làm cái mà dạo này người ta gọi là vibe coding cùng AI.
Hiện tại tôi đang làm dự án web game đồ chơi thứ ba, và trong lúc tạo một trang chức năng ở giữa chừng, có một màn hình tôi làm ngẫu hứng nhưng lại đầu tư khá nhiều. Nghĩ kỹ thì tôi thấy chỉ dùng nó ở đó thì hơi phí. Và thế là dự án này ra đời.
Bạn có muốn ghé thử một lần để "thả hồn ngắm vũ trụ" không?
Tôi luôn chào đón mọi phản hồi!
21 bình luận
Đây là một dự án tuyệt vời.
Cảm ơn bạn đã quan tâm!
Đẹp quá!
Cảm ơn sự quan tâm ấm áp của mọi người!
Rất hợp để làm hình nền cho trình duyệt! Cảm giác khá giống như đặt cả vũ trụ vào hình nền iPhone vậy.
Cảm ơn mọi người đã quan tâm ấm áp! Mình đang định mở nó trên một chiếc tablet cũ ở nhà không dùng đến, làm khung đơn giản một chút rồi dùng làm đồng hồ luôn haha!
Hay đấy~
Nếu nâng cấp cả các hành tinh dựa trên cái này nữa thì có vẻ sẽ còn tuyệt hơn
https://codepen.io/jamesfinn180/pen/VwzENbR
Wow! Trên đời quả thật có rất nhiều người tuyệt vời. Cảm ơn mọi người đã quan tâm. Vì đây là cảm giác khi nhìn từ Trái Đất nên có lẽ Trái Đất sẽ không xuất hiện nguyên vẹn như vậy, nhưng tôi sẽ cố gắng ứng dụng thêm và thử nâng cấp!
Thật sự rất chữa lành và hạnh phúc
Cảm ơn bạn đã tạo ra một tác phẩm tuyệt vời. :)
Cảm ơn bạn vì câu trả lời ấm áp T_T Mình càng có thêm động lực.
Mình đã tổng hợp các ý kiến mọi người góp ý và chỉnh sửa lại như sau! 1. Các hành tinh sẽ có thông tin cố định ngay từ khi được tạo ra. 2. Tùy chọn mưa sao băng có thể thay đổi trong phần cài đặt theo sở thích cá nhân. (tần suất xuất hiện, tốc độ, số lượng) 3. Tinh vân, tuy khó nhận ra hơn, nhưng cả Dải Ngân Hà và ánh sao cũng đã được điều chỉnh. 4. Nếu tắt tùy chọn hố đen thì giờ đây nó sẽ không còn hoạt động nữa. 5. Mình đã thêm một hiệu ứng như một lời tri ân, lấy cảm hứng từ hiệu ứng warp trong Seuxwoex. 6. Thỉnh thoảng sẽ có những người bạn kỳ lạ xuất hiện trên các hành tinh. Cảm ơn mọi người rất nhiều vì đã dành sự quan tâm!
Chỉ là một chi tiết nhỏ thôi, nhưng ngay cả khi tắt hiệu ứng hố đen thì hiệu ứng hố đen vẫn tiếp tục hoạt động. ^^ Dù vậy đây đúng là một dự án rất tuyệt~!
Vâng, cảm ơn bạn ^^ Chúng tôi dự kiến sẽ sớm áp dụng phiên bản đã cải thiện, phản ánh các lỗi đó cùng ý kiến của những người khác. Cảm ơn bạn đã quan tâm!
Thiết kế này khá giống với một trang Pomodoro mà tôi từng thấy trước đây. Hay là thử cho xuất hiện nhiều hành tinh khác nhau thì sao?
Ôi đúng là như người ta vẫn nói, dưới bầu trời này chẳng có gì là mới cả...! Tôi đang nghĩ sẽ chỉ để xuất hiện 1 hành tinh, rồi tăng thêm sự thú vị bằng cách cho các yếu tố độc đáo xuất hiện trên đó; tôi cũng sẽ thử nghiệm phương án có nhiều hành tinh. Cảm ơn bạn.
Tôi cũng tưởng là để ngắm cho đầu óc thả lỏng nên đã kỳ vọng kiểu ảnh phơi sáng dài ngoài vũ trụ thật sự... nhưng có vẻ nó khác khá nhiều so với điều tôi mong đợi
Cảm ơn bạn rất nhiều vì ý kiến quý báu. Phần đó chúng mình cũng sẽ tiếp tục bàn bạc cùng AI nhé! haha Tuy nhiên, vì concept đã được định hướng là cố gắng thể hiện mọi thứ tối đa bằng
csshoặcsvg, nên mình sẽ xem thêm các hình ảnh liên quan để tìm cảm hứng!Sẽ tuyệt hơn nếu có một không gian vũ trụ tĩnh lặng và chân thực hơn một chút~
Chúng tôi sẽ mở rộng để bạn có thể chọn nhiều vũ trụ khác nhau ngoài các chủ đề màu sắc. Cảm ơn ý kiến đóng góp quý báu của bạn!
Cảm ơn bạn đã giới thiệu một dự án đầy ý nghĩa. Thật tuyệt vời và đáng ngưỡng mộ khi bạn vẫn không đánh mất ước mơ và tiếp tục thử thách bản thân theo thời gian. Có lẽ các con của bạn cũng sẽ rất thích! Nếu được góp ý một chút thì, 1) sao băng rơi quá nhanh và quá nhiều nên có cảm giác hơi sôi động để “thả hồn theo vũ trụ”? Nếu chúng mờ hơn một chút, ít hơn và rơi chậm hơn thì có lẽ sẽ tạo được bầu không khí dịu dàng và giàu cảm xúc hơn. 2) Ở phần quét hành tinh, với cùng một hành tinh thì liệu có thể chỉ hiển thị cùng một thông tin thôi không? 3) Hiệu ứng black hole trong phần cài đặt có phải là hiệu ứng khi nhấp chuột không? Dù tắt đi thì hiệu ứng đó vẫn không biến mất. 4) Mình chưa rõ Random Color trong phần cài đặt là đang thay đổi màu nào.
Cảm ơn bạn đã phản hồi. Về mưa sao băng, mình đang cân nhắc thêm tùy chọn điều chỉnh tần suất bằng thanh trượt. Phần các hành tinh cũng là một mục cần sửa, cụ thể là để mỗi lần bấm vào sẽ hiện thông tin khác nhau T_T hức. Random Color là tùy chọn để màu của hành tinh xuất hiện được thay đổi ngẫu nhiên mỗi lần. Vì bản thân hành tinh di chuyển khá chậm nên nếu muốn kiểm tra, bạn có thể tắt rồi bật lại tùy chọn Planet ở phía trên để thấy hành tinh hiện ra với màu khác haha. Ban đầu mình muốn hố đen có hiệu ứng hút các ngôi sao xung quanh và tàu vũ trụ vào khi bấm vào,, nhưng phần đó không dễ để xử lý chỉ bằng trình duyệt và javascript, nên hiện tại mình mới chỉ tái hiện được cảm giác là chỉ có các hạt riêng lẻ bị hút vào thôi :(. Việc không tắt được khi chuyển sang off cũng nằm trong kế hoạch sửa. Cảm ơn bạn rất nhiều vì những góp ý quý giá!