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

हालांकि, प्रजातियों के आधार पर, प्रत्येक 7, 11, 13, या 17 साल, आवधिक सिकाड्स एक साथ बड़े पैमाने पर प्रकाश में रेंगते हैं और शोर उड़ने वाले प्राणियों में बदल जाते हैं, साथी और जल्द ही मर जाते हैं।

हालाँकि हमारे अजीब सिसकियाँ ख़ुशी-ख़ुशी दूसरी दुनिया के लिए रवाना हो जाती हैं, फिर भी स्पष्ट सवाल उठता है: क्या यह सिर्फ एक दुर्घटना है, या संख्या 7, 11, 13 और 17 कोई विशेष है?

यह पता चला है कि इन नंबरों में कुछ सामान्य है। ये सभी प्राइम नंबर हैं जो केवल अपने आप से और एक से विभाजित होते हैं (ये 1 , 2, 3, 5, 7, 11, 13, 17, 19, 23 और इसी तरह) हैं।

यह इतना महत्वपूर्ण क्यों है?

अध्ययनों से पता चला है कि जानवरों की संख्या जो कि सिकाडों पर फ़ीड करती है - आमतौर पर पक्षी, मकड़ियों, ततैया, मछली और सांप - अक्सर आबादी के शिखर और गिरावट के बीच 2-6 साल के छोटे चक्र को प्रदर्शित करते हैं। इस प्रकार, यदि हमारे साइकाडस दिखाई देते हैं, उदाहरण के लिए, हर 12 साल में, तो 2, 3, 4 या 6 साल के जीवन चक्र के साथ हर शिकारी अपने संख्या के विकास चक्र को सिकाडास की नियमित उपस्थिति के साथ सिंक्रनाइज़ कर सकता है। वास्तव में, उन्होंने संभवतः सिकाडा डे नामक एक सामान्य ग्लूटोनी त्योहार की घोषणा की होगी।

अगर आप सिकाडा हैं तो यह बहुत मजेदार नहीं है।

दूसरी ओर, अगर ततैया की आबादी के तीन साल के शिखर के दौरान दिखाई देने के रूप में सिसकस का शोरबा दुर्भाग्यपूर्ण था, तो अगली बार यह 51 साल बाद ही होगा। मध्यवर्ती पीढ़ियों में, सिकाडा शांतिपूर्वक अपनी आबादी को बहाल कर सकता है और शिकारियों की संख्या से कहीं अधिक हो सकता है।

संसाधन छोटा, सही?

अद्भुत। लेकिन यह वेब डिज़ाइन से कैसे संबंधित है?

कुछ हफ़्ते पहले हमने देखा कि कैसे सीमलेस टाइलिंग बनाई जाती है । यह एक सुपर-उपयोगी चीज है, लेकिन सही संतुलन बनाए रखना मुश्किल हो सकता है।

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

हो सकता है कि आप इस पैटर्न को तोड़ने के लिए सिकाडस से कुछ विचार उधार ले सकते हैं?

सीएसएस यादृच्छिक पीढ़ी

उदाहरण 1

बात करना बंद करो। यहाँ अवधारणा पर एक छोटी सी जाँच है। परीक्षण पूरी तरह से सुंदर नहीं दिखना चाहिए, लेकिन यह सार को अच्छी तरह से प्रदर्शित करता है। "सिकाडा सिद्धांत" को ध्यान में रखते हुए, मैंने क्रमशः 29, 37, और 53 पिक्सेल के तीन वर्ग पारभासी PNGs बनाए, और उन्हें परीक्षण पृष्ठ पर HTML तत्व में पृष्ठभूमि छवियों के रूप में सेट किया।

29-a.png (2.0kb) 37-a.png (1.7kb) 53-a.png (2.5kb)

html { background-image: url(29-a.png),url(37-a.png), url(53-a.png); padding:0; margin:0; height: 100%; } 

और यहाँ परिणाम है।

परिणाम

जैसा कि आप देख सकते हैं, ये वर्ग ओवरलैप और बातचीत करते हैं, नए पैटर्न और रंग पैदा करते हैं। और जब से हम जादू की झप्पी का उपयोग करते हैं, पैटर्न बहुत लंबे समय तक दोहराया नहीं जाएगा।

कब तक है? 29 × 37 × 53 ... या 56,869 पिक्सेल!

यह मेरे लिए एक क्रांति थी। मैंने अपनी गणना तीन बार जाँची, लेकिन गणित पूरी तरह विश्वसनीय है। याद रखें, ये छोटी ग्राफिक फाइलें हैं, जो कुल मिलाकर 7 किलोबाइट से भी कम हैं, जबकि लगभग 57,000 पिक्सल चौड़ा है।

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

ठीक है। सैद्धांतिक रूप से, ज्यामितीय आकार अच्छी तरह से काम करते हैं, लेकिन आप इस विचार का उपयोग कैसे कर सकते हैं?

उदाहरण 2

आइए एक अधिक फोटोरिअलिस्टिक उदाहरण लें जो हम में से प्रत्येक एक रूप में या किसी अन्य रूप में देख सकते हैं: थिएटर पर्दा। शुरुआत के लिए, मुझे यहां कुछ अच्छे ग्राफिक्स मिले। यदि आप हमारे पर्दे को देखते हैं, तो आप समान ऊर्ध्वाधर ब्लॉकों को देखेंगे।

इस उदाहरण के लिए, मैं इस गैप को "रफल यूनिट" कहूंगा, और पहले उदाहरण के विपरीत, यह हमारे द्वारा काम की गई छवियों के सख्त पिक्सेल आकारों की तुलना में अधिक महत्वपूर्ण होगा।

सबसे पहले, मैं इनमें से एक ब्लॉक का चयन करने जा रहा हूं और इसे सीमलेस बैकग्राउंड के लिए एक एलिमेंट में बदल दूंगा। यह केवल 8kb का jpeg है ।

किसी एकल ब्लॉक का प्रतिपादन करते समय, यह ग्राफिक उन सभी का प्रतिनिधित्व करता है, जिन्हें हम एक सहज पृष्ठभूमि में घृणा करते हैं। स्पष्ट रूप से दिखाई देने वाले जोड़ों के अलावा, यह बहुत यांत्रिक और बिल्कुल असंबद्ध दिखता है।

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

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

हमारी तीसरी परत की जादुई संख्या सात है ।

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

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

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

यदि आप संख्यात्मक पृष्ठभूमि से इस पृष्ठभूमि को देखते हैं और प्रत्येक ब्लॉक को एक संख्या के रूप में प्रस्तुत करते हैं, तो आपको निम्नलिखित मिलते हैं: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1। , 1, 3, 1, 1, 6, 1, 1, 2, 3 ...

वहाँ एक पैटर्न है, लेकिन इसे पहचानना बहुत मुश्किल है।

इस उदाहरण में, रंगमंच के पर्दे के रूप में लगभग अंतहीन पृष्ठभूमि की लागत हमें केवल 53kb है। और हां, आप आसानी से एक चौथी परत जोड़ सकते हैं - संभवतः 11 ब्लॉक आकार में - यदि आवश्यक हो। हालांकि, मुझे नहीं लगता कि यहां इसकी आवश्यकता है।

यह भी ध्यान रखें: यह उदाहरण सबसे छोटी अभाज्य संख्याओं का उपयोग करता है - 1, 3, और 7. यदि हमने लिया, तो, कहें, 11, 13 और 17, हम दिए गए आकार में बहुत अधिक जटिल बदलाव कर सकते हैं। वास्तव में, यह सभी स्क्रीन की चौड़ाई के सापेक्ष बनावट के पैमाने पर नीचे आता है।

उदाहरण 3

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

2,200 साल पहले, चीनी सम्राट किन शी हुआंग ने अपनी कब्र की रक्षा के लिए 8,000 लोगों की एक टेराकोटा सेना बनाई थी । प्रत्येक योद्धा, घोड़े और हथियार की पूर्ण आकार की प्रतिमा एक अद्वितीय हस्तनिर्मित उत्पाद है।

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

मैं तुम्हें दिखाता हूँ ... मेरी ताकतवर सेना लेगो!
लीजन सिर्फ आठ छवियों से बना है जो हजारों संयोजन बनाने के लिए एक साथ आते हैं। यह उपयोग करता है:

• पृष्ठभूमि के लिए 2 चित्र
• 2 फुट चित्र
• 2 धड़ चित्र
• 2 हेड इमेज

सारांश

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

यह नीचे की परत को छोटा करने और दोहराने के लिए काफी संभव है, क्योंकि यह शीर्ष पर सभी परतों के साथ ओवरलैप करता है। वास्तव में, यह केवल 20-40% दिखाई देगा।

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

किसी भी मामले में, आपको लगभग हमेशा परीक्षण और त्रुटि का उपयोग करने की आवश्यकता होती है।

ब्राउज़र का समर्थन

मैंने HTML तत्व में कई पृष्ठभूमि का उपयोग करके मार्कअप को सरल छोड़ दिया है। यह विकल्प सभी आधुनिक ब्राउज़रों (फ़ायरफ़ॉक्स 4, क्रोम 10, IE9, ओपेरा 11, सफारी 5) द्वारा समर्थित है, लेकिन, जाहिर है, पुराने संस्करण नहीं।

हालांकि, यदि पश्चगामी संगतता एक स्थिति है, तो html , body और div कंटेनर में टाइलिंग एक उपयुक्त विकल्प हो सकता है। शायद कंटेनर सिमेंटिक नहीं हो सकता है, लेकिन यह थोड़ा भोग पूरे साइट पर संभावित रूप से बड़ा प्रभाव डाल सकता है। यह आप पर निर्भर है।

ये तीन उदाहरण पहले मेरे पास आए थे, लेकिन मुझे यकीन है कि विचार का उपयोग करने के कई और साक्षर तरीके हैं। उदाहरण के लिए:

• अंतहीन सिटीस्केप
• लकड़ी की अनूठी बनावट
• तारों वाला आकाश
• घना जंगल
• बादल छाए रहेंगे

शायद कुछ और विचार हैं?