🔰 🍽️ 👩🏾‍🤝‍👩🏽 वोल्फेंस्टिनी 3 डी - जावास्क्रिप्ट के रिवर्स इंजीनियरिंग 251 बाइट्स 🛷 🐴 😷

कोड लिखते समय, कई लोग कार्यक्रम के तर्क के अलावा कुछ भी नहीं सोचते हैं। कुछ लोग स्मृति से, समय के साथ कोड के अनुकूलन के बारे में सोचते हैं। लेकिन केवल कुछ ही अंतिम स्तर तक पहुंचते हैं - प्रोग्राम को रिकॉर्ड छोटे आकार तक संपीड़ित करना।

उदाहरण के लिए, जावास्क्रिप्ट के सिर्फ 251 बाइट्स के परिणाम पर देखें:

खैर, आइए जानें कि यह कैसे काम करता है!

कहाँ से है?

यह कोड, साथ ही साथ मैंने इस लेख में जो भी संबोधित किया है, वह एक शानदार मैथ्यू 'p01' हेनरी, एक जावास्क्रिप्ट डेवलपर की साइट p01.org पर स्थित है और न केवल अक्सर कोड को असंभव आकारों में संपीड़ित करने में शामिल है। इस लेख की स्रोत सामग्री यहाँ है ।

तो, इससे पहले कि आप स्रोत कोड के बहुत 251 बाइट्स हैं।

<body onload=E=c.getContext("2d"),setInterval(F="t+=.2,Q=Math.cos;c.height=300;for(x=h;x--;)for(y=h;y--;E.fillRect(x*4,y*4,bd?4:D/2,D/2))for(D=0;'.'<F[D*y/hD/2|0?1:(d=t+D*Q(T=x/h-.5+Q(t)/8)&7)|(3.5+D*Q(T-8))<<3]&&D<8;b=d)D+=.1",t=h=75)><canvas id=c>

यह स्पष्ट है कि कुछ भी स्पष्ट नहीं है।

कोड को पठनीय बनाना

सबसे पहले, मैंने सुविधा के लिए सभी जावास्क्रिप्ट कोड एक अलग टैग में डाल दिए।

यह देखा जा सकता है कि चर E , h , Q , F और अन्य ऐसे स्थिरांक हैं जिन्हें उनके मूल्यों / वस्तुओं के साथ स्वयं बदला जा सकता है, साथ ही नाम भी बदल सकते हैं।

 var context = c.getContext("2d") var F="t+=.2,Q=Math.cos;c.height=300;for(x=h;x--;)for(y=h;y--;E.fillRect(x*4,y*4,bd?4:D/2,D/2))for(D=0;'.'<F[D*y/hD/2|0?1:(d=t+D*Q(T=x/h-.5+Q(t)/8)&7)|(3.5+D*Q(T-8))<<3]&&D<8;b=d)D+=.1" var t = 75 var size = 75 function render(){ t += 0.2; c.height=300; for(let x = size; x--;) for(let y = size; y--; context.fillRect(x * 4,y * 4,b - d? 4 : D / 2, D / 2)) for(var D = 0; '.' < F[D * y / size - D / 2 | 0 ? 1 : (d = t + D * Math.cos(T = x / size - 0.5 + Math.cos(t) / 8) & 7) | (3.5 + D * Math.cos(T - 8)) << 3] && D < 8; b = d) D += 0.1 } setInterval(render, 75);

यहां, स्ट्रिंग से कोड को पहले से ही फ़ंक्शन में ले जाया गया है, और स्ट्रिंग स्वयं अछूता है, हमें भविष्य में इसकी आवश्यकता होगी।

अब दो बाहरी छोरों को परिवर्तित करते while ।

 function render(){ t += 0.2; c.height=300; let x = size; while(x > 0){ let y = size; while(y > 0){ for(var D = 0; '.' < F[D * y / size - D / 2 | 0 ? 1 : (d = t + D * Math.cos(T = x / size - 0.5 + Math.cos(t) / 8) & 7) | (3.5 + D * Math.cos(T - 8)) << 3] && D < 8; b = d) D += 0.1 context.fillRect(x * 4,y * 4,b - d? 4 : D / 2, D / 2); y--; } x--; } }

हम इसे कैसे देखते हैं?

आइए समझते हैं कि हम इसे बिल्कुल क्यों देखते हैं। यदि आप तस्वीर को फिर से देखते हैं, तो आप बहुत कुछ समझ सकते हैं।

क्लिक करने योग्य छवि

यहाँ हम देखते हैं:

विषय जितना दूर है, उतना ही गहरा है
सामना की गई बाधाओं का तिरछा हिस्सा लाइनों के साथ अलग-अलग तरीके से भरा हुआ है, डॉट्स नहीं।

कोड में, ड्राइंग इस तरह से परिलक्षित होता है:

 // ,  ,       //   ||     // | | || | | // ↓ ↓ ↓↓ ↓ ↓ context.fillRect(x * 4,y * 4,b - d? 4 : D / 2, D / 2);

