'स्पेस-ट्रांस' में खो जाने लायक वेब घड़ी, 'Night Orbit' का परिचय
(orbit.ggoban.com)नमस्ते!
आज सुबह से AI के साथ 'vibe coding' करके बनाए गए एक साइड प्रोजेक्ट, खूबसूरत अंतरिक्ष वॉलपेपर घड़ी 'Bamui Gwedo (Orbit of Night)' का परिचय कराना चाहता हूँ।
यह मूल रूप से उस वेब फीचर का सिर्फ एक पेज था जिसे मैं बना रहा था, लेकिन किसी वजह से लगा कि इसे सिर्फ एक पेज तक सीमित छोड़ देना थोड़ा अफसोस की बात होगी। इसलिए इसे बनाना शुरू किया, और लक्ष्य था ऐसा अनुभव तैयार करना जिसे देखते हुए आप थोड़ी देर बस यूँ ही खो जाएँ।
मुख्य विशेषताएँ
- जीवंत वॉलपेपर: ऐसा बैकग्राउंड जिसमें तारे, नीहारिकाएँ और उल्काएँ लगातार चलती रहती हैं
- रीयल-टाइम ISS ट्रैकिंग: वास्तविक ISS लोकेशन डेटा के आधार पर समायोजित, स्क्रीन के भीतर स्थिर रूप से चलने वाली sine curve कक्षा
- इंटरैक्टिव एलिमेंट्स: ग्रहों पर क्लिक करके वर्चुअल स्कैन करना, साथ में UFO और ब्लैकहोल इफेक्ट जैसे छोटे-छोटे मज़ेदार तत्व
- यूज़र सेटिंग्स: अपनी पसंद के अनुसार ग्रह, UFO, ISS जैसे तत्वों को on/off कर सकते हैं, और 3 थीम भी उपलब्ध हैं
इसे किसी अलग framework के बिना, शुद्ध JavaScript और CSS animation से बनाया गया है (हालाँकि इम्प्लीमेंटेशन AI ने किया, लेकिन समीक्षा करते समय AI से मुझे यह भी सुनना पड़ा कि मैं काफ़ी सख्त हूँ?), और खास तौर पर ISS कक्षा को स्थिर simulation और रीयल-टाइम डेटा correction को मिलाकर एक hybrid तरीके से बनाया गया है.
TMI: 40s के एक पापा की AI के साथ डेवलपमेंट की कहानी
असल में मैं अब 40s में पहुँच चुका, बेटे-बेटी वाला एक पिता हूँ।
अपना परिचय संक्षेप में दूँ तो, उम्र के हिसाब से मैं उस पीढ़ी से हूँ जिसने पुराने टेक्स्ट और MUD-आधारित गेम्स से शुरुआत की थी, और वेब गेम्स के लिए भी आज तक मेरे मन में बहुत लगाव है।
मैंने Computer Science पढ़ी, काम भी IT में ही किया, लेकिन झुकाव ज़्यादा server engineer की तरफ रहा। इसी वजह से middleware, backend और frontend भी कुछ हद तक संभालना सीख गया—एक बिल्कुल सामान्य नौकरीपेशा इंसान की तरह।
लेकिन बहुत पहले से गेम बनाना मेरा सपना रहा है। AI की विकसित क्षमता को अनुभव करने के बाद मुझे लगा, 'अब समय आ गया है!' और तभी से पिछले साल अक्टूबर से मैं अपनी फुर्सत के समय में AI के साथ आजकल जिसे लोग vibe coding कहते हैं, वही मुख्य रूप से कर रहा हूँ।
इस समय मैं अपना तीसरा web game toy project बना रहा हूँ। बीच में एक फीचर पेज बनाते हुए अचानक एक ऐसी स्क्रीन बनी जिसमें मैंने थोड़ा extra effort डाला था, और फिर अचानक लगा कि उसे सिर्फ वहीं इस्तेमाल करना कुछ अफसोस की बात होगी। इसी तरह यह प्रोजेक्ट जन्मा।
एक बार आकर थोड़ा 'स्पेस-ट्रांस' में खोकर देखिए, कैसा रहेगा?
फ़ीडबैक हमेशा स्वागत योग्य है!
21 टिप्पणियां
यह एक शानदार प्रोजेक्ट है।
रुचि के लिए धन्यवाद!
बहुत शानदार!
आपकी गर्मजोशी भरी रुचि के लिए धन्यवाद!
ब्राउज़र वॉलपेपर के तौर पर यह वाकई बहुत बढ़िया है! यह कुछ-कुछ iPhone वॉलपेपर में अंतरिक्ष लगा होने जैसा एहसास देता है।
आपकी गर्मजोशी भरी दिलचस्पी के लिए धन्यवाद! मैं इसे घर में पड़े एक पुराने, इस्तेमाल न हो रहे टैबलेट पर खोलकर, कोई साधारण-सा फ्रेम लगाकर घड़ी की तरह इस्तेमाल करने की सोच रहा हूँ, हाहा!
अच्छा है~
इसे रेफ़र करके अगर ग्रहों को भी अपग्रेड किया जाए तो और अच्छा लगेगा
https://codepen.io/jamesfinn180/pen/VwzENbR
वाह! दुनिया में वाकई बहुत कमाल के लोग हैं। रुचि दिखाने के लिए धन्यवाद। क्योंकि यह धरती से देखने का एहसास देता है, इसलिए हो सकता है कि धरती वैसी की वैसी न दिखे, लेकिन मैं इसे लागू करके और अपग्रेड करने की चुनौती ज़रूर लूंगा!
यह सचमुच बहुत सुकून देने वाला और खुश करने वाला था।
इतना अच्छा काम बनाने के लिए धन्यवाद। :)
गरमजोशी भरे जवाब के लिए धन्यवाद T_T इससे मुझे और हिम्मत मिली है।
आपकी बताई गई राय को ध्यान में रखकर मैंने संशोधन कर दिए हैं! 1. ग्रह बनते समय निश्चित जानकारी रखते हैं। 2. उल्कावृष्टि विकल्प को अब व्यक्तिगत पसंद के अनुसार सेटिंग्स में बदला जा सकता है। (आवृत्ति, गति, संख्या) 3. नीहारिका और, भले ही वह बहुत स्पष्ट न हो, आकाशगंगा, साथ ही तारों की रोशनी को समायोजित किया गया है। 4. अब Black Hole विकल्प बंद करने पर वह काम नहीं करता। 5. Star Wars के warp जैसी भावना वाला एक homage effect जोड़ दिया गया है। 6. ग्रहों के ऊपर कभी-कभी कुछ अनोखे दोस्त दिखाई देते हैं। आप सबने जो इतना ध्यान और रुचि दिखाई, उसके लिए बहुत-बहुत धन्यवाद!
छोटी-सी बात है, लेकिन Black Hole effect को बंद करने पर भी वही Black Hole effect काम करता रहता है. ^^ बहुत बढ़िया प्रोजेक्ट है~!
जी, धन्यवाद ^^ उन bugs और अन्य लोगों की राय को शामिल करके सुधारा हुआ version जल्द ही लागू करने की योजना है। रुचि और समर्थन के लिए धन्यवाद!
यह डिज़ाइन मुझे पहले किसी Pomodoro साइट पर देखे गए डिज़ाइन जैसा लग रहा है। अगर इसमें कई तरह के ग्रह दिखाई दें तो कैसा रहेगा?
अरे, सच में जैसा कहा जाता है कि इस दुनिया के आसमान के नीचे कुछ भी बिल्कुल नया नहीं है...! मैं सोच रहा हूँ कि सिर्फ 1 ग्रह दिखे और उसके ऊपर unique elements प्रकट हों ताकि मज़ा बढ़े, लेकिन कई ग्रहों के आने वाला वर्ज़न भी टेस्ट करके देखूँगा। धन्यवाद।
मुझे भी लगा था कि यह बस शून्य में खोकर देखने के लिए है, इसलिए मैंने सचमुच के अंतरिक्ष long-exposure शॉट्स जैसी किसी चीज़ की उम्मीद की थी.. लेकिन लगता है कि यह मेरी उम्मीदों से काफ़ी अलग था।
कीमती राय के लिए धन्यवाद। उस हिस्से पर भी हम AI के साथ मिलकर सोचेंगे! haha लेकिन हमारा कॉन्सेप्ट यह है कि सभी अभिव्यक्तियाँ जहाँ तक संभव हो
cssयाsvgके जरिए ही दिखाएँ, इसलिए हम संबंधित तस्वीरें देखकर प्रेरणा लेने की कोशिश करेंगे!अगर थोड़ा और शांत और real feel वाला अंतरिक्ष दिखे तो अच्छा लगेगा~
हम रंग थीम के अलावा अलग-अलग ब्रह्मांड भी चुन सकें, इसके लिए इसे और विस्तारित करेंगे। आपके मूल्यवान सुझाव के लिए धन्यवाद!
अर्थपूर्ण प्रोजेक्ट का परिचय कराने के लिए धन्यवाद। समय बीतने के बाद भी सपनों को खोए बिना चुनौती लेते रहना बहुत शानदार और सम्मानजनक है। लगता है आपके बच्चे भी इसे पसंद करेंगे! कुछ फ़ीडबैक देना चाहूँगा: 1) उल्का-वर्षा बहुत तेज़ी से और बहुत ज़्यादा गिरती है, इसलिए उसे देखते हुए खो जाने के बजाय थोड़ा ज़्यादा रोमांचक लगती है। अगर वे थोड़ा और धुंधली, कम संख्या में, और धीरे गिरें, तो शायद अधिक शांत और भावनात्मक माहौल बन सके। 2) ग्रह स्कैन में, क्या एक ही ग्रह के लिए हमेशा वही जानकारी दिखाई जाए तो कैसा रहेगा? 3) सेटिंग्स में Black Hole effect क्या क्लिक इफ़ेक्ट को दर्शाता है? Off करने पर भी वह इफ़ेक्ट बंद नहीं होता। 4) सेटिंग्स में Random Color किस रंग को बदलता है, यह मुझे ठीक से समझ नहीं आया।
फ़ीडबैक के लिए धन्यवाद। Meteor shower के लिए हम slide के ज़रिए उसकी frequency को नियंत्रित करने वाला एक option जोड़ने पर विचार कर रहे हैं। हर click पर ग्रहों के बारे में अलग जानकारी दिखने वाला हिस्सा भी सुधार के दायरे में है T_T kheuruk। Random Color वह option है जिसमें दिखाई देने वाले ग्रह का रंग हर बार random आता है। क्योंकि ग्रह खुद धीरे-धीरे चलता है, इसलिए अगर आप देखना चाहें तो उसके ऊपर वाले Planet option को off करके फिर on करें, तब आप अलग रंग का ग्रह दिखाई देना देख सकेंगे haha. Black hole के लिए मूल रूप से मैं ऐसा effect देना चाहता था कि आसपास के तारे और spaceship click करने पर उसकी ओर खिंच जाएँ,, लेकिन उसे सिर्फ browser और javascript से संभालना आसान नहीं था, इसलिए अभी बस इतना implement किया है कि अलग particle ही खिंचते हुए महसूस हों yu. off पर बंद न होने वाली बात भी आगे ठीक करने की योजना है। आपकी कीमती राय के लिए धन्यवाद!