Unexpected Web

Create Best Hacking Matrix Effect in HTML

Read

Great Ways To feal Like A Hacker using Create hackinh Matrix rain animation using HTML5 canvas and javascript. This tutorial is inspired by this cool demo and gschoppe. Gschoppe Matrix is a really interesting prank webPage/Tool that gives you the ability to be like a hacker. You can impress your friends, give your website a fresh new look with adding Matrix animation background or can use to making a short film on Hacking / Cyber Security.

HTML Code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Matrix</title>
        <style>
            body, html, canvas {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                function resetSize() {
                    $('#q').each(function() {
                        $(this)[0].width = $(this).width();
                        $(this)[0].height = $(this).height();
                    });
                }
                resetSize();
                $(document).resize(function() {
                    resetSize();
                });
                var s=window.screen;
                var width = q.width=s.width;
                var height = q.height;
                var yPositions = Array(300).join(0).split('');
                var ctx=q.getContext('2d');
                function getNextChar() {
                    //
                    //return(""+Math.round(Math.random()));
                    if(Math.random()<.4) {
                        // numbers
                        return(getRandomChar(48, 57));
                    } else if(Math.random()<.8) {
                        // capital letters
                        return(getRandomChar(65, 90));
                    } else {
                        // katakana
                        return(getRandomChar(0x30A0, 0x30A0));
                    }
                }
                function getRandomChar(rangeStart, rangeEnd) {
                    return(String.fromCharCode(rangeStart + Math.random() * (rangeEnd-rangeStart+1)));
                }
                var draw = function () {
                    ctx.fillStyle='rgba(0,0,0,.05)';
                    ctx.fillRect(0,0,width,height);
                    ctx.fillStyle='#0F0';
                    ctx.font = '10pt Georgia';
                    yPositions.map(function(y, index){
                        text = getNextChar();
                        x = (index * 10)+10;
                        q.getContext('2d').fillText(text, x, y);
                        if(y > 100 + Math.random()*20000) {
                            yPositions[index]=0;
                        } else {
                            yPositions[index] = y + 10;
                        }
                    });
                };
                RunMatrix();
                function RunMatrix() {
                    if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
                        Game_Interval = setInterval(draw, 25);
                }
                function StopMatrix() {
                    clearInterval(Game_Interval);
                }
                //setInterval(draw, 33);
                $("button#pause").click(function() {
                    StopMatrix();
                });
                $("button#play").click(function(){
                    RunMatrix();
                });
                 
            })
        </script>
    </head>
    <body>
        <div align="center">
            <canvas id="q"></canvas>
        </div>
    </body>
</html>

Preview

Output:

1	Home (News Feed)
2	Your profile page
3	Friend requests
4	Messages
5	Notifications
6	Your Account Settings
7	Your Privacy Settings
8	Go to the Facebook page
9	View Facebook Statements and Rights agreement
0	Open Facebook help center

J	Move to next story in feed
K	Move to the previous story in feed
L	Like or unlike the selected story
C	Comment on selected story
S	Share selected story
O	Open image or link of the selected story
Esc	Close image and return to News Feed
P	Post a new status
/	Search
Q	Search chat contacts

Unexpected Web

About

Use Facebook keyboard shortcuts for navigat Facebook

Keyboard shortcuts for Facebook

Windows :

Apple Mac:

Create Best Hacking Matrix Effect in HTML

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!

Unexpected Web

Connect

About

Use Facebook keyboard shortcuts for navigat Facebook

Keyboard shortcuts for Facebook

Windows :

Apple Mac:

Create Best Hacking Matrix Effect in HTML

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!