tags in Topics
Feeds
Navigation
Most Popular
- (Simple version)Matrix like animated dropping character effect in PHP
- Wordpress and phpbb seems like the center of spambot's attention
- Multiracial are superior
- F-U-C-K YOU CHINA
- phpBB--the world's most popular Bulletin board system
- How to win a jelly bean counting contest
- Guest Book
- A mathematical look into study = fail
- Believe in coke
- About
Misc
(Simple version)Matrix like animated dropping character effect in PHP
Fri, 03/30/2007 - 23:24 | by Mgccl
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.
M: 15.5568008423MB, T: 0.282076835632s, QC: 260, QT: 0.0262424945831s, RT: 0.255834341049s
.
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.
How would you pass text from
How would you pass text from another php page to $msg?
use $_REQUEST
use $_REQUEST
Is it possible to output the
Is it possible to output the image to a file and then use it? $_REQUEST requires the field to be there already, but I'm generating it dynamically.
I've already solved it. The
I've already solved it. The problems that you don't see are always the hardest to solve.
If all the rain falling rates are the same, it's easy. :)
This is some great code. I was scratching my head for some time, thinking, "How can he handle the looping so seamlessly?"
But then I realized that all the raindrops fall at the same rate, and there is no delay between the re-cycling of each column. Because of that, you don't have massive math and looping quandries.
Great work!!
Wow… I really like the idea
Wow… I really like the idea of “falling codes” from the movie Matrix. The movie is also one of my all time favorites! I like the concept so much that last year we made a banner for a program in our university in which we use the still image of this “falling codes” in background and used the famous popular dialogue –“welcome to the real world”!
your codes don't work for me
Nothing is displayed, i don't know why....Could you give me some ideas?
I need more information to
I need more information to know what you are doing.
it works now
After I built php with freetype support...
Thanks for the scripts...
code
help!!
i need an animated falling matrix html code and be able to put a pic in the center stationary pic if possible can anyone help
helo po ganda talaga ng
helo po ganda talaga ng MATRIX
Post new comment