Memperkenalkan jam web untuk 'melamun ke angkasa', 'Orbit of Night'.
(orbit.ggoban.com)Halo!
Saya ingin memperkenalkan proyek sampingan yang saya buat sejak pagi ini bersama AI dengan pendekatan 'vibe coding', yaitu jam dengan wallpaper latar luar angkasa yang indah, 'Orbit of Night'.
Awalnya ini hanyalah satu halaman dari fitur web yang sedang saya buat, tetapi rasanya agak sayang jika dibiarkan hanya sebagai satu halaman, jadi saya mulai mengembangkannya. Saya membuatnya dengan tujuan menghadirkan pengalaman yang membuat orang ingin berhenti sejenak dan 'melamun' sambil memandangnya.
Fitur utama
- Wallpaper hidup: latar dengan bintang, nebula, dan meteor yang terus bergerak
- Pelacakan ISS real-time: orbit sinusoidal yang bergerak stabil di dalam layar, dikoreksi berdasarkan data posisi ISS yang sebenarnya
- Elemen interaktif: klik planet untuk melakukan pemindaian virtual, ditambah keseruan kecil seperti UFO dan efek lubang hitam
- Pengaturan pengguna: elemen seperti planet, UFO, dan ISS bisa dinyalakan atau dimatikan sesuai selera, serta tersedia 3 tema
Dibuat tanpa framework tambahan, murni dengan JavaScript dan animasi CSS (meski yang mengimplementasikan adalah AI, saya sampai dibilang terlalu perfeksionis saat meninjaunya?), dan khusus untuk orbit ISS saya mencoba pendekatan hibrida yang menggabungkan simulasi stabil dengan koreksi data real-time.
TMI: kisah seorang bapak 40-an yang mulai membangun dengan AI
Sebenarnya, saya adalah seorang ayah dengan putra-putri yang kini sudah memasuki usia 40-an.
Kalau memperkenalkan diri secara singkat, saya berasal dari generasi yang sempat menikmati game berbasis teks dan MUD di masa lalu, dan juga seorang gamer yang punya banyak kecintaan pada web game.
Saya lulusan ilmu komputer dan pekerjaan saya memang di bidang IT, tetapi lebih dekat ke sisi server engineer. Karena itu, saya menjadi karyawan biasa yang kurang lebih bisa menyentuh middleware, backend, dan frontend juga.
Namun, sejak dulu saya selalu punya mimpi ingin membuat game. Setelah merasakan kemampuan AI yang berkembang pesat, saya berpikir, 'sekarang waktunya sudah tiba!', dan sejak Oktober tahun lalu saya banyak melakukan apa yang sekarang disebut vibe coding dengan AI di waktu luang.
Saat ini saya sedang mengerjakan proyek mainan web game ketiga saya. Di tengah proses itu, ketika membuat satu halaman fitur, saya mendapat inspirasi spontan dan membuat satu layar dengan lebih serius. Lalu terpikir, sayang juga jika hanya dipakai di sana. Dari situlah proyek ini lahir.
Bagaimana kalau mampir sekali dan mencoba 'melamun ke angkasa'?
Masukan selalu saya sambut!
21 komentar
Ini proyek yang keren.
Terima kasih atas perhatiannya!
Keren sekali!
Terima kasih atas perhatian hangatnya!
Cocok sekali dijadikan wallpaper latar browser! Rasanya mirip seperti memasang tampilan luar angkasa di wallpaper iPhone.
Terima kasih atas perhatiannya yang hangat! Saya berencana menampilkannya di tablet lama yang sudah tidak terpakai di rumah, lalu memberinya bingkai sederhana dan memakainya sebagai jam, haha!
Bagus~
Akan lebih baik kalau planetnya juga di-upgrade dengan merujuk ke ini
https://codepen.io/jamesfinn180/pen/VwzENbR
Wow! Ternyata memang ada banyak sekali orang hebat di dunia ini. Terima kasih atas perhatiannya. Karena ini terasa seperti dilihat dari Bumi, Bumi mungkin tidak akan muncul apa adanya, tetapi saya akan mencoba mengembangkannya dan melakukan upgrade dengan menerapkannya!
Benar-benar menenangkan dan membahagiakan
Terima kasih sudah membuat karya yang bagus. :)
Terima kasih atas jawaban yang hangat T_T jadi lebih bersemangat.
Kami telah mengumpulkan masukan yang disampaikan dan melakukan perbaikan! 1. Planet memiliki informasi tetap saat dibuat. 2. Opsi hujan meteor kini bisa diubah di pengaturan sesuai selera masing-masing. (frekuensi kemunculan, kecepatan, jumlah) 3. Nebula, serta Bima Sakti yang mungkin tidak terlalu terlihat, dan juga cahaya bintang telah disesuaikan. 4. Jika opsi black hole dimatikan, sekarang tidak akan berfungsi. 5. Kami menambahkan efek sebagai homage yang mirip dengan warp di Stxwarx. 6. Kadang-kadang teman-teman unik muncul di atas planet. Terima kasih banyak atas perhatian dan minat kalian semua!
Ini memang hal sepele, tapi meski efek black hole dimatikan, efek black hole-nya tetap berjalan. ^^ Proyek yang keren sekali~!
Ya, terima kasih ^^ Bug-bug tersebut dan masukan dari pengguna lain akan kami refleksikan, lalu versi yang sudah ditingkatkan akan segera diterapkan. Terima kasih atas perhatiannya!
Desainnya mirip dengan yang pernah saya lihat dulu di sebuah situs pomodoro. Bagaimana kalau ditambahkan beberapa planet yang berbeda?
Ah, benar juga seperti kata orang, tidak ada yang benar-benar baru di bawah langit dunia ini...! Saya sempat berpikir untuk menambah keseruan dengan hanya menampilkan 1 planet lalu memunculkan elemen-elemen unik di atasnya, tetapi saya juga akan mencoba menguji versi dengan beberapa planet. Terima kasih.
Saya juga mengira ini untuk bengong sambil menatap, jadi saya berharap sesuatu seperti foto long-exposure luar angkasa sungguhan.. tapi rasanya sangat berbeda dari yang saya bayangkan
Terima kasih atas masukannya yang berharga. Bagian tersebut juga akan kami pikirkan bersama AI! haha Namun, karena konsep yang kami ambil adalah mencoba mengekspresikan semuanya semaksimal mungkin lewat CSS atau SVG, kami akan mencari inspirasi sambil melihat foto-foto terkait!
Akan lebih bagus jika tampilannya menghadirkan nuansa luar angkasa yang sedikit lebih tenang dan realistis~
Kami akan memperluasnya agar Anda dapat memilih beragam semesta, bukan hanya tema warna. Terima kasih atas masukan berharganya!
Terima kasih telah memperkenalkan proyek yang bermakna ini. Sangat keren dan mengagumkan melihat Anda tetap tidak kehilangan mimpi dan terus menantang diri bahkan setelah waktu berlalu. Sepertinya anak-anak Anda juga akan menyukainya! Jika saya boleh memberi beberapa masukan: 1) Hujan meteor jatuh terlalu cepat dan terlalu banyak, jadi rasanya agak terlalu heboh untuk sekadar bengong memandanginya. Mungkin kalau dibuat sedikit lebih samar, lebih sedikit, dan jatuh lebih pelan, suasananya bisa terasa lebih tenang dan puitis. 2) Pada pemindaian planet, bagaimana kalau untuk planet yang sama hanya menampilkan informasi yang sama? 3) Apakah efek black hole di pengaturan maksudnya efek saat diklik? Meski di-Off-kan, efek tersebut tidak mati. 4) Saya kurang paham warna apa yang berubah pada opsi Random Color di pengaturan.
Terima kasih atas masukannya. Untuk hujan meteor, kami sedang mempertimbangkan opsi untuk mengatur frekuensinya lewat slider. Bagian planet yang menampilkan informasi berbeda setiap kali diklik juga masuk dalam daftar perbaikan T_T hiks.
Random Coloradalah opsi agar warna planet yang muncul selalu acak setiap kali ditampilkan. Karena planetnya sendiri bergerak pelan, kalau ingin mengeceknya Anda bisa mematikan lalu menyalakan lagi opsiPlanetdi atasnya, nanti Anda bisa melihat planet dengan warna berbeda muncul hehe. Untuk black hole, awalnya saya ingin memberi efek agar bintang-bintang di sekitarnya dan pesawat luar angkasa tersedot saat diklik,, tetapi itu cukup sulit kalau hanya ditangani dengan browser dan JavaScript, jadi untuk sekarang saya baru mengimplementasikan kesan bahwa hanya partikel-partikelnya saja yang tersedot huhu. Soal yang tidak bisa dimatikan denganoffjuga memang akan diperbaiki. Terima kasih banyak atas pendapat berharganya!