ब्राउज़र में सेलुलर ऑटोमेटा

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

सेलुलर ऑटोमेटा के विभिन्न आकार, प्रकार और आयाम हैं। संभवत: सबसे प्रसिद्ध सेलुलर ऑटोमेटन कॉनवे का गेम ऑफ लाइफ (जीओएल) है। इसमें एक द्वि-आयामी ग्रिड होता है जिसमें प्रत्येक सेल में एक बाइनरी वैल्यू (लाइव या डेड) होती है। पड़ोसी कोशिकाओं की स्थिति के आधार पर, साथ वाले नियम निर्धारित करते हैं कि कोशिका मृत या जीवित होनी चाहिए या नहीं। नियमों का कहना है कि एक जीवित कोशिका अकेलेपन से मर जाती है अगर उसके आसपास 2 से कम जीवित कोशिकाएं होती हैं। यदि तीन से अधिक पड़ोसी कोशिकाएं जीवित हैं, तो वह ओवरपॉपुलेशन से मर जाती है। दूसरे शब्दों में, यदि कोई कोशिका "जीवित" है तो उसके आस-पास 2 या 3 जीवित पड़ोसी कोशिकाएं हैं। एक मृत कोशिका के जीवन में आने के लिए, इसमें ठीक 3 जीवित पड़ोसी कोशिकाएँ होनी चाहिए, अन्यथा यह मृत हो जाती है। एक गोएल मशीन का एक उदाहरण जो कई राज्यों से गुजरता है, नीचे दिखाया गया है।


सेलुलर ऑटोमेटन का एक और प्रसिद्ध संस्करण एक आयामी है; इसे एलिमेंटरी सेल्युलर ऑटोमैटन (ECA) कहा जाता है। इसे हम इस पोस्ट में लागू कर रहे हैं।

इस ऑटोमेटन के प्रत्येक राज्य को बूलियन मानों के एक आयामी सरणी के रूप में संग्रहीत किया जाता है, और जीओएल राज्य की कल्पना करने के लिए दो आयामों की आवश्यकता होती है, इस ऑटोमेटन को मूल्यों की केवल एक पंक्ति की आवश्यकता होती है। इसके लिए धन्यवाद, हम इस ऑटोमेटन के राज्यों के पूरे इतिहास की कल्पना करने के लिए दो आयामों (एनीमेशन के बजाय) का उपयोग कर सकते हैं। जैसे GOL के मामले में, इस मशीन में सेल की स्थिति 0 या 1 है, लेकिन GOL सेल के विपरीत, जो कि इसके 8 पड़ोसियों के आधार पर अपडेट की जाती है, ECA सेल अपडेटेड है जो कि बाएं पड़ोसी, दाएं पड़ोसी, और खुद के राज्य के आधार पर है!

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


आप आश्चर्यचकित हो सकते हैं: उपरोक्त नियमों को संख्याओं के द्वारा क्यों प्रस्तुत किया गया है? क्योंकि 0 से 255 तक की सीमा में प्रत्येक संख्या सीधे ईसीए नियम से मेल खाती है, और इसलिए इन संख्याओं को नियमों के नाम के रूप में उपयोग किया जाता है। यह पत्राचार नीचे दिखाया गया है:


संख्या से नियम तक

0 से 255 तक की सीमा में किसी भी संख्या को केवल 8 अंकों (ऊपर पहला तीर) के साथ द्विआधारी रूप में दर्शाया जा सकता है। इसके अलावा, हम इनमें से प्रत्येक संख्या को उसके स्थान (दूसरे तीर) के आधार पर एक सूचकांक दे सकते हैं। स्वाभाविक रूप से, ये सूचकांक 0 से 7 की सीमा में हैं, अर्थात, उन्हें केवल 3 अंकों (तीसरे तीर) का उपयोग करके द्विआधारी रूप में दर्शाया जा सकता है। इनपुट के रूप में इन 3 अंकों की व्याख्या, और आउटपुट के रूप में मूल संख्या से संबंधित अंक, हमें त्रैमासिक फ़ंक्शन मिलता है जिसकी हमें आवश्यकता होती है (चौथा तीर)।

नियम पीढ़ी

