<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title>Matrix</title>
</head>
    <body>
<script type="text/javascript">

function toSpans(span) {
var str=span.firstChild.data;
var a=str.length;
span.removeChild(span.firstChild);
for(var i=0; i<a; i++) {
var theSpan=document.createElement("SPAN");
theSpan.appendChild(document.createTextNode(str.charAt(i)));
span.appendChild(theSpan);
}
}


function RainbowSpan(span, hue, deg, brt, spd, hspd) {
this.deg=(deg==null?360:Math.abs(deg));
this.hue=(hue==null?0:Math.abs(hue)%360);
this.hspd=(hspd==null?3:Math.abs(hspd)%360);
this.length=span.firstChild.data.length;
this.span=span;
this.speed=(spd==null?50:Math.abs(spd));
this.hInc=this.deg/this.length;
this.brt=(brt==null?255:Math.abs(brt)%256);
this.timer=null;
toSpans(span);
this.moveRainbow();
}


RainbowSpan.prototype.moveRainbow = function() {
if(this.hue>359) this.hue-=360;
var color;
var b=this.brt;
var a=this.length;
var h=this.hue;

for(var i=0; i<a; i++) {

if(h>359) h-=360;

if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

h+=this.hInc;

this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
}
this.hue+=this.hspd;
}

</script>


<h3 id="r2" align="center" style="background-color: black;">거짓의 매트릭스를 넘어..!!</h3>

<script type="text/javascript">
var r2=document.getElementById("r2"); //get span to apply rainbow
var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script>



<div align="center">
<canvas id="q" width="700" height="300">Sorry Browser Won't Support</canvas><br /><br /><button id="play">Play</button> <button id="pause">pause</button></div>
<script>
$(document).ready(function(){
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');

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 = String.fromCharCode(1e2+Math.random()*33);
    x = (index * 10)+10;
    q.getContext('2d').fillText(text, x, y);
    if(y > 100 + Math.random()*1e4)
    {
      yPositions[index]=0;
    }
    else
    {
      yPositions[index] = y + 10;
    }
  });
};
RunMatrix();
function RunMatrix()
{
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
        Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
clearInterval(Game_Interval);
}
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});

})
</script>
</body></html>