साइबरपंक, मैट्रिसेस और कैनवास

I. प्राक्कथन।

एक बार, साइबरपंक उपन्यास से एक एपिसोड मेरी स्मृति में डूब गया: एक नायक एक और स्क्रीन दिखाता है जिस पर पिक्सेल जल्दी से एक दूसरे को बदल देते हैं। प्रत्येक स्क्रीन राज्य को एक निश्चित संख्या द्वारा दर्शाया जाता है, कार्यक्रम धीरे-धीरे विकल्पों के माध्यम से जाता है।

कोई भी कल्पना कर सकता है कि इतनी जल्दी या बाद में विभिन्न आश्चर्यजनक चीजें इस तरह की स्क्रीन पर दिखाई दे सकती हैं: "युद्ध और शांति", "मोना लिसा" का एक पृष्ठ, "मूनलाइट सोनाटा" की पहली बार, एक प्रसिद्ध समीकरण का एक सरल समाधान, किसी भी व्यक्ति की एक तस्वीर, यह हैबर पेज, संदेश अतीत की एक अज्ञात घटना या भविष्य की विस्तृत भविष्यवाणी के बारे में।

तब से, मैंने समय-समय पर कुछ मूर्त रूप से करने की कोशिश की, पर्ल पर कुछ छोटे शिल्प थे। और हाल ही में मैं जावास्क्रिप्ट में कुछ ऐसा ही करना चाहता था।

द्वितीय। बिक्री की शर्तें।

इस तरह के गणन को लागू करना और इसका चित्रमय प्रदर्शन सरल है। केवल उपलब्ध तराजू काफी छोटा होगा।

सरलता के लिए मान लीजिए कि स्क्रीन पर प्रत्येक बिंदु को दो राज्यों द्वारा दर्शाया गया है - सफेद और काले, जो संख्या के बाइनरी प्रतिनिधित्व में शून्य और एक से मेल खाती है। अंकों के क्रमिक निर्देशांक संख्या में क्रमिक स्थिति के अनुरूप होते हैं।

वर्तमान में, जावास्क्रिप्ट में, गणना की सटीकता के संरक्षण के साथ अधिकतम पूर्णांक 53 की शक्ति के लिए 2 है। Math.pow(2,53) == Math.pow(2,53) + 1 true देता true । यह संख्या 54 बाइनरी पदों द्वारा दर्शाई गई है:

 0b100000000000000000000000000000000000000000000000000000 0x20000000000000 9007199254740992 

संख्या का उत्तर केवल 9 पिक्सल 6 मैट्रिक्स के द्वारा दिया जाएगा। मान लीजिए मेरा कंप्यूटर प्रति सेकंड लगभग 50 मिलियन ऑपरेशन कर सकता है। मैट्रिक्स के सभी विकल्पों के माध्यम से हल करने के लिए, उसे मोटे अनुमानों की आवश्यकता होगी

Math.pow(2,53) / 50000000 / 60 / 60 / 24 / 365 - लगभग छह साल।

एक मजबूत कंप्यूटर की कम आवश्यकता होगी, लेकिन लोग अधिकतम गति के साथ खोज का विश्लेषण करने में सक्षम नहीं होंगे। मान लीजिए कि मैट्रिक्स राज्य एक दूसरे के 25 फ्रेम प्रति सेकंड के पारंपरिक प्रसारण आवृत्ति के साथ सफल होंगे। फिर, दो-आयामी काले और सफेद वास्तविकता के एक छोटे से टुकड़े के सभी राज्यों को दृश्य गति के साथ सॉर्ट करने के लिए, हमें 1,428982 साल की आवश्यकता होगी।

और फिर भी ऐसा कुछ बनाना दिलचस्प है। उल्लिखित अधिकतम संख्या इसके लिए बहुत सुविधाजनक नहीं है, क्योंकि जब ऊपरी बाएं बिंदु एक हो जाता है (यह काले रंग में repainted है), तो आप इस मैट्रिक्स पर कुछ और नहीं खींच सकते। इसलिए, हम कभी भी अपने माइक्रोग्रैफिक्स में चरम ऊपरी और बाईं लाइनों का पूरी तरह से उपयोग नहीं कर सकते। इसलिए, थोड़ा कम संख्या लेने दें, जिस मैट्रिक्स को पूरी तरह से काले रंग से भरा जा सकता है, वह किसी भी राज्य को ले सकता है और एक अपेक्षाकृत आनुपातिक आकार ले सकता है। यह 10 बाय 5 मैट्रिक्स होगा जिसमें अधिकतम 50 बाइनरी ऑर्डर होंगे:

 parseInt( "1111111111" + "1111111111" + "1111111111" + "1111111111" + "1111111111" , 2) 

 0b11111111111111111111111111111111111111111111111111 0x3ffffffffffff 1125899906842623 

क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी के नवीनतम संस्करणों पर आगे के सभी कार्यान्वयन सफलतापूर्वक परीक्षण किए गए हैं। दुर्भाग्य से, मैं नौवें IE पर परीक्षण नहीं कर सकता, और आठवें पर केवल उदाहरण कैनवास का उपयोग किए बिना काम करेंगे।

यदि आवश्यक हो तो किसी भी मैट्रिक्स को सहेजा जा सकता है, संपादित किया जा सकता है और स्थानीय रूप से चलाया जा सकता है।

मैं समझता हूं कि आगे सब कुछ एक बालवाड़ी की तरह है। इसलिए, मैं मानवीय मानसिकता वाले व्यक्ति से अन्य लोगों के खिलौनों के साथ खेलने की कोशिश कर रहा हूं। यह सब केवल (थोड़ा आध्यात्मिक) के लिए है :)

तृतीय। अनुक्रमिक मैट्रिक्स।

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

शुरुआत के लिए, मैंने ऐसे मैट्रिक्स के लिए नंबर कनवर्टर के लिए एक चार्ट लिखा। प्रत्येक माउस एक सेल चेंज कलर पर क्लिक करता है और तदनुसार क्रम को एकता और शून्य के बीच स्विच करता है। प्लेट के ऊपर, संख्या स्वयं दशमलव प्रारूप में प्रदर्शित होती है। पिक्सेल में सेल साइज़ को पेज एड्रेस में scale पैरामीटर द्वारा सेट किया जा सकता है।

कनवर्टर

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

हमारे मैट्रिक्स में निम्न चूक के साथ तीन पैरामीटर हैं:

scale=10 - पिक्सेल में पहले से ही वर्णित सेल आकार;
fps=25 - प्रति सेकंड फ्रेम दर;
start=1 - वह संख्या जिससे खोज शुरू होती है।

माउस के प्रत्येक क्लिक से संख्या एक हो जाती है और मैट्रिक्स की स्थिति बदल जाती है। यदि आप Ctrl कुंजी को क्लिक और होल्ड करते हैं, तो स्वचालित खोज प्रारंभ / बंद हो जाती है। वर्तमान संख्या दस्तावेज़ शीर्षक (विंडोज़, टैब) में प्रदर्शित होती है।

10x5 सीरियल मैट्रिक्स

कहते हैं, एक ग्राफिक इकाई प्रदर्शित करने वाले राज्य के बीच:



और ग्राफिक ड्यूस प्रदर्शित करने वाला राज्य :



7697662480391 - 1100586419201 = 6597076061190 फ्रेम पास करता है। FPS के साथ, डिफ़ॉल्ट लगभग 8368 वर्षों का चिंतन है :)

बिंदु जितना ऊँचा और छोड़ा जाता है, उतना ही समय उसके प्रकट होने से पहले ही बीत जाता है।

उदाहरण के लिए, आप देख सकते हैं कि मुख्य प्रश्न का मुख्य उत्तर किसी अन्य उत्तर में कैसे थोड़ा बदल जाता है ।

चतुर्थ। रैंडम मैट्रेस।

1. एक नंबर।

हमारे अनुक्रमिक गणन मैट्रिक्स को यादृच्छिक मूल्यों के माध्यम से छंटनी वाले मैट्रिक्स में परिवर्तित किया जा सकता है। प्रारंभिक संख्या का पैरामीटर अपना अर्थ खो देता है, अन्यथा सब कुछ समान रहता है (सिवाय इसके कि डिफ़ॉल्ट रूप से हमने फ्रेम दर को घटाकर 1 प्रति सेकंड कर दिया है, अन्यथा यह अवैध रूप से चंचल होगा)।

एक यादृच्छिक राज्यों में से एक, विचित्र रूप से पर्याप्त - सही पत्र ए के साथ:



रैंडम 10x5 मैट्रिक्स

2. संख्याओं का समूह।

किसी तरह से हमारी मैट्रिक्स वास्तविकता में विविधता लाने के लिए, हम एक संख्या की गणना की सीमाओं से परे जाएंगे। हम ऐसे मैट्रीस बनाएंगे जो आकार में सीमित नहीं हैं। उनके राज्य विभिन्न सिद्धांतों के अनुसार यादृच्छिक संख्याओं के एक सेट द्वारा निर्धारित किए जाएंगे। हम उन्हें कैनवास का उपयोग करके लागू करेंगे।

एक। यादृच्छिक पूरे चित्र।

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

w=400 - पिक्सल में मैट्रिक्स की चौड़ाई
h=300 - पिक्सेल में मैट्रिक्स की ऊँचाई
fps=1 - फ्रेम दर

पहले की तरह, एक क्लिक एक फ्रेम को बदल देता है। Ctrl कुंजी को क्लिक करने से एक यादृच्छिक स्थिति परिवर्तन शुरू होता है। लेकिन अब कुछ और फीचर्स जोड़े गए हैं।

जब आप मध्य माउस बटन को एक नए टैब में या एक नई विंडो में क्लिक करते हैं, तो PNG प्रारूप में मैट्रिक्स की एक प्रति खुलती है, यदि किसी कारण से आपको चित्र को सहेजने की आवश्यकता होती है (वैसे, बाद के सभी चित्र उस तरह से प्राप्त होते हैं)।

Shift साथ बाईं ओर क्लिक करने पर चित्र की रंग गहराई बदल जाती है: काले और सफेद, ग्रेस्केल, रंग मोड। यदि आप Shift+Alt कुंजियों को दबाए रखते हैं, तो स्विचिंग रिवर्स ऑर्डर में की जाती है।

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







रैंडम छवियाँ

ख। यादृच्छिक अंक।

इस प्रकार के मैट्रिक्स में, यादृच्छिक बिंदुओं को लगातार पृष्ठभूमि में क्रमिक रूप से जोड़ा जाता है। हम एक और पैरामीटर पेश करते हैं:

bg=w - पृष्ठभूमि का रंग (डब्ल्यू - सफेद (सफेद), बी - काला (काला))। एक और रंग मोड भी जोड़ा गया है, अब उनमें से चार हैं: एकल-रंग (विपरीत पृष्ठभूमि पर काले या सफेद डॉट्स, जितनी जल्दी या बाद में वे पूरे कैनवास को भर सकते हैं और राज्य नेत्रहीन रूप से बदलना बंद कर देगा) और पिछले तीन मोड (उन्हें भरना संभव नहीं है, क्योंकि न्यूनतम में भी) काले और सफेद मोड में, पिछली स्थिति को एक नए के साथ चित्रित किया जा सकता है)।

ग्रेस्केल या रंग में काले रंग की पृष्ठभूमि पर दिखाई देने वाले डॉट्स विभिन्न चमक के सितारों को प्रज्वलित करने के समान हैं।



और यदि आप पृष्ठभूमि को सफेद बनाते हैं, तो एनीमेशन शुरू करें और पृष्ठ पर ज़ूम करें, समय के साथ आप बच्चों की पत्रिकाओं में पाया जाने वाला खेल खेल सकते हैं: चित्र बनाने के लिए डॉट्स कनेक्ट करें। सच्ची तस्वीर पहले से पता नहीं चलेगी।

यादृच्छिक अंक

में। रैंडम लाइनें।

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

पूर्व यादृच्छिकता कारकों (बिंदु निर्देशांक और रंग) में दो और कारक जोड़े जाते हैं। नए पैरामीटर उनके लिए जिम्मेदार हैं:

lines=r - लाइनों के प्रकार (तीन मान ले सकते हैं: एस - केवल सीधी रेखाएं, सी - केवल वक्र (वक्र), आर - लाइनों और वक्रों के यादृच्छिक वैकल्पिक (यादृच्छिक); जब घटता शुरू होता है और खंड के शुरू और अंत के दो यादृच्छिक बिंदुओं के लिए; दो और यादृच्छिक बिंदु जो मोड़ को नियंत्रित करते हैं, उन्हें जोड़ दिया जाता है - बेजियर घटता के लिए सामान्य पैरामीटर);

traverse=r - ड्राइंग की विधि (तीन मान भी लेता है: y - पेपर से अपना हाथ उठाए बिना हाँ (ड्रा), n - हर बार एक नए यादृच्छिक बिंदु (नहीं) के साथ एक लाइन शुरू करें, आर - एक निरंतरता (यादृच्छिक) के साथ जुदाई का यादृच्छिक विकल्प) )।

पिछले चार रंग मोड यहां रहते हैं।





रैंडम लाइनें

डी। यादृच्छिक आंकड़े।

अब हम लाइनों को बंद करेंगे और उन पर पेंट करेंगे। यादृच्छिक "स्ट्रोक" प्राप्त किया जाएगा। अनुप्रवाह पैरामीटर अपना अर्थ खो देता है, लेकिन उनके मापदंडों के साथ तीन नए यादृच्छिक कारक जोड़े जाते हैं।

alpha=y - बेतरतीब ढंग से रंग पारदर्शिता के स्तर को बदलते हैं (दो मान, y (हाँ) या n (नहीं), क्रमशः पारदर्शिता का उपयोग करें या नहीं)। पारदर्शिता का उपयोग करते समय, रंग गहराई (मोनोक्रोम, काले और सफेद और भूरे रंग के रंगों) के पहले तीन मोड एक-दूसरे के बहुत समान हो जाते हैं।

minnodes=3 - आकृति में नोड्स की न्यूनतम संख्या

maxnodes=10 - आकृति में नोड्स की अधिकतम संख्या।

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

विभिन्न पृष्ठभूमि पर विभिन्न रंग मोड के उदाहरण निम्न हैं, पारदर्शिता का उपयोग किए बिना और अल्फा चैनल का उपयोग किए बिना।













यादृच्छिक आकार

आप सभी वर्णित प्रकारों को जोड़ सकते हैं (संपूर्ण चित्रों, बिंदुओं, रेखाओं, आकृतियों के टुकड़े)। मैं इस गेम को उन लोगों को कोड प्रदान करता हूं जो रुचि रखते हैं। आपका ध्यान के लिए सभी को धन्यवाद :)

सभी वर्णित मैट्रिसेस के लिंक ।