👨🏻‍⚕️ 📁 👩‍❤️‍💋‍👨 एक वेब पेज की पृष्ठभूमि में एक जटिल भूलभुलैया बनाएँ 👨🏼 ☦️ 👨🏽‍🏫

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

html {background: url('fon.gif') repeat;}

पहली बात जो मन में आती है: भूलभुलैया का एक टुकड़ा खींचना और बस इसे गुणा करना। भूलभुलैया "नकली" बाहर आ जाएगी - "लकड़ी की छत बिछाने" के साथ पैटर्न की पुनरावृत्ति तुरंत आपकी आंख को पकड़ लेगी।

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

 html { background-image: url('fon1.gif'); background-repeat: repeat; } body { background-image: url('fon2.gif'); background-repeat: repeat; }

यह पहले से ही गर्म है, लेकिन यदि आकार असफल हैं, तो यह एक छवि की पृष्ठभूमि-दोहराने की तुलना में मौलिक लाभ नहीं देगा। हालांकि तुरंत नहीं, लेकिन भूलभुलैया की संरचना फिर से दोहराना शुरू हो जाएगी।

7 वीं कक्षा के लिए गणित को कौन याद रखता है, उसे तुरंत पता चलेगा कि "नॉन-रिपीटिशन" गुणांक, छवि पक्ष की लंबाई के सबसे बड़े सामान्य विभाजक (GCD) द्वारा सबसे छोटे सामान्य मल्टीपल (NLC) को विभाजित करने के भागफल के बराबर होगा। यही है, यदि एक छवि एक 3x3 तत्व है, और दूसरा 6x6 है, तो 2 पुनरावृत्तियों के बाद भूलभुलैया "शुरू होता है"।

दुखद निष्कर्ष इस प्रकार है कि एक गैर-दोहराए जाने वाले पैटर्न को प्राप्त नहीं किया जा सकता है। वैसे भी, सीएसएस तरीके। आप जावा स्क्रिप्ट के साथ आकर्षित कर सकते हैं, लेकिन ... आप समझते हैं ...

यदि एक अंतहीन भूलभुलैया को खड़ा करना भाग्य नहीं है, तो कम से कम हम पृष्ठभूमि को यथासंभव लंबे समय तक दोहराएंगे। ऐसा करने के लिए, दोनों छवियों के पक्षों को परस्पर प्रमुख होना चाहिए। इस मामले में, एनओसी पार्टियों के उत्पाद के बराबर है, जीसीडी एक के बराबर है। और इस मामले में "गैर-पुनरावृत्ति" के पुनरावृत्तियों की संख्या पहले से ही एनओसी के बराबर होगी, जो कि छोटे मूल्यों के साथ भी काफी है। यदि, उदाहरण के लिए, हम 3x3 और 4x4 लेते हैं, तो केवल 12 ओवरले के बाद ही हम जटिल पैटर्न में परिचित आकार पाएंगे। और यदि आप 13x23 और 17x19 लेते हैं, तो किसी भी आकार के पृष्ठ के लिए जटिल मार्गों की विशिष्टता प्रदान की जाती है।

ऐसी अंकगणितीय गणनाओं से उत्साहित होकर, ऐसा लग सकता है कि यह जीत का जश्न मनाने का समय है। लेकिन कपटी गणित एक और बैंडवादक लगा देता है।

पार्टियों की समता के मामले में शतरंज के मैदान ओवरलैप करने के लिए सुविधाजनक हैं। चूंकि हम चाहते हैं कि दो चित्रों का पहलू अनुपात परस्पर सरल हो, उनमें से कम से कम एक "विषम" होना चाहिए। यह विषमता गलत वर्गों के साथ अनियमित ओवरलैप के रूप में एक अप्रिय आश्चर्य प्रस्तुत करती है। पहले से ही दूसरे रन में, खाली वर्ग खाली, तिरछे - स्केच पर गिरते हैं।

"विषम" चित्र को दाईं ओर / नीचे एक पंक्ति में स्थानांतरित करने से कुछ हल नहीं होता है। पक्षों के विभिन्न संयोजनों के साथ घुमा और मोड़ विकल्प, मैं पारदर्शी कोशिकाओं के बिना नीचे की तस्वीर बनाने के तरीके से बेहतर कुछ भी नहीं आया। इस मामले में, 100% गारंटी है कि पृष्ठभूमि में कोई अंतराल voids नहीं होगा। लेकिन php स्क्रिप्ट आंशिक रूप से निष्क्रिय चलती है, दीवारों का प्रतिपादन करती है जो अभी भी दिखाई नहीं देगी। यदि आपके पास "अनावश्यक काम" के बिना करने के बारे में विचार हैं - तो इसका सुझाव दें। याद रखें, विभिन्न छवियों का पहलू अनुपात परस्पर सरल होना चाहिए।

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

index.php

 <?php include_once "generate_fon.php"; ?> <html> <title>10 PRINT CHR$(205.5+RND(1));: GOTO 10</title> <style type='text/css'> html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } html { background-image: url('fon1.png'); background-repeat: repeat; } body { background-image: url('fon2.png'); background-repeat: repeat; } #outer { height: 300px; line-height: 300px; text-align: center; } #inner { outline: solid #99c medium; padding: 50px; background: #336; color: #99c; font-weight: bold; font-size: 16pt; } </style> <body> <div id='outer'><span id='inner'>10 PRINT CHR$(205.5+RND(1));: GOTO 10</span></div> </body> </html>

generate_fon.php

 <?php function create_background_image ($w, $h, $quadro, $is_chess, $numder) { //w, h -  /   //$quadro -      " ", px //$is_chess - true/false,       //$numder -       (  2) $img = imageCreate($w*$quadro, $h*$quadro);// ,  $color_transparent = imagecolorallocate ($img, 0, 0, 0);//      $color_background = imagecolorallocate ($img, 51, 51, 102);//  $color_line = imagecolorallocate ($img, 153, 153, 204);//  imagesetthickness($img, 4);// "" // " " for ($i = 0; $i < $w; $i++) { for ($j = 0; $j < $h; $j++) { $sparseness = mt_rand(0, 8);//"" . 1   9-     "" if ($sparseness) { //   " " if (!($is_chess && ($i % 2 == $j % 2))) { //     imagefilledrectangle ( $img, $i * $quadro, $j * $quadro, //   ($i + 1) * $quadro, ($j + 1) * $quadro, //   $color_background //  ); //" ",    "" $direction = mt_rand(0, 1); //  ( : \  /) if ($direction) { imageline ( $img, $i * $quadro, $j * $quadro, //   ... ($i + 1) * $quadro, ($j + 1) * $quadro, //...     $color_line //  ); } else { imageline ( $img, ($i + 1) * $quadro, $j * $quadro, //   ... $i * $quadro, ($j + 1) * $quadro, //...     $color_line //  ); } } else { //     imagefilledrectangle ( $img, $i * $quadro, $j * $quadro, //   ($i + 1) * $quadro, ($j + 1) * $quadro, //   $color_transparent //  -  ); } } else { //   ""   //""  ,    imagefilledrectangle ( $img, $i * $quadro, $j * $quadro, //   ($i + 1) * $quadro, ($j + 1) * $quadro, //   $color_background //  ); } } } imagecolortransparent ($img, $color_transparent);//   imagepng ($img, "fon$numder.png");//    imageDestroy($img);//   "" - } $w1 = 17; $h1 = 19;//    $w2 = 23; $h2 = 13;//    $wall = 30; //     " ", px $img1 = create_background_image($w1, $h1, $wall, false, 1);//    $img2 = create_background_image($w2, $h2, $wall, true, 2);//    ?>

स्क्रिप्ट में, मैंने दीवारों की पीढ़ी को "पतला" कर दिया। मूल एल्गोरिथ्म में, बहुत अधिक "ब्लाइंड मूव्स" होते हैं जिन्हें नहीं पहुँचा जा सकता है। मैंने इसे दर्शकों के लिए 45 डिग्री तक घुमाने की कोशिश की, लेकिन ऊर्ध्वाधर और क्षैतिज रेखाएं सादे php का उपयोग करके खींची जाती हैं, जिसका मतलब है किसी भी तरह से स्पष्ट रूप से । सामान्य तौर पर, जो लोग भवन निर्माण के लिए नवाचार और सुधार लाना चाहते हैं, उनके लिए काम करने का कोई अंत नहीं है।

एक वेब पेज की पृष्ठभूमि में एक जटिल भूलभुलैया बनाएँ

More articles: