बोतल में शहर – 256-बाइट raycasting सिस्टम

 (frankforce.com)
3 पॉइंट द्वारा GN⁺ 2024-05-21 | 1 टिप्पणियां | WhatsApp पर शेयर करें

City In A Bottle – 256-बाइट raycasting सिस्टम

  • परिचय

    • आज हम 256-बाइट HTML फ़ाइल में समाए एक छोटे raycasting engine और city generator का परिचय कर रहे हैं.
    • इस प्रोग्राम में कई concepts इतने छोटे space में समाए हैं कि इसे पहेली सुलझाने की तरह समझा जा सकता है.
    • इसके मुख्य components हैं HTML code, frame update loop, rendering system, raycasting engine, और शहर स्वयं.

  • पूरा कोड

    • यह code कोई साधारण JavaScript snippet नहीं, बल्कि एक पूरा HTML program है.
    • <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>

HTML code

  • HTML code
    • HTML हिस्सा एक simple canvas element और onclick event से बना है.
    • <canvas style=width:99% id=c onclick=setInterval('',t=9)>
    • canvas element का id c रखा गया है, ताकि JavaScript से उसे access किया जा सके.
    • onclick event प्रोग्राम शुरू करता है और setInterval call के जरिए update loop बनाता है.

JavaScript code

  • JavaScript code

    • canvas पर click होने पर चलने वाला 199-बाइट JavaScript code.
    • for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a

  • code विश्लेषण

    • code को पढ़ने में आसान बनाने के लिए तोड़कर दिखाया गया है.
    • c.width = w = 99
++t
for (i = 6e3; i--;){
  a = i%w/50 - 1
  s = b = 1 - i/4e3
  X = t
  Y = Z = d = 1
  for(; ++Z<w &  (Y < 6 - (32<Z & 27<X%w && X/9^Z/8)*8%46 ||  d | (s = (X&Y&Z)%3/Z, a = b = 1, d = Z/w));) {
    X += a
    Y -= b
  }
  c.getContext`2d`.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1)
}

  • code की चरण-दर-चरण व्याख्या

    • c.width = w = 99: canvas को initialize करता है और width को 99 pixels पर सेट करता है.
    • ++t: time variable को बढ़ाता है, जिससे animation बनता है.
    • for (i = 6e3; i--;){}: loop के जरिए हर pixel की brightness तय करता है.
    • a = i % w / 50 - 1: camera vector के horizontal component की गणना करता है.
    • b = s = 1 - i / 4e3: camera vector के vertical component की गणना करता है.
    • X = t: time value को शुरुआती X position के रूप में इस्तेमाल करता है.
    • Y = Z = d = 1: Y, Z, और d values को initialize करता है.
    • for(; ++Z<w & ...;): raycasting system collision detect होने तक loop चलाता है.
    • c.getContext2d.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1): हर pixel को draw करके final image बनाता है.

अतिरिक्त अध्ययन

  • अतिरिक्त अध्ययन
    • यह demo Revision 2022 demoparty में प्रस्तुत किया गया था, और इसे Pouet पर देखा जा सकता है.
    • Shadertoy पर इसका 256-बाइट shader में विस्तारित version भी देखा जा सकता है.
    • Daniel Darabos द्वारा बनाए गए interactive tool के जरिए प्रोग्राम के विभिन्न पहलुओं को real time में नियंत्रित किया जा सकता है.

GN⁺ की राय

  • दिलचस्प बिंदु

    • यह program दिखाता है कि बहुत छोटे code से complex graphics कैसे बनाई जा सकती हैं.
    • यह ऐसे basic math का इस्तेमाल करता है जिसे शुरुआती software engineer भी आसानी से समझ सकते हैं.
    • code optimization और minimalism का यह एक अच्छा उदाहरण है, जो code golf जैसी competitions में उपयोगी हो सकता है.

  • आलोचनात्मक दृष्टिकोण

    • code बहुत अधिक compressed है, इसलिए इसकी readability कम हो सकती है.
    • यह व्यावहारिक applications की तुलना में कलात्मक और प्रयोगात्मक उद्देश्यों के लिए अधिक उपयुक्त है.

  • संबंधित तकनीकें

    • इसी तरह के projects के लिए Shadertoy पर विभिन्न shader examples देखे जा सकते हैं.
    • Dwitter जैसे platforms पर अन्य छोटे code examples भी खोजे जा सकते हैं.

  • तकनीक अपनाने पर विचार

    • इस तकनीक को अपनाते समय code readability और maintainability पर विचार करना चाहिए.
    • छोटे code से complex functionality लागू करने में performance optimization और debugging की कठिनाइयों को समझना चाहिए.

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

1 टिप्पणियां

 
GN⁺ 2024-05-21
Hacker News टिप्पणियाँ

Hacker News टिप्पणियों का सारांश

  • JavaScript में 1K Pinball Game:

    • "इतने कम कोड में इतनी सारी जानकारी समा सकती है, यह हैरान करने वाला है।"
    • "यह वाकई शानदार है, लेकिन लेख पढ़ते समय loop लगातार चलता रहा और मेरा laptop ज़्यादा गर्म हो गया।"
    • "संबंधित सामग्री: [Atari 2600] Pitfall की world-building विधि, procedural generation, lazy evaluation आदि।"

  • Procedural generation और lazy evaluation:

    • "procedural generation पर विभिन्न सामग्रियों के लिंक दिए गए हैं।"
    • "lazy evaluation और raytracing algorithm के बीच समानता पर एक टिप्पणी।"

  • अन्य टिप्पणियाँ:

    • "वाकई शानदार! बढ़िया काम।"
    • "काम और लेख, दोनों ही हैरान करने वाले हैं।"
    • "256-byte MS-DOS demo जैसा Remnants by Alcatraz - YouTube लिंक सहित।"
    • "यह JavaScript में लिखा गया है, यही इसे और भी प्रभावशाली बनाता है।"
    • "सचमुच अद्भुत।"
    • "पढ़ने में मज़ेदार है।"
    • "अगर आपको यह पसंद है, तो Twitter का #tweetcart भी पसंद आएगा। ये Pico-8 virtual console के लिए tweet-size programs हैं।"