आइए उपरोक्त व्याख्या को एक उच्च-क्रम फ़ंक्शन get_rule रूप में कार्यान्वित करें, जो इनपुट के रूप में 0 से 255 तक की संख्या प्राप्त करता है और उस संख्या के अनुरूप ECA नियम देता है।

हमें ऐसा कुछ बनाने की आवश्यकता है:

 const rule30 = get_rule(30); const output110 = rule30(1, 1, 0); 

उपरोक्त उदाहरण में, rule30(1,1,0) शुरू करने से सभी तीन बाइनरी मान एक संख्या (110 = 6) में जुड़ जाएंगे और बाइनरी प्रतिनिधित्व 30 में उस स्थिति (6) पर थोड़ा वापस आ जाएंगे। बाइनरी प्रतिनिधित्व में संख्या 30 00011110 है, इसलिए, फ़ंक्शन 0 पर लौटेगा (हम दाईं ओर गिनती करते हैं और 0 से गिनती शुरू करते हैं)।

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

 const combine = (b1, b2, b3) => (b1 << 2) + (b2 << 1) + (b3 << 0); 

तर्कों को संगत पदों पर स्थानांतरित करने के बाद, और फिर तीन स्थानांतरित संख्याओं को जोड़कर, हमें वांछित संयोजन मिलता है।

get_rule फ़ंक्शन का दूसरा महत्वपूर्ण भाग किसी संख्या में किसी विशिष्ट स्थिति में बिट मान निर्धारित कर रहा है। इसलिए, एक फ़ंक्शन get_bit(num, pos) बनाएं, जो किसी दिए गए नंबर num पर किसी दिए गए स्थान पर थोड़ा मान लौटा सकता है। उदाहरण के लिए, बाइनरी फॉर्म में 141 नंबर 10001101 है, इसलिए get_bit(2, 141) को 1 वापस करना चाहिए, और get_bit(5, 141) को 0 वापस करना चाहिए।

get_bit(num,pos) फ़ंक्शन को पहले संख्या की एक बिट शिफ्ट को दाईं ओर निष्पादित करके, और फिर नंबर 1 के साथ बिटवाइज़ ऑपरेशन "AND" निष्पादित करके लागू किया जा सकता है।

 const get_bit = (num, pos) => (num >> pos) & 1; 

अब हमें केवल इन दो कार्यों को संयोजित करने की आवश्यकता है:

 const get_rule = num => (b1, b2, b3) => get_bit(num, combine(b1, b2, b3)); 

बहुत बढ़िया! इसलिए, हमारे पास एक फ़ंक्शन है कि हमारे अंतराल के भीतर प्रत्येक संख्या हमें एक अद्वितीय ईसीए नियम देती है जिसके साथ हम कुछ भी कर सकते हैं। अगला कदम उन्हें ब्राउज़र में प्रस्तुत करना है।

नियम दृश्य

ब्राउज़र में ऑटोमेटा को रेंडर करने के लिए, हम canvas एलिमेंट का उपयोग करेंगे। canvas बनाया जा सकता है और html बॉडी में इस प्रकार जोड़ा जा सकता है:

 window.onload = function() { const canvas = document.createElement('canvas'); canvas.width = 800; canvas.height = 800; document.body.appendChild(canvas); }; 

canvas के साथ बातचीत करने में सक्षम होने के लिए, हमें संदर्भ की आवश्यकता है । संदर्भ हमें आकृतियों और रेखाओं को आकर्षित करने, वस्तुओं को चित्रित करने और आमतौर पर canvas नेविगेट करने की अनुमति देता है। यह हमारे canvas के getContext विधि के माध्यम से हमें प्रदान किया जाता है।

 const context = canvas.getContext('2d'); 

पैरामीटर '2d' उस संदर्भ के प्रकार को संदर्भित करता है जिसका उपयोग हम इस उदाहरण में करेंगे।

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

 function draw_rule(ctx, rule, scale, width, height) { let row = initial_row(width); for (let i = 0; i < height; i++) { draw_row(ctx, row, scale); row = next_row(row, rule); } } 

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

उपरोक्त कोड स्निपेट के लिए, हमें तीन कार्यों को लागू करने की आवश्यकता है: initial_row , draw_row और next_row ।

