(Simple version)Matrix like animated dropping character effect in PHP

This code is only for monospaced typefaces, else it will look strange. This is a simplified version of the dropping down characters(or Matrix Digital Rain), I will create more complex ones later.
The end result is something like this
Matrix like animated dropping character effect
Like most animated effects I will ever make, it needs GIFEncoder class.

The basic idea:
On a screen, when one pixel is activated, it lights up. Here, instead of a pixel, it is a character, so I just have to construct a character grid and light them when it is activated.

Although I did not use any code from Nazmul Hassan's PHP Matrix, he is the one who inspired me to make a animated version, and he is especially kindly to give the source code to me.

include('GIFEncoder.class.php');
ob_start();
$msg = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890~!@#$%^&*()-_=+`[]{};:?/.,<>\\|"';
$length = strlen($msg);
$max_x = 400; //image x size
$max_y = 400; //image y size
$font_file = 'cour.ttf';//font, best monospace
$font_size = 10;//font site
$grid = 10;//gridient of the fonts
$measuer = imagettfbbox(10,0,$font_file,'1');
$space = 5;//space between letters
$char_height = $measuer[1] - $measuer[7] + $space;
$char_width = $measuer[2] - $measuer[0] + $space;
$i = 1;
$colorimage = imagecreatetruecolor(1,1);
$color[1] = imagecolorallocate($colorimage, 255, 255, 255);
while($i<$grid){
 
	$color[] = imagecolorallocate($colorimage, 0, 255-20*$i, 0);
	++$i;
}
imagedestroy($colorimage);
//ENOUGH TEXT TO FILL THE PAGE.
$width = ceil($max_x/$char_width);
$height = ceil($max_y/$char_height);
 
 
$x = 0;
while($x < $width){
	$y = 0;
	while($y < $height){
		$text[$x][$y] = $msg[rand(0,$length)];
		++$y;
	}
	$drop[$x] = rand(0, $width);
	++$x;
}
$i = 0;
while($i<$height+$grid){
	$image = imagecreatetruecolor($max_x, $max_y);
	$x = 0;
	while($x < $width){
		$y = 0;
 
		while($y < $drop[$x]){
			if($drop[$x]-$y<=$grid){
				imagettftext($image, $font_size, 0, $x*$char_width, ($y+1)*$char_height-$space, $color[$drop[$x]-$y], $font_file, $text[$x][$y]);
			}
			++$y;
		}
		if($drop[$x]<$height+$grid){
			++$drop[$x];
		}else{
			$drop[$x] = 0;
		}
		++$x;
	}
	imagegif($image);
	$imagedata[$i] = ob_get_contents();
	imagedestroy($image);
	ob_clean();
	++$i;
}
 
$gif = new GIFEncoder(
                            $imagedata,
                            100,
                            0,
                            2,
                            0, 0, 0,
                            "bin"
        ); 
Header ( 'Content-type:image/gif' );
echo    $gif->GetAnimation ();

Please download your own true type fonts.


Pulse of Text

Anonymous's picture

Hello, I have been messing around with your matrix code. Great idea! I have enlarged the image to 1000X600. It still works, but I get a "pulse" of rain that runs down the page at the start of every cycle. In between this pulse, I get a nicely distributed "rain". In other words, the first GIF has most of the letters across the top lit and these run down the page as a group. Any ideas on how to fix this to get a more even "rain"? Thanks!

Oh, one other thing. I am really a newbie to PHP, but I can't seem to put your code inside of another page (I can't tell it to include your code in a table, for instance). It always gives an error about the header already having been defined and a bunch of junk code when I look at it in a browser. Any thoughts on this?

Thanks,

Lee

Can you show me the code?

Mgccl's picture

I did this code a long time ago so I might not know the reason on top of my head...
but try change $grid into a larger number, a number like into 25 or something and try again.

For the 2nd question
The php code outputs a image file with it's HTTP header, so it is treated as a image file. But if you want to embed it, use HTML tag and treat the php script as a image.
<img src="thephpimagematrix.php"/>

Hey. I'm glad I found this

Slovig's picture

Hey. I'm glad I found this code. I was wondering how would I make it make a larger image. I'm not very good with PHP, but am reading about it.

Thanks.

welcome

Mgccl's picture

welcome

Ok. For some reason, this

Slovig's picture

Ok. For some reason, this wont work for me. I have both, the script in a file called matrix.php, and the GIFEncoder.class.php file in a directory called matrix on my site. Then I have the image source as "matrix/matrix.php". At first, someone pointed out to me that you left out the <?php and ?> tags from the php script. But I added them, and it still wont work??? Any tips?

maybe, your PHP does not

Mgccl's picture

maybe, your PHP does not support GD.
ask your host :)

I think I'm my Host. I get

Slovig's picture

I think I'm my Host. I get the space from siteground.com, but I can ftp and such. How would I make it so it does have GD support?

Thanks!!

Hey again. I know for a fact

Slovig's picture

Hey again. I know for a fact that I have GD support...

I have GD Support

look into the source, there

Mgccl's picture

look into the source, there is a line

$font_file = 'cour.ttf';//font, best monospace

download some fonts, must be true type, and put it in the same folder of the script, change $font_file to the name of your font file, and it should work.

Yea. Someone pointed that

Slovig's picture

Yea. Someone pointed that out to me. Thanks!!!

Post new comment

The content of this field is kept private and will not be shown publicly.
If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <img> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <span> <fn>
  • Lines and paragraphs break automatically.
  • Textual smileys will be replaced with graphical ones.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Use <fn>...</fn> to insert automatically numbered footnotes.

More information about formatting options

What is 47 + 29?
To combat spam, please solve the math question above.
Honey Pot that kill bots