240 browser tabs में चलने वाला Pong

 (eieio.games)
1 पॉइंट द्वारा GN⁺ 2025-02-22 | 1 टिप्पणियां | WhatsApp पर शेयर करें

240 browser tabs में Pong चलाना

  • बेकार पड़े tabs का उपयोग: 240 browser tabs को 8x30 grid में सजाकर Pong game चलाया गया। गेंद और paddle foreground window के canvas और सभी tabs के बीच बिना रुकावट आ-जा सकते हैं।

प्रेरणा

  • Flappy Favi: दोस्त Tru ने favicon में चलने वाला Flappy Bird version बनाया था, उसी से प्रेरणा मिली। favicon छोटा होने की वजह से उसे देखना मुश्किल था, इसलिए कई tabs पर image draw करने का विचार आया।

Prototyping

  • tab grid बनाना: AppleScript का इस्तेमाल करके 8 Chrome windows में हर एक में 30 tabs खोले गए और windows को ठीक तरह से रखकर एक बड़ा grid बनाया गया। script शुरू होते समय Chrome के बंद tabs फिर से खोल देने वाले व्यवहार को संभालने के लिए उन्हें साफ करती है।

तेज favicon updates

  • favicon update: HTML के head element में favicon की location देकर browser को icon बदलने के लिए कहा गया। Chrome लगभग प्रति सेकंड 4 बार icon update कर सकता है। background tabs में setInterval loop प्रति सेकंड सिर्फ एक बार चलता है।

  • Web Worker का उपयोग: Web Worker का उपयोग करके timer को main document में message भेजने दिया गया, ताकि background tabs में भी यह smoothly काम करे।

tabs के बीच communication

  • tab position की पहचान: AppleScript code में current window और tab index को query parameter के रूप में पास किया गया, ताकि हर tab अपनी position जान सके।

  • Broadcast Channel का उपयोग: WebSocket की जगह Broadcast Channel का उपयोग करके उसी domain के दूसरे tabs में जानकारी भेजी गई। main tab सभी background tabs के registration events प्राप्त करने के बाद animation चलाता है।

canvas से tab bar तक

  • canvas और tab bar को जोड़ना: foreground window में बने shapes को tab bar तक जाने वाला बनाया गया। सटीक measurement के ज़रिए canvas और favicon को align किया गया, और shape की position के अनुसार favicon और main canvas पर draw किया गया।

speed बढ़ाना

  • resource usage optimization: हर frame में favicon update करने के बजाय सिर्फ बदलाव होने पर update किया गया, जिससे performance बेहतर हुई।

क्या बनाया जाए?

  • game idea: पहले Snake game बनाने की कोशिश थी, लेकिन लगा कि Pong game में canvas और tab bar के बीच move होने वाला effect ज़्यादा अच्छा लगेगा, इसलिए Pong चुना गया।

Pong implementation

  • Pong game implementation: computer player paddle के center को गेंद के center के साथ align करता है। गेंद के paddle से टकराकर उछलने पर angle निकालने के लिए simple trigonometry का उपयोग किया गया। गेंद और paddle के favicon में smoothly जाने वाले effect को उभारने के लिए गेंद में trail भी जोड़ी गई।

समापन

  • project experience: Recurse Center में इस project पर काम करते हुए बहुत प्रेरणा मिली। Recurse Center programming के लिए किसी writer's retreat जैसी जगह है, और वहाँ का अनुभव इस project के लिए बड़ी प्रेरणा बना।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-02-22
Hacker News टिप्पणियाँ

  • नमस्ते! यह मैंने बनाया है। सोच रहा था कि क्या यह HN कम्युनिटी को पसंद आएगा

    • अगर animation का इस्तेमाल किया जाए तो यह कैसा दिखेगा, यह सच में दिलचस्प है (Firefox animated favicon को support करता है) - उदाहरण के लिए, गेंद की भविष्य की स्थिति का अनुमान लगाकर animated SVG बनाया जा सकता है और इससे कहीं बेहतर frame rate मिल सकती है
    • एक दोस्त ने बताया कि offline canvas rasterization (आम तौर पर) GPU पर होती है, इसलिए मेरी animation के अटकने को लेकर मेरी performance intuition गलत हो सकती है
    • मुझे मध्यम स्तर का भरोसा है कि Chrome favicon update को प्रति सेकंड 4 बार तक सीमित करता है; favicon update करने के कई अलग-अलग तरीके हैं, इसलिए हो सकता है कि मैंने कुछ मिस किया हो

  • मैं Nolen की हाल की Recurse talk में गया था, और ये बिल्कुल पागलपन भरे लेकिन मूल रूप से मजेदार और शानदार गेम्स सच में बहुत आकर्षक हैं

    • यह पुराने इंटरनेट की याद दिलाता है, जब लोग सिर्फ मज़े के लिए चीज़ें बनाते थे
    • कल रात Nolen की पोस्ट से प्रेरित होकर मैंने एक बहुत मजेदार तरह का quine बनाया जो पेज का source code प्रिंट करता है, इसमें BEAM decompilation और दूसरे tricks इस्तेमाल किए
    • काश मेरे पास भी ऐसी चीज़ें बनाने का समय होता, और यह जानकर मुस्कान आती है कि लोग अब भी इस तरह कुछ बना रहे हैं
    • अगर हँसना चाहते हैं, तो यह रहा वह काम जो उस quine को हासिल करता है: लिंक

  • Nolen जो कुछ भी बनाता है, मुझे सब पसंद है। मुझे लगता है उसने single-purpose apps/sites बनाने का वह sweet spot पकड़ लिया है जो इंटरनेट के पुराने दिनों की याद दिलाता है

  • Matthew Rayfield की एक मिलती-जुलती खोज, जिसमें tab favicon की जगह URL bar का इस्तेमाल किया गया: लिंक

  • इससे यह याद आता है:

    • "Show HN: यह शानदार experiment देखने के बाद मैंने एक simple version बनाया" (2023.11.25) लिंक
    • "Three.js और localStorage का उपयोग करके कई windows में 3D scene sync करना" (2023.11.27) लिंक

  • मैं कहूँगा Doom अगला है

  • सुखद रूप से बेतुका, A+ effort

  • band "Ok Go" का Google Chrome के साथ एक music video collaboration था, जिसमें browser windows और dancers की शानदार synchronization और kaleidoscope जैसे effects थे... इसने उसकी याद दिला दी

  • लगता है Doom port कुछ ही दिनों में आ जाएगा

  • बहुत बढ़िया, मुझे पसंद है कि Chrome कितना hackable हो सकता है, यह शायद websockets का इस्तेमाल करता है, लेकिन tab communication के लिए extensions भी इस्तेमाल किए जा सकते हैं