initial_row एक साधारण कार्य है। यह शून्य की एक सरणी बनाता है और एक के बाद एक सरणी के केंद्र में तत्व को बदलता है।

 function initial_row(length) { const initial_row = Array(length).fill(0); initial_row[Math.floor(length / 2)] = 1; return initial_row; } 

चूंकि हमारे पास पहले से ही एक नियम फ़ंक्शन है, इसलिए next_row फ़ंक्शन एक पंक्ति से मिलकर बना सकता है। एक नई पंक्ति में प्रत्येक सेल का मान नियम को निकटतम कोशिकाओं के मूल्यों के साथ लागू करने का परिणाम है, और पुरानी पंक्ति को इनपुट के रूप में उपयोग किया जाता है।

 const next_row = (row, rule) => row.map((_, i) => rule(row[i - 1], row[i], row[i + 1])); 

क्या आपने देखा कि हमने इस लाइन को धोखा दिया? एक नई पंक्ति में प्रत्येक कोशिका को तीन अन्य कोशिकाओं से इनपुट की आवश्यकता होती है, लेकिन पंक्ति के किनारों पर दो कोशिकाओं को केवल दो से डेटा प्राप्त होता है। उदाहरण के लिए, next_row[0] row[-1] से next_row[0] मान प्राप्त करने का प्रयास करता है। यह अभी भी काम करता है, क्योंकि जब यह अनुक्रम नहीं है, तो सरणी में मानों को एक्सेस करने की कोशिश करते हुए, जावास्क्रिप्ट undefined लौटता है, और ऐसा होता है कि (undefined >> [ ]) ( combine फ़ंक्शन से) हमेशा 0. वापस आता है। वास्तव में हम प्रत्येक मान को सरणी के बाहर 0 के रूप में संसाधित करते हैं।

मुझे पता है कि यह बदसूरत है, लेकिन जल्द ही हम स्क्रीन पर कुछ सुंदर बनाएंगे, ताकि हमें माफ किया जा सके।

इसके बाद draw_row फंक्शन आता है; यह वह है जो प्रतिपादन करता है!

 function draw_row(ctx, row, scale) { ctx.save(); row.forEach(cell => { ctx.fillStyle = cell === 1 ? '#000' : '#fff'; ctx.fillRect(0, 0, scale, scale); ctx.translate(scale, 0); }); ctx.restore(); ctx.translate(0, scale); } 

यह यहां है कि हम संदर्भ वस्तु पर बहुत निर्भर हैं, इससे कम से कम 5 अलग-अलग तरीकों का उपयोग कर रहे हैं। यहां एक संक्षिप्त सूची दी गई है और उनका उपयोग कैसे किया जाए।

• fillStyle इंगित करता है कि हम आकृतियों को कैसे भरना चाहते हैं। यह एक रंग हो सकता है, उदाहरण के लिए, "#f55" , साथ ही एक ढाल या पैटर्न। हम इस विधि का उपयोग कोशिकाओं 1 से नेत्रहीन अलग कोशिकाओं को करते हैं।
• fillRect(x, y, w, h) चौड़ाई w और ऊँचाई h के साथ बिंदु (x, y) से एक आयत खींचता है fillRect(x, y, w, h) अनुसार भरा जाता है। हमारी आयतें सरल वर्ग हैं, लेकिन आपको आश्चर्य हो सकता है कि उन सभी का प्रारंभिक बिंदु मूल में है। ऐसा इसलिए हुआ क्योंकि हम इस पद्धति का उपयोग translate साथ करते हैं।
• translate(x, y) आपको संपूर्ण समन्वय प्रणाली को स्थानांतरित करने की अनुमति देता है। स्थिति को बचाया जाता है, इसलिए विधि तत्वों के विभिन्न पदों को ट्रैक करने के लिए एक उत्कृष्ट विकल्प है। उदाहरण के लिए, प्रत्येक व्यक्तिगत ग्रिड सेल की स्थिति की गणना करने के बजाय, हम बस एक सेल आकर्षित कर सकते हैं, दाईं ओर ले जा सकते हैं, एक नया सेल खींच सकते हैं, और इसी तरह।
• save() और restore() का उपयोग translate और अन्य समन्वय रूपांतरण विधियों के संयोजन में किया जाता है। हम उन्हें एक निश्चित बिंदु पर वर्तमान समन्वय प्रणाली को बचाने के लिए उपयोग करते हैं, ताकि बाद में हम इसमें वापस आ सकें ( पुनर्स्थापना का उपयोग करके)। इस मामले में, हम लाइन को प्रस्तुत करने से पहले समन्वय प्रणाली को बचाते हैं और इसे दाईं ओर ले जाते हैं। फिर, जब हमने रेखा खींचना समाप्त कर दिया और दाईं ओर चले गए, तो निर्देशांक बहाल हो गए और हम मूल स्थिति में लौट आए। फिर हम अगली पंक्ति खींचने के लिए तैयार होने के लिए नीचे बढ़ते हैं।

अब हमारे पास draw_rule फ़ंक्शन के लिए आवश्यक सभी भाग हैं। हम canvas तैयार करने के बाद window.onload में इस फ़ंक्शन का उपयोग करते हैं। हम उन मापदंडों का भी निर्धारण करेंगे जिनकी हमें आवश्यकता है।

 window.onload = function() { const width = 1000; // Width of the canvas const height = 500; // Height of the canvas const cells_across = 200; // Number of cells horizontally in the grid const cell_scale = width / cells_across; // Size of each cell const cells_down = height / cell_scale; // Number of cells vertically in the grid const rule = get_rule(30); // The rule to display const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; document.body.appendChild(canvas); const context = canvas.getContext('2d'); draw_rule(context, rule, cell_scale, cells_across, cells_down); }; 

हम विभिन्न आयामों के साथ canvas आयामों को क्षैतिज रूप से कोशिकाओं की संख्या के साथ निकालते हैं। तब हम cell_scale और 'cells_down' की गणना cell_scale ताकि ग्रिड पूरे canvas भर दे, जबकि कोशिकाएं चौकोर रहती हैं। इसके लिए धन्यवाद, हम canvas भीतर शेष ग्रिड के "रिज़ॉल्यूशन" को आसानी से बदल सकते हैं।


वह सब है! पूरा कोड उदाहरण जीथब और कोडपेन पर है :

चल रहा है

इस प्रणाली के लिए धन्यवाद, हम एक के बाद एक सभी 256 नियमों की जांच करने में सक्षम होंगे, या तो पुनरावृति, कोड को बदल देंगे, या प्रत्येक पृष्ठ लोड पर एक नियम संख्या को यादृच्छिक रूप से चुनेंगे। जैसा कि यह हो सकता है, हमारे नियंत्रित वातावरण में इन अप्रत्याशित परिणामों के सभी का अध्ययन करना बहुत रोमांचक है।

आप स्टेटिक "ठोस शून्य और एक इकाई" के बजाय ऑटोमेटन की कोशिकाओं की प्रारंभिक स्थिति को यादृच्छिक बना सकते हैं। इसलिए हमें और भी अप्रत्याशित परिणाम मिलते हैं। initial_row फंक्शन के इस संस्करण को इस तरह लिखा जा सकता है:

 function random_initial_row(width) { return Array.from(Array(width), _ => Math.floor(Math.random() * 2)); } 

नीचे आप देखते हैं कि यह आउटपुट लाइन परिवर्तन आउटपुट पर कितना बड़ा प्रभाव डालता है।


रैंडम सोर्स स्ट्रिंग

और यह सिर्फ एक पहलू है जिसे आप बदल सकते हैं! अपने आप को केवल दो स्थितियों तक ही सीमित क्यों रखें? (2 से 3 राज्यों में संक्रमण 256 से 7 625 597 484 987 पर नियमों की संख्या में वृद्धि करता है!) वर्गों तक सीमित क्यों हो? केवल 2 आयाम क्यों? एक समय में केवल एक ही नियम क्यों?

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


यदि आप और भी आगे बढ़ते हैं, तो आप सिमिट्रीज़, दोनों अक्षीय (मध्य पंक्ति) और दर्पण (निचला पंक्ति) जोड़ सकते हैं।


यदि ये विज़ुअलाइज़ेशन आपको दिलचस्प लगे, लेकिन इस इंटरैक्टिव सैंडबॉक्स का अध्ययन करें , या इससे भी बेहतर, हमारे द्वारा बनाए गए कोड से शुरू करें और अपने स्वयं के सेलुलर ऑटोमेटा के साथ आने की कोशिश करें!

सौभाग्य है