🤵 🦎 👋🏻 252 अक्षर 🧓🏻 😴 🎾

लेखों की लोकप्रिय श्रृंखला की निरंतरता में, कि जावास्क्रिप्ट की 30 पंक्तियाँ सभी के लिए पर्याप्त हैं , मैं आपके ध्यान में मैथ्यू P01 हेनरी के लेख का अनुवाद उनके नवीनतम कार्य के बारे में लाता हूं:

(इसके बाद प्रथम-व्यक्ति पाठ के रूप में संदर्भित, सभी "I" P01 को देखें)

प्रेरणा

लगभग एक साल पहले, नॉटच ने एक जावास्क्रिप्ट पर लिखा था कि प्रक्रियात्मक बनावट के साथ मिनीक्राफ्ट की दुनिया भर में एक फ्लायर , केवल 4 किलो वजन के साथ एक कैमरा और एक कोहरा प्रभाव ... वह शांत दिखी और जीवंत रूप से काम किया। उसका कोड गति के लिए ट्यून किया गया है, अर्थात थोड़ा प्रयास करने के बाद, इसे 2 या 1 किलोबाइट तक निचोड़ना वास्तव में संभव था।

एक महीने पहले, मैंने वेल्फेनस्टीन को एकजुट किया , और समुदाय की प्रतिक्रिया बहुत उत्साहजनक थी। इसलिए मैंने अगला कदम उठाया और पूर्ण 3 डी पर चला गया।

स्रोत कोड

<body onload=setInterval(F=";t+=.1;Q=Math.cos;for(x=n=c.height=300;x-=4;)for(y=n;y-=4;d.fillRect(x,y,E,Z^z?4:E))for(D=0;(E=4-D/2)&&F<F[(t+D*Q(T=x/n-.5+Q(t/9))&7)*8|(Z=3.7+D*Q(T-8)&7)*4|(6.5-D*y/nE)];z=Z)D+=1/8",t=55),d=c.getContext('2d')><canvas id=c>

देखा! 252 शैतानीवाद के साथ एक 3 डी दुनिया, कैमरा और कोहरे प्रभाव।

पोंटस के लिए संस्करण 248

 <body onload=setInterval(F=";t+=.1;Q=Math.cos;for(x=n=c.height=300;x-=4;)for(y=n;y-=4;c.getContext('2d').fillRect(x,y,E,Z^z?4:E))for(D=0;(E=4-D/2)&&F<F[(t+D*Q(T=x/n-.5+Q(t/9))&7)*8|(Z=3.7+D*Q(T-8)&7)*4|(6.5-D*y/nE)];z=Z)D+=1/8",t=55)><canvas id=c>

248 बाइट्स पर मिनीक्राफ्ट का थोड़ा धीमा संस्करण , क्योंकि मैं कर सकता हूं! सब कुछ समान है, केवल यह अधिक धीरे-धीरे काम करता है।

कैसे?

आप शायद सोच रहे हैं कि कैसे 3 डी इंजन, कैमरे की उड़ान पथ और तीन आयामी दुनिया स्वयं एचटीएमएल और जावास्क्रिप्ट के 252 बाइट्स में फिट होती है। यह विभिन्न सुंदर और गंदे चालों का एक नारकीय मिश्रण है; उनमें से कुछ नीचे चर्चा की जाएगी।

बौना कंधा

वास्तव में, मिनीक्राफ्ट अपने लघु पूर्ववर्तियों के कंधों पर खड़ा है - वुल्फेनस्टीन, स्टॉर्म इन ए ग्लास और रयोनिक्लिक । यहाँ उपयोग किए गए कई ट्रिक्स पहले ही इन रिलीज़ के साथ वर्णित किए गए हैं।

ड्राइंग

इस डेमो की आकार सीमा को देखते हुए, एक सुंदर प्रतिपादन के लिए कोई जगह नहीं थी। मुझे एक निश्चित पिच के साथ मोटे रे ट्रेसिंग का उपयोग करना था।

यदि आप रुचि रखते हैं कि इन अपमानजनक शब्दों के पीछे क्या छिपा है, तो सब कुछ काफी सरल है। आप जिस दुनिया को आकर्षित करना चाहते हैं उसका प्रतिनिधित्व करने वाले फ़ंक्शन को वास्तव में कैमरे और उन बिंदुओं के बीच के स्थान के प्रत्येक बिंदु के लिए गणना की जाती है जिन्हें आप वास्तव में आकर्षित करते हैं। दूसरे शब्दों में, आप इस बोल्ड फ़ंक्शन को प्रदर्शन अनुकूलन के किसी भी संकेत के बिना प्रति फ्रेम हजारों, हजारों बार कहते हैं।

परमिट