हम ब्लैक डॉट्स की इस बाढ़ में वॉल्यूमेट्रिक ऑब्जेक्ट क्यों देखते हैं? आखिरकार, हमें केवल काले रंग के विभिन्न रंगों के साथ E.fillStyle करना होगा - काले डॉट्स का आकार (हम रंग नहीं बदल सकते हैं, E.fillStyle बहुत लंबा है!)। वास्तव में, यह केवल इसलिए काम करता है क्योंकि दो-आयामी चित्र में, हमारी आंख मुख्य रूप से प्रकाश की छाया और चमक पर निर्भर करती है।

अपने हाथों में केवल एक टॉर्च के साथ एक अंधेरे गलियारे के साथ चलने की कल्पना करें। आप के सामने चमकते हैं और देखते हैं कि कुछ वस्तुएं करीब हैं और उज्जवल हैं (एक टॉर्च चमकता है, एक बाधा उज्ज्वल है, कोई छाया नहीं है), जबकि अन्य दूर हैं और गहरा (प्रकाश बिखरा हुआ है, कमजोर है, और हम अंधेरे को देखते हैं - और हम दूरी महसूस करते हैं)। तो यहाँ - वस्तु (बड़ा D ) दूर, आकार में बड़ा हम स्क्रीन पर एक काला वर्ग बनाते हैं।
लेकिन हम कैसे जानते हैं कि उज्ज्वल होने की आवश्यकता क्या है और क्या नहीं है?

पिक्सेल की गणना करें

अब इस राक्षस से निपटें:

 for(var D = 0; '.' < F[D * y / size - D / 2 | 0 ? 1 : (d = t + D * Math.cos(T = x / size - 0.5 + Math.cos(t) / 8) & 7) | (3.5 + D * Math.cos(T - 8)) << 3] && D < 8; b = d) D += 0.1

So. यह सभी अभिव्यक्ति एक निश्चित चरण किरणमय एल्गोरिथ्म है जो आपको ब्लॉक के साथ बीम के चौराहे को खोजने की अनुमति देता है। स्क्रीन के प्रत्येक पिक्सेल के लिए, हम एक बीम लॉन्च करते हैं, और हम इसे 0.1 एक निश्चित चरण के साथ पालन करते हैं, और जैसे ही हम एक बाधा को पूरा करते हैं, हम एल्गोरिथ्म को समाप्त करते हैं और स्क्रीन पर एक पिक्सेल खींचते हैं, जिससे बाधा की दूरी पता चलती है।

आइए इस कोड को भागों में पढ़ना शुरू करें।

शर्त D * y / size - D / 2 | 0 D * y / size - D / 2 | 0 रूप में प्रतिनिधित्व किया जा सकता है

D * (f r a c y s i z e - f r a c 12) = D * (f r a c y - s i z e / 2 s i z e) < 1

$D * (\ frac {y} {size} - \ frac {1} {2}) = D * (\ frac {y - size / 2} {size}) <1$ , फिर कोष्ठक में अभिव्यक्ति स्क्रीन के केंद्र से "विचलन" दिखाएगा (स्क्रीन के अंशों में)। इसलिए हम यह समझने की कोशिश कर रहे हैं कि बीम फर्श और छत के बीच है या नहीं। इसलिए, यदि हम फर्श (या छत) को छूते हैं, तो हम पिक्सेल को खींचने और खींचने के लिए लूप से बाहर निकलते हैं।
और यदि हम स्पर्श नहीं करते हैं, तो हम गणना जारी रखते हैं: हम बीम के वर्तमान निर्देशांक की खोज करते हैं।

 var T = x / size - .5 + Math.cos(t) / 8; // Math.cos(t)   //    var xcoord = t + depth * Math.cos(T); var ycoord = 3.5 + depth * Math.cos(T - 8); //

क्यों cos (T - 8)?

तो यह पता चला है कि

c o s (x - 8) ल ग भ ग प ा प (x)

$cos (x-8) \ लगभग पाप (x)$ 0.15 रेडियन की सटीकता के साथ। सभी क्योंकि

f r a c 5 p i 2 अ न ु म ा न ि त 8.15 ल ग भ ग 8

$\ frac {5 \ pi} {2} \ अनुमानित 8.15 \ लगभग 8$

और फिर

c o s (A l p h a - 8) ल ग भ ग c o s (A l p h a - f r a c 5 p i 2) = c o s (A l p h a - f r a c p i 2) = s i n (अ ल ् फ ा)

$cos (\ Alpha-8) \ लगभग cos (\ Alpha- \ frac {5 \ pi} {2}) = cos (\ Alpha - \ frac {\ pi} {2}) = sin (\ अल्फा)$

यह इस बारे में बात करने लायक है कि अंतरिक्ष में एक बिंदु को सामान्य रूप से ब्लॉक के लिए कैसे जांचा जाता है। कार्ड स्वयं स्रोत कोड ( F ) से लिया गया है और इस तरह दिखता है:

 t+=.2,Q= ----> ░█░█░█░░ Math.cos ----> ░░░░█░░░ ;c.heigh ----> ░░█░░░░░   - t=300;fo ----> ░░░░░░░░ <----  , r(x=h;x- ----> ░█░░░░░█     -;)for(y ----> █░█░░░█░ =h;y--;E ----> ░░░░██░░ .fillRec ----> █░░░░░░░

तो यह गति में जैसा दिखता है, कैमरे के देखने का क्षेत्र यहां इंगित किया गया है।

वे कोशिकाएं जिनका प्रतीक कोड बिंदु कोड से कम है - "." अंधेरे के रूप में चिह्नित हैं "." - वह है, वर्ण !"#$%&'()*+,-. अब हम बीम के निर्देशांक को गोल करते हैं, और यह पता लगाने की कोशिश करते हैं कि इन" निर्देशांक "में अक्षर अंधेरा है (एक बाधा) या नहीं (हम बीम को और आगे बढ़ाते हैं)।

चूंकि इंडेक्स एक है, और निर्देशांक दो हैं, तो हम हैक का उपयोग करते हैं:

 var boxIndex = xcoord & 7 | ycoord << 3;

नतीजतन, हमें एक संख्या मिलती है जो ब्लॉक संख्या (अच्छी तरह से, या voids) को दर्शाती है।

कोड पर वापस जाते हैं। अब वह सभ्य दिख रहा है।

कोड थोड़ा मोटा है

 function render(){ t += 0.2; c.height=300; let x = size; while(x > 0){ let y = size; while(y > 0){ var depth = 0 while(depth < 8){ depth += 0.1 var T = x / size - .5 + Math.cos(t) / 8; //   var isFloorOrCeiling = depth * y / size - depth / 2 | 0; //      ? if(isFloorOrCeiling) break; var xcoord = t + depth * Math.cos(T) & 7; var ycoord = 3.5 + depth * Math.sin(T); // cos - 8 -> sin boxIndex = xcoord | ycoord << 3; //     , //    if ('.' >= F[boxIndex]) break; b = xcoord; //  ?  ! } context.fillRect(x * 4, y * 4, b - xcoord ? 4 : depth / 2, depth / 2) y--; } x--; } }

वापस ड्राइंग पर

हमें यह सब क्यों चाहिए था? अब, इस एल्गोरिथ्म को निष्पादित करने के बाद, हम ऑब्जेक्ट के लिए दूरी जानते हैं, और हम इसे आकर्षित कर सकते हैं। लेकिन एक सवाल अनुत्तरित रहा: एक अलग इकाई से छत को कैसे अलग किया जाए? आखिरकार, छत और ब्लॉक की दूरी संख्याएं हैं जो अलग नहीं हैं! वास्तव में, हम पहले ही इस प्रश्न का उत्तर दे चुके हैं।

 // ,  ,      // || // ↓↓ context.fillRect(x * 4, y * 4, b - xcoord ? 4 : depth / 2, depth / 2);

चर b से संबंधित कोड में एक शर्त है, और "बड़े काले पिक्सेल" की चौड़ाई को प्रभावित करना: b - xcoord ? 4 : depth / 2 b - xcoord ? 4 : depth / 2 । आइए इस स्थिति को दूर करें और देखें कि इसके बिना क्या होता है:

ब्लॉक और छत के बीच कोई सीमा नहीं है! (क्लिक करने योग्य)

स्थिति b - xcoord समन्वय को बदलने पर b - xcoord हमें एक निरंतर चौड़ाई देगा। 0. और यह कब नहीं हो सकता है? यह केवल तब नहीं होता है जब हम कोड में (2) लाइन में नहीं आते हैं:

 // .... var xcoord = t + depth * Math.cos(T) & 7; // <---    (1) // ... if ('.' >= F[boxIndex]) // <---    (3) break; b = xcoord; // <---     (2) // ....

इसका मतलब यह है कि कार्यक्रम चक्र से पहले (3) लाइन से बाहर निकलता है, जब बीम अपनी दीवार से लगभग सीधा दिशा में एक अपारदर्शी ब्लॉक में जाता है, अर्थात यह ब्लॉक के "चेहरे" में गिर जाता है। इस प्रकार, सभी ब्लॉक फर्श और छत से अलग हैं।

तो, यह है कि यह सुंदर 3 डी तस्वीर कैसे निकलती है, जो न केवल आंख को प्रसन्न करती है, बल्कि यह भी सोचती है कि यह कैसे और क्यों काम करता है। आप इस कोड को यहां कार्रवाई में देख सकते हैं (इस चमत्कार के डेवलपर की साइट।)

वोल्फेंस्टिनी 3 डी - जावास्क्रिप्ट के रिवर्स इंजीनियरिंग 251 बाइट्स

कोड को पठनीय बनाना

हम इसे कैसे देखते हैं?

पिक्सेल की गणना करें

वापस ड्राइंग पर

More articles: