जावास्क्रिप्ट के 1009 बाइट्स में WebGL पर तारों वाले आकाश को फिट करें

दो चीजें हमेशा आत्मा को नए और कभी मजबूत आश्चर्य और श्रद्धा से भर देती हैं, जितना अधिक बार और अब हम उनके बारे में सोचते हैं - यह मेरे ऊपर का तारों वाला आकाश और मुझमें नैतिक नियम है। इमैनुअल कांट

JS1k एक वार्षिक प्रतियोगिता है जहां आपको जावास्क्रिप्ट में 1024 वर्णों में एक डेमो, एक गेम या कुछ भी समायोजित करने की आवश्यकता होती है। इस साल, मेरे डेमो ने चौथा स्थान हासिल किया (तीसरे तक कोई दो अंक नहीं थे)। आप JS1k वेबसाइट पर डेमो देख सकते हैं। जो नहीं खुलता है या काम नहीं करता है, उसे इस तरह दिखना चाहिए:

छोटा और पूर्ण स्रोत कोड github पर है । और कट के तहत एक विश्लेषण है कि इस तरह के प्रतियोगिताओं के लिए जावास्क्रिप्ट को अब कैसे छोटा किया जा रहा है।

Diskalaymer

डेमो की मुख्य सुंदरता पाब्लो रोमन एंड्रीओली द्वारा किया गया एक टुकड़ा है । पाब्लो एक कलाकार है जो भग्न के साथ काम करता है, और भग्न मंच पर वह गणना के कुछ विवरण देता है। मेरा काम 1024 बाइट के एक shader और WebGL कोड को पैक करना था।

WebGL इनिशियलाइज़ेशन

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

// Define a new program p=g.createProgram(); // Basic vertex shader s=g.createShader(VERTEX_SHADER); g.shaderSource(s,"attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}"); // Compile and attach it to the program g.compileShader(s); g.attachShader(p,s); 

इस समस्या को हल करने के लिए, पिछले कुछ वर्षों के सभी JS1k समाधान कार्यों के पर्यायवाची के साथ एक चाल का उपयोग करते हैं:

 for(i in g){ g[i[0] + i[6]] = g[i]; } 

लूप WebGL संदर्भ के प्रत्येक फ़ंक्शन (और किसी भी सदस्य के लिए) का एक पर्याय जोड़ता है, जिसमें पहले और 7 अक्षर होते हैं। उदाहरण के लिए, c reate P rogram cP, s hader S ource - sS , आदि बन जाता है। इसके अतिरिक्त, with(g) निर्माण (जो इन परियोजनाओं में इस्तेमाल नहीं किया जा सकता है with(g) के with(g) सभी कोड तैयार करना, हमें मिलता है:

 with(g){ p=cP(); sS(s=cS(35633),'attribute vec2 p;void main(){gl_Position=vec4(p,1,1);}'); ce(s); aS(p,s); } 

शेडर मिनिफिकेशन

मूल shader 1100 वर्ण लेता है। मुख्य संक्षिप्तीकरण: अनावश्यक चरों को हटाना और समान अंशों का संयोजन। आखिरकार, मैंने ऑनलाइन मिनीफ़ायर के माध्यम से कोड पारित किया। नतीजतन, 500 से अधिक बाइट्स छायादार से बने रहे।

JSCrush

JSCrush ऐसी प्रतियोगिताओं में कोड को संपीड़ित करने के लिए वास्तविक तथ्य है। उपयोगिता कोड को लगभग निम्नलिखित अनुक्रम में बदल देती है:

 _='(i a.style="widMj%;hEjvh;:left",g)g[i[0]+i[6]]=g[i];wiMO.u=g.G1f,x=y=k=g)p=cP(35633"tribute 2 p gl_Posit=4?FN"precis mediump ;G Zt,a,x,y Uf`ord.rg/64!-.f.=a;Zc=+xz,v=+yz;m2 m$cc-cc)s$vv-vv)fJf#Ur`Q,,r+`t*2.,t,-2.rJr#Zg=.1,b=Q;Ui`!Kl=Rl<2Rl++){Uo=r+f*;oQ)-mod(o,2.))Ze,n=e=!;Kd=Rd<2Rd++)oo)/dot(o,o)-3,n+o)-ee=oif(l>6)Q-max(!,.3-i+=b+g,g,g)*n*5*b;.73;g+=.1;}i=mix(i)i,.85lor=4(i*.01.lo?ug?bfO=34962,cB()eV(0vA(2,5120bDO,Tw Int8Array([|,|]35044o=,(Lt@-oa@TrHE/TrWidMx@xy@ydr(6,3requestAnimFrame(L)})(down=upk^=1},movek&&(xX,yY)};),3=funct(e){uOf?,"flo}@ce(saS?,slengM(onmouse ;void ma(){Tw De/1e5);incos(for=abs(gl_FragCo,1g*(sS(s=cS(n*n*.001at.5vecionb*=s(=e.page0,!0.#.r=s;$=m2(?(p@"EeightGunimJ.rm;K(t MthO(gQ1.R0;TneU Z `=j:100z/50!|-3';for(Y in $='|zj`ZUTRQOMKJGE@?$#! ')with(_.split($[Y]))_=join(pop());eval(_) 

JSCrush के सिद्धांत को रिवर्स कोड रूपांतरण के लिए उपकरण में देखा जा सकता है। या लेख में विस्तार से पढ़ें । सामान्य तौर पर, यह एक शब्दकोश के साथ एन्कोडिंग है:

1. हमें एक ऐसा चरित्र मिलता है, जिसका उपयोग कोड में नहीं किया जाता है
2. हम उस कोड में दोहराए गए अंशों को खोजते हैं जिन्हें हम पहले पैराग्राफ से चरित्र के साथ बदलते हैं
3. एक चरित्र के साथ स्ट्रिंग को बदलें
4. 1-3 को दोहराएं जब तक कि परिणाम स्रोत कोड से छोटा न हो।

अनुकूलन

सभी ऑपरेशनों के बाद, मेरे पास अभी भी लगभग 30 पात्र बचे थे, जिनका उपयोग प्रदर्शन को अनुकूलित करने के लिए किया जा सकता था। डेमो लोड करते समय, आप कैनवास का आकार निर्दिष्ट कर सकते हैं: पूर्ण स्क्रीन या निश्चित आकार। पूर्ण स्क्रीन में लॉन्च करना सुंदर है, लेकिन प्रत्येक पिक्सेल के लिए खंड shader कहा जाता है और धीरे-धीरे काम करता है। समाधान JS1k कैनवास से एक निश्चित आकार का अनुरोध करने के लिए था (मैंने 640x640 चुना), और फिर इसे कोड में पूर्ण स्क्रीन पर बढ़ाएँ:

 a.style='width:100%;height:100vh;float:left'; 

तब छवि पूरी स्क्रीन पर रहती है, लेकिन केवल मूल कैनवास आकार के प्रत्येक पिक्सेल के लिए शेडर निष्पादित होता है।