डिफ़ॉल्ट कैनवास तत्व रिज़ॉल्यूशन 300x150 है। कैनवास की चौड़ाई या ऊँचाई सेट करने से यह साफ़ हो जाता है और इसकी सेटिंग रीसेट हो जाती है। यदि आप सबसे कम कीमत पर उच्चतम रिज़ॉल्यूशन प्राप्त करना चाहते हैं, तो सबसे अच्छा तरीका प्रत्येक फ्रेम में 300 की ऊंचाई निर्धारित करना होगा।

तो हमारे पास 300x300 का एक कैनवास है। हालाँकि, चयनित रेंडरिंग विधि कई किरणों के लिए बहुत धीमी है। इसलिए, 4 से रिज़ॉल्यूशन को विभाजित करके, हम केवल 75x75 = 5.625 किरणों का पता लगाएंगे। 1/8 के वेतन वृद्धि में बीम को पास करना जब तक कि एक अपारदर्शी ब्लॉक या 8 इकाइयों की दूरी तक नहीं पहुंचा जाता है, हमें प्रति फ्रेम अधिकतम 75x75x80 = 450,000 चेक मिलते हैं।

लाइन से दुनिया

इस आकार के साथ, आपके पास एक गतिशील दूरी के नक्शे को दुनिया के नक्शे के रूप में उत्पन्न करने, सहेजने या उपयोग करने के लिए बिल्कुल जगह नहीं है, इसलिए आपको केवल उपलब्ध डेटा का उपयोग करना होगा: स्रोत कोड।

चर एफ में मुख्य लूप कोड रखा गया है, हम इसके स्ट्रिंग प्रतिनिधित्व तक पहुंच प्राप्त करते हैं और इसे 3 डी जाली में पारदर्शी / अपारदर्शी ब्लॉकों के मानचित्र के रूप में उपयोग करते हैं।

चूंकि कोड छोटा है, इसमें 8x8x8 दुनिया के लिए केवल पर्याप्त डेटा था जो 512 लोमड़ियों के बारे में जानकारी के रूप में मुख्य लूप के पहले 64 अक्षरों का उपयोग करता है। इस पंक्ति में ASCII कोडों का अध्ययन करने के बाद, मैंने एक अपारदर्शी ब्लॉक के रूप में विचार करने का फैसला किया, जो ASCII तालिका में अर्धविराम से पहले किसी भी वर्ण को सम्मिलित करता है। दूसरे शब्दों में, वर्णों में से कोई भी! "# $% & '() * +, - / / 0123456789:; का अर्थ है एक अपारदर्शी ब्लॉक। इस विकल्प ने हमें मानचित्र में एक छेद के माध्यम से प्राप्त करने की अनुमति दी, जिसने बदले में कैमरे के मार्ग को सरल बनाया।

इस प्रकार, Minicraft में चौराहे की जाँच बहुत सरल लगती है:

 // F = the source code of the main loop ';' < F[x + z * 4 + y * 8]

अर्धविराम की बात करें, तो एक चौकस पाठक स्रोत में एक अजीब विवरण देख सकता है:

देखें, मुख्य लूप कोड एक अर्धविराम से शुरू होता है? यह प्रतीत होता है कि बेकार अर्धविराम आपको एक अतिरिक्त बाइट जीतने की अनुमति देता है, जो पहले से ही काफी कॉम्पैक्ट चौराहे को कम करता है:

 F < F[x + z * 4 + y * 8]

रे ट्रेसिंग और कैमरा

जैसा कि ऊपर कहा गया था, 3 डी मानचित्र में, एक थ्रू छेद प्राप्त किया गया था, जो कैमरे के पारित होने के लिए आदर्श था। प्रत्येक पिक्सेल के लिए दृश्यता के पिरामिड के भीतर कैमरे से किरणें फेंकी जाती हैं, फिर हम धीरे-धीरे मानचित्र के साथ चौराहे के लिए किरण के साथ सभी बिंदुओं की जांच करते हैं जब तक कि यह नहीं मिलता है, या यात्रा की गई दूरी स्वीकार्य अधिकतम से अधिक नहीं होती है। आगे हम बीम के साथ आगे बढ़ते हैं, भूरे रंग की छाया को इसी पिक्सेल को सौंपा जाएगा।

 for(x=n=c.height=300;x-=4;) for(y=n;y-=4;/*      x,y  D */) for(D=0;/*         X, Y, Z */;z=Z) D+=1/8

बाहरी लूप्स सभी एक्स और वाई पिक्सल के माध्यम से चलते हैं और उन्हें ग्रे डी के परिणामस्वरूप छाया से भरते हैं। आंतरिक लूप किरण के साथ स्थिति एक्स, वाई तक पिक्सेल के साथ चलती है जब तक कि एक अपारदर्शी ब्लॉक नहीं मिलता है।

बीम पर वर्तमान स्थिति के त्रि-आयामी X, Y, Z निर्देशांक की गणना निम्नानुसार की जाती है:

 //  E=4-D/2 (t+D*Q(T=x/n-.5+Q(t/9))&7)*8|(Z=3.7+D*Q(T-8)&7)*4|(6.5-D*y/nE)

क्या वास्तव में Y * 8 की गणना करता है जेड * 4 | X. यदि अधिक है, तो:

 //    cA = Math.cos(t/9) //    rA = x / h - .5 + cA // D - ,      //       Y Y = D * Math.cos(rA) + t Z = D * Math.sin(rA) + 3.7 X = D * ( y / h - .5) + 2.5

धूसर, कोहरा और धूसर रंग

डिफ़ॉल्ट रूप से, कैनवास को काला भरण सेट किया जाता है। इसे बदलने के लिए पर्याप्त जगह नहीं है, इसलिए आपको पैलेट को लागू करने के लिए दूसरा रास्ता तलाशना होगा। मिनिक्राफ्ट में ग्रे के रंगों को आंशिक चौड़ाई और ऊंचाई के साथ आयतों से प्राप्त किया जाता है। उप-पिक्सेल आकार चौरसाई का कारण बनता है, जो आयतों के किनारों को पारभासी बनाता है। इतना सरल। प्रत्येक पिक्सेल के लिए एक आयत खींचना, हमें वास्तव में किसी प्रकार का रंग मिल जाता है।

डेमो में लाइटिंग उसी चाल का उपयोग करता है जैसा कि रेओनचिक के साथ वुल्फेनस्टीन का। एक या दूसरे पक्ष की सतह की दिशा को सामान्य निर्धारित करने के लिए, किरण पर बिंदुओं के निर्देशांक के पूरे भागों Z की तुलना एक अपारदर्शी ब्लॉक से पहले और बाद में की जाती है। मुख्य लूप याद है?

 ;t+=.1;Q=Math.cos;for(x=n=c.height=300;x-=4;)for(y=n;y-=4;d.fillRect(x,y,E,Z^z?4:E))for(D=0;(E=4-D/2)&&F<F[(t+D*Q(T=x/n-.5+Q(t/9))&7)*8|(Z=3.7+D*Q(T-8)&7)*4|(6.5-D*y/nE)];z=Z)D+=1/8

Z निर्देशांक के पूर्णांक भागों को संग्रहीत करने और उनकी तुलना करने के लिए जिम्मेदार कोड, Z ^ z; 4:, Z = और z = Z के भावों में समाहित है।

नंबर का जादू

हम सभी जानते हैं कि फ्लोटिंग पॉइंट नंबर उन अनुप्रयोगों के लिए इष्टतम नहीं हैं जहां संख्याओं का सटीक प्रतिनिधित्व आवश्यक है। IEEE-754 मानक द्विआधारी अंकन और दो की शक्तियों पर आधारित हैं, जिसके परिणामस्वरूप दशमलव गोलाई त्रुटियां हैं।

जावास्क्रिप्ट में, कई अन्य प्रोग्रामिंग भाषाओं की तरह, 0.1 + 0.2 = 0.30000000000000004। यह कई स्थितियों में असुविधाजनक है, हालांकि, जब आप दो की शक्तियों के साथ विशेष रूप से व्यवहार करते हैं, तो IEEE 754 आपके हाथों में खेलता है और आपको कुछ चालें करने की अनुमति देता है।

उदाहरण के लिए, किरण गणना चक्र में,

 for(x=n=c.height=300;x-=4;) for(y=n;y-=4;/*      x,y  D */) for(D=0;(E=4-D/2)&&F<F[ ... ];z=Z) D+=1/8

हम आसानी से नोटिस कर सकते हैं कि डी 8 तक पहुंच गया है, क्योंकि अभिव्यक्ति (ई = 4-डी / 2) 0 में बदल जाता है, जो बदले में झूठ के बराबर होता है और लूप को रोकता है।

मूल्य ई आयत के आकार से मेल खाता है जो हम इस किरण के लिए बनाते हैं, और साथ ही साथ किरण पर बिंदु के लिए X निर्देशांक की गणना करने के लिए कार्य करता है। सभी में, यह चाल 3 बाइट्स बचाता है।

गंदा त्रिकोणमिति

Math.cos और Math.sin का उपयोग करने वाले कोड में 4 बाइट जीतने के लिए, Math.cos का लिंक बनाया जाता है, और तर्क में 8 जोड़कर "sine" प्राप्त किया जाता है। इस तरह के एक सन्निकटन की त्रुटि 0.15 रेडियन से अधिक नहीं है।

समीक्षा

Pouet.net वेबसाइट पर मिनिक्राफ्ट पृष्ठ पर समीक्षा और सुझाव एकत्र किए जाते हैं।

252 अक्षर