"Uzay boşluğuna dalabileceğiniz" web saati: "Gecenin Yörüngesi" ile tanışın
(orbit.ggoban.com)Merhaba!
Bugün sabah saatlerinden beri yapay zeka ile birlikte "vibe coding" yaparak oluşturduğum yan projeyi, güzel bir uzay duvar kâğıdı saati olan "Gecenin Yörüngesi (Orbit of Night)"ı tanıtmak istiyorum.
Aslında geliştirdiğim bir web özelliğinin içindeki tek bir sayfaydı; ama onu sadece tek bir sayfa olarak bırakmak nedense biraz yazık olacakmış gibi geldiği için bu projeye başladım. Hedefim de bakarken insanın kısa bir süreliğine dalıp gitmek istemesini sağlayan bir deneyim oluşturmaktı.
Başlıca özellikler
- Canlı duvar kâğıdı: Yıldızlar, bulutsular ve kayan yıldızların sürekli hareket ettiği arka plan
- Gerçek zamanlı ISS takibi: Gerçek ISS konum verilerine göre düzeltilen ve ekran içinde istikrarlı biçimde hareket eden sinüs eğrisi yörüngesi
- Etkileşimli öğeler: Gezegenlere tıklayıp sanal tarama yapabilme, UFO ve kara delik efektleri gibi küçük eğlenceler
- Kullanıcı ayarları: Zevkinize göre gezegen, UFO, ISS gibi öğeleri açıp kapatabilme ve 3 tema seçeneği
Herhangi bir ek framework kullanmadan, saf JavaScript ve CSS animasyonlarıyla geliştirildi (gerçi uygulayan yapay zekaydı ama denetlerken yapay zekadan ne kadar titiz olduğuma dair laf işittim?). Özellikle ISS yörüngesini, istikrarlı simülasyon ile gerçek zamanlı veri düzeltmesini birleştiren hibrit bir yöntemle oluşturmaya çalıştım.
TMI: 40'lı yaşlarında bir adamın yapay zekayla geliştirme hikâyesi
Aslında ben artık 40'larına gelmiş, bir kız ve bir erkek çocuk babasıyım.
Kendimi kısaca tanıtmak gerekirse, yaşım gereği geçmişte metin ve MUD tabanlı oyunlardan başlayarak oyunlarla tanışmış bir nesilden geliyorum; ayrıca web oyunlarına da büyük sevgi besleyen bir oyuncuyum.
Bilgisayar mühendisliği okudum ve işim IT alanında olsa da daha çok sunucu mühendisliğine yakındım; bu yüzden middleware, backend ve frontend taraflarında da bir ölçüde el yatkınlığım olan sıradan bir çalışanım.
Ama eskiden beri oyun yapmak gibi bir hayalim hep vardı. Gelişmiş yapay zekanın performansını deneyimledikten sonra da "Artık zamanı geldi!" diye düşündüm ve geçen yılın ekim ayından beri boş zamanlarımda, bugünlerde denilen şekliyle çoğunlukla AI ile vibe coding yapıyorum.
Şu anda üçüncü web oyunu oyuncak projem üzerinde çalışıyorum. Arada bir özellik sayfası geliştirirken anlık bir ilhamla özen gösterdiğim bir ekran ortaya çıkmıştı; sonra düşündüm de, onu sadece orada kullanmak biraz israf olacak gibiydi. İşte bu proje böyle doğdu.
Bir uğrayıp biraz "uzay boşluğuna dalmayı" denemek istemez misiniz?
Geri bildirim her zaman memnuniyetle karşılanır!
21 yorum
Harika bir proje.
İlginiz için teşekkürler!
Harika görünüyor!
İlginiz için teşekkür ederiz!
Tarayıcı arka planı olarak gerçekten çok iyi duruyor! iPhone arka planına uzayı koymuşsunuz hissine benziyor.
Sıcak ilginiz için teşekkür ederim! Ben de evde kullanmadığım, biraz eski bir tablete açıp basit bir çerçeveyle saat olarak kullanmayı düşünüyorum haha!
Güzel~
Bunu referans alıp gezegenleri de yükseltirsek daha iyi olabilir
https://codepen.io/jamesfinn180/pen/VwzENbR
Vay canına! Dünyada gerçekten inanılmaz insanlar çok fazla. İlginiz için teşekkür ederim. Dünya’dan bakıyormuş hissi verdiği için Dünya’nın aynen görünmesi söz konusu olmasa da, bunu uygulayıp geliştirerek yükseltmeyi deneyeceğim!
Gerçekten çok huzur vericiydi ve mutluluk doluydu.
Böyle güzel bir eser yarattığınız için teşekkür ederim. :)
Sıcak cevabınız için çok teşekkür ederim T_T daha da güç veriyor.
Belirttiğiniz görüşleri dikkate alıp düzenlemeleri yaptım! 1. Gezegenler oluşturulurken sabit bilgilere sahip olur. 2. Meteor yağmuru seçeneği, ayarlardan kişisel tercihlere göre değiştirilebilir. (oluşma sıklığı, hız, sayı) 3. Bulutsu, çok belli olmasa da Samanyolu ve yıldız ışığı ayarlandı. 4. Kara delik seçeneğini kapatırsanız artık çalışmıyor. 5. Stx Wxrps'taki warp'a benzer bir etkiyi saygı duruşu olarak ekledim. 6. Gezegenlerin üzerinde ara sıra ilginç arkadaşlar beliriyor. Herkesin gösterdiği yoğun ilgi için çok teşekkür ederim!
Ufak bir şey ama, kara delik efektini kapatsanız da efekt yine çalışmaya devam ediyor. ^^ Harika bir proje olmuş~!
Evet, teşekkürler ^^ Söz konusu hataları ve diğer kişilerin görüşlerini yansıtarak iyileştirdiğimiz sürümü yakında uygulayacağız. İlginiz için teşekkür ederiz!
Eskiden bir pomodoro sitesinde gördüğüm tasarıma benziyor. Çeşitli gezegenlerin görünmesi nasıl olurdu?
Ah, gerçekten de dendiği gibi bu dünyada güneşin altında yeni bir şey yokmuş...! Eğlenceyi artırmak için yalnızca 1 gezegen gösterip onun üzerinde benzersiz öğelerin ortaya çıkmasını sağlamayı düşünüyorum, ama birden fazla gezegenin çıktığı bir sürümü de test edeceğim. Teşekkürler.
Ben de dalıp gitmek için olduğunu duyunca gerçekten uzayın uzun pozlama çekimleri gibi bir şey beklemiştim ama... beklediğimden oldukça farklıydı galiba
Değerli görüşünüz için teşekkürler. O kısmı da yapay zeka ile birlikte değerlendireceğiz! :) Yalnız, konsepti tüm ifadeleri mümkün olduğunca
cssveyasvgüzerinden vermek üzerine kurduğumuz için, ilgili görsellere bakarak ilham almaya çalışacağım!Biraz daha sakin ve gerçekçi hissettiren bir uzay görünse daha iyi olur gibi~
Renk temalarının yanı sıra farklı evrenleri de seçebilmek için bunu genişleteceğiz. Değerli görüşünüz için teşekkür ederiz!
Anlamlı bir projeyi tanıttığınız için teşekkürler. Zaman geçse de hayallerinizden vazgeçmeden meydan okumaya devam etmeniz çok güzel ve takdire şayan. Çocuklarınızın da hoşuna gidecek gibi görünüyor! Birkaç geri bildirim vermek gerekirse, 1) Meteor yağmuru biraz fazla hızlı ve çok sık düşüyor; boş boş izlemek için biraz fazla hareketli kalıyor diyebilirim. Biraz daha silik, daha az ve daha yavaş düşerse sakin ve duygusal bir atmosfer oluşturabilir gibi geliyor. 2) Gezegen taramasında, aynı gezegen için hep aynı bilginin çıkmasını sağlamak nasıl olur? 3) Ayarlardaki black hole effect, tıklama efektini mi ifade ediyor? Off yapsam da o efekt kapanmıyor. 4) Ayarlardaki Random Color'ın hangi rengi değiştirdiğini pek anlayamadım.
Geri bildiriminiz için teşekkürler. Meteor yağmuru için, kaydırıcı üzerinden sıklığı ayarlama seçeneğini değerlendiriyoruz. Gezegenlerde de her tıklamada farklı bilgi çıkması kısmı da düzeltilecek şeylerden biri T_T Ahh.
Random Color, görünen gezegenin renginin her seferinde rastgele gelmesini sağlayan bir seçenektir. Gezegenin kendisi yavaşça hareket ettiği için, kontrol etmek isterseniz üstteki Planet seçeneğini kapatıp açarak farklı renkte bir gezegen çıktığını görebilirsiniz haha. Kara delikte aslında etraftaki yıldızlar ve uzay gemisinin tıklanınca içine çekildiği bir efekt vermek istemiştim ama bunu yalnızca tarayıcı ve JavaScript ile yapmak pek kolay olmadığından, sadece ayrı parçacıkların içeri çekiliyormuş hissini verecek kadarını uyguladım. Off konumunda kapanmaması da yine düzeltilmesi planlanan bir şey. Değerli görüşleriniz için teşekkür ederim!