Create a complex maze in the background of the web page
Being under the pleasant impression of a brief, but very witty and, not afraid of this word, “cult” program , I asked the question: “Is it possible to generate a similar structure in the background image of the site?”. I wanted to create an endless maze, not repeating in any direction. I remembered somewhere I had already met a method that would help anyone to become a Daedalus of web design.
html {background: url('fon.gif') repeat;} ')
The first thing that comes to mind is to draw a piece of the maze and just multiply it. The labyrinth will come out "unreal" - repeating the pattern with the "parquet styling" instantly catches the eye.
Let's complicate the approach. You can create two background images of different sizes. In each of them, in a checkerboard pattern, we alternate transparent areas and walls of the maze. And then we put one under the other. Different sizes and random generation of the walls will allow you to create different combinations of moves when applying:
html { background-image: url('fon1.gif'); background-repeat: repeat; } body { background-image: url('fon2.gif'); background-repeat: repeat; } 
It is already warmer, but if it is unsuccessful to choose sizes, this will not give a principled gain compared to the background-repeat of one image. Albeit not immediately, but the structure of the labyrinth will begin to repeat again.
Who still remembers the math for the 7th grade, realize that the coefficient of "non-repetition" will be equal to the particular of dividing the least common multiple (LCM) by the greatest common divisor (GCD) of the lengths of the sides of the images. That is, if one image is 3x3 elements, and the second is 6x6, then after 2 iterations the maze “starts over”.
This leads to the sad conclusion that an infinitely non-repeating pattern cannot be achieved. Anyway, CSS methods. You can draw a Java script, but ... You understand ...
If it’s not destiny to erect an endless labyrinth, then at least we will make the background as long as possible non-repeating. To do this, the sides of both images must be mutually prime numbers. In this case, the NOC is equal to the product of the parties, the GCD is one. And the number of iterations of the “non-repetition” in this case will already be equal to the LCM, which is quite a lot even for small values. If, for example, we take 3x3 and 4x4, then only in 12 overlays we will find familiar outlines in the intricate pattern. And if you take 13x23 and 17x19, then the uniqueness of intricate routes is provided for a page of any size.
Encouraged by such arithmetic calculations, it may seem like it's time to celebrate a victory. But insidious mathematics puts another footboard.
Chess fields are convenient to impose on each other in case of parity of the parties. Since we want the aspect ratio of the two pictures to be mutually simple, at least one of them must be “odd”. This oddness and presents an unpleasant surprise in the form of irregular overlay is not "those" squares. Already during the second run, the empty squares fall on the empty, sketched - on the sketched.
Offsetting the “odd” picture one row to the right / down does not solve anything. Having twisted and turned options with different combinations of sides, I didn’t think of anything better than how to make the bottom picture without transparent cells. In this case, 100% guarantee that the background will not be gaping voids. But the php-script partially runs idle, rendering walls that will still not be visible. If you have any ideas how to do without “unnecessary work” - offer. Remember, the aspect ratio of different images should be mutually simple.
Actually, everything. See the demo here .
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);// ?> In the script, I "thinned" the generation of walls. In the original algorithm, there are too many “blind moves” that cannot be reached. I also tried to turn 45 degrees to the viewer, but vertical and horizontal lines are drawn with some standard means of php. In general, for those who wish to innovate and improve labyrinth-building, there is no end of work.
Source: https://habr.com/ru/post/161467/
All Articles