21st Birthday in 436 days
Sun September 12, 2010
Sun September 12, 2010
Turning 40 in 7376 days
Wed September 12, 2029
Wed September 12, 2029
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

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.
If you want to find a property through the banks, be ready for a detailed scrutiny of your insurance deals as well as credit report.
Comments
Pulse of Text
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?
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
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
welcome
Ok. For some reason, this
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
maybe, your PHP does not support GD.
ask your host :)
I think I'm my Host. I get
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
Hey again. I know for a fact that I have GD support...
look into the source, there
look into the source, there is a line
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
Yea. Someone pointed that out to me. Thanks!!!
GIFEncoder V2.05: 0 Source is not a GIF image!
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.
I'm trying to use it as a background image and it isn't working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>William Rickert</title> <style type="text/css"> html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} body {font-family:verdana, arial, sans-serif; font-size:76%;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;} </style> </head> <body> <div> <img id="background" dynsrc="thephpimagematrix.php"/> </div> </body> </html> <code>dynsrc? never saw that in my
dynsrc? never saw that in my life...
Excellent!
Excellent animation, thx for sharing.
Nice Code!
Really great stuff. You might like some of the PHP code I've put on my website too. I too love playing around to see what PHP can do ;0)
I'm confused. How do you make
I'm confused. How do you make this into an animated GIF? Also, is there a way to make a larger version (area)?
uhh... the code did
uhh... the code did it...
basically it make every single frame and them combine it into a gif with the gif class made by someone else.
a larger version? yeah... change $max_x and $max_y to larger values.
Post new comment