We draw the code from "Matrix" for PHP

Once I had the idea to make a dynamically created background for a blog in the form of the notorious code from the movie "The Matrix". After killing the evening and half the night, I did achieve the desired result, and decided to share it with the people. Unfortunately, I did not find such an implementation, but I still want to have a dynamically created “matrix” as the background of the blog.
So, we write the PHP Matrix code generator using the gd library.

So, the following requirements are set for the generated picture:
1. The columns of the code should not be equal in length, the length should be chosen randomly
2. The brightness of the color should increase from top to bottom.
3. The location of the posts should be random, but they should not fit on each other
4. The resulting picture should not be cached by browsers, so that with each update a new code will be obtained.
5. The code should not fly out of the picture.

Let's proceed, in fact, to the generation of the picture.

First you need to think about what will act as elements of the code. The "Matrix" used both numbers and kana (syllabary alphabet of Japanese). The latter look more impressive, therefore, we take it.
Let's create a getJapanSym () function that returns the HTML-Entity code (it is used by the imagettftext () function, but about it later).
In Unicode kana is located in the range of codes from 0x3040 to 0x30FF. It is required to take a random symbol code from this range. As a result, we get the following function:

function getJapanSym() { $rnd = rand(hexdec("3040"), hexdec("30FF")); // -   , -    ,      0xXXXX    return "&#x".dechex($rnd).";"; //  HTML-Entity,   ア } 

')
Next we need to draw the actual picture. Let's take it in order.
First of all we need to draw a column with a cana with a given number of characters. For rendering, we will use the previously mentioned function imagettftext () from the gd library. Moreover, the color of each character should be different from the previous one, so that a simple \ n is not enough, you have to write a whole cycle.
Kanu itself can be found in the Arial Unicode MS font, which we actually use.
The function for drawing kana in a column looks like this:

 for ($i = 0; $i < $symCount; $i++) //  $symCount       { imagettftext( $img, //   10, //   0, //  ,    ,   0 $codePlacement, //  X,      $symPadding, //  Y,       hexdec("00".dechex($printCol)."00"), // ,      "./arial.ttf", //   .  PHP    getJapanSym() // , ,    HTML-Entity ); $symPadding += 15; //     Y   .   ,         } 

For readability and commenting, each parameter is placed on a separate line.

The above code will draw just a column with a cana. But we also need to paint it, and the first character should be barely visible on a black background, and the last, respectively, should be the brightest. To do this, the $ printCol variable is introduced, which is responsible for the green component in the RGB representation.
Let's add some variables before the loop:

  $colorIncrement = round(254 / $symCount); $printCol = 16; 

The first variable, the color increment, is calculated as the ratio of all possible colors to the number of hieroglyphs in a column. This increment will be added after drawing each hieroglyph.
The second variable, $ printCol, is the color itself. The initial color is 16, and not by chance. 16 in hexadecimal notation is 10, that is, two characters, and it is necessary not to “break” the type of color code “00XX00”, exactly 6 characters in hexadecimal.
Now we use our innovation in the main loop:

 $colorIterate = round(254 / $symCount); $printCol = 16; for ($i = 0; $i < $symCount; $i++) { imagettftext($img, 10, 0, $codePlacement, $symPadding, hexdec("00".dechex($printCol)."00"), "./arial.ttf", getJapanSym()); $symPadding += 15; $printCol += $colorIncrement; //         } 

Now this section will display a ready-made column of beautiful kana characters with the correct color. Note that the design is used to set the color

 hexdec("00".dechex($printCol)."00") 

. Perhaps it looks stupid, but in php the increment is performed in decimal notation, and we need a number in hexadecimal, and, as mentioned earlier, we only change the green color.

So, now we need to draw several such columns to get a full-fledged "matrix" code. I think that less clarification is required here, and there is enough code with comments.

 $img = imagecreatetruecolor (500, 500); //    500x500.      . $position = 4; //       for ($rows = 0; $rows < 50; $rows++) //  49    (   ,    ) { $symPadding = rand(3, 450); //     Y    .       450,     $symCount = round((rand($symPadding + 100, 500) - $symPadding) / 17); // ,    ,            - $colorIncrement = round(254 / $symCount); //  ,    $printCol = 16; //  ,    $codePlacement = rand($position - 4, $position + 1); //       X,  ,    ,  ,        for ($i = 0; $i < $symCount; $i++) //  .   . { imagettftext($img, 10, 0, $codePlacement, $symPadding, hexdec("00".dechex($printCol)."00"), "./arial.ttf", getJapanSym()); $symPadding += 15; $printCol += $colorIncrement; } $position += 20; //  20       } 

So, we already have a ready-made “Matrix” code in the $ img variable, it remains only to display it. But here's a little trick: browsers love to cache the background. Therefore, in order for the user to see the new background each time, it is required to disable caching using headers. We do it like this:

 header("Cache-Control: no-store"); //    "" header("Expires: " . date("r")); //     header("Content-Type: image/png"); // ,    ,    imagepng ($img); //   imagedestroy($img); //       . 

As a result, we get the following image:

You can update the page, each time the script will issue a new code

Unfortunately, the Firefox browser does not know how to correctly display the background after the update, and it turns out the merger of the two versions, the rest of the browsers do not suffer from this.

[UPD]: the source of the Matrix with and without font .