invitation india
Create Best Hacking Matrix Effect in HTML
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:
No comments: