Untitled

<html>
<head>
<title>Minimal.js</title>
<script>


//RUNS ON LOAD
    function init(){
        //GLOBAL VARIABLES
        //WINDOW PROPERTIES
            var width=window.innerWidth;
            var height=window.innerHeight;
        //END OF WINDOW PROPERTIES
        //DOM VARIABLES
            var canvas=document.getElementById('canvas');
            var ctx=canvas.getContext('2d');
        //END OF DOM VARIABLES
        //SETTING WIDTH & HEIGHT OF CANVAS = WINDOW
            canvas.width=width;
            canvas.height=height;
        //END OF SETTING WIDTH & HEIGHT OF WINDOW
        //MATH VARIABLES
            var pi=Math.PI;

        //END MATH VARIABLES


    //GLOBAL VARIABLES END

                rectangle=[{x:0,y:0,width:25,height:25,vx:1,vy:1},{x:width-25,y:height-25,width:25,height:25,vx:-1,vy:-1}];
                //DRAWING MAIN BACKGROUND
                    function drawBG(){

                        for(var i=0;i<=rectangle.length-1;i++){
                            var hexa=[0,0,0,0,0,0]
                            for(var l=0;l<=5;l++){
                            var random=Math.floor(Math.random()*16);

                            switch(random){
                                case 0:
                                 hexa[l]=0;
                                 break;
                                 case 1:
                                 hexa[l]=1;
                                 break;
                                 case 2:
                                 hexa[l]=2;
                                 break;
                                case 3:
                                 hexa[l]=3;
                                 break;
                                case 4:
                                 hexa[l]=4;
                                 break;
                                case 5:
                                 hexa[l]=5;
                                 break;
                                case 6:
                                 hexa[l]=6;
                                 break;
                                case 7:
                                 hexa[l]=7;
                                 break;
                                case 8:
                                 hexa[l]=8;
                                 break;
                                case 9:
                                 hexa[l]=9;
                                 break;
                                case 10:
                                 hexa[l]='a';
                                 break;
                                case 11:
                                 hexa[l]='b';
                                 break;
                                case 12:
                                 hexa[l]='c';
                                 break;
                                case 13:
                                 hexa[l]='d';
                                 break;
                                case 14:
                                 hexa[l]='e';
                                 break;
                                case 15:
                                 hexa[l]='f';
                                 break;


                            }
                        }

                            ctx.fillStyle='#'+hexa[0]+hexa[1]+hexa[2]+hexa[3]+hexa[4]+hexa[5]+'';
                            ctx.fillRect(rectangle[i].x,rectangle[i].y,rectangle[i].width,rectangle[i].width);
                            rectangle[i].x+=rectangle[i].vx;
                            rectangle[i].y+=rectangle[i].vy;
                            if (rectangle[i].x>=width-rectangle[i].width||rectangle[i].x<=0){
                                bounceX();
                            }
                            if (rectangle[i].y>=height-rectangle[i].height||rectangle[i].y<=0){
                                bounceY();
                            }
                            if (rectangle[0].x)
                            function bounceX(){
                                rectangle[i].vx=-rectangle[i].vx
                            }
                            function bounceY(){
                                rectangle[i].vy=-rectangle[i].vy
                            }


                        }

                        ctx.fillStyle='#ff0000';
                        ctx.fillRect(rectangle.x,rectangle.y,rectangle.width,rectangle.height);
                        rectangle.x+=rectangle.vx;
                        rectangle.y+=rectangle.vy;
                        if (rectangle.x==width-rectangle.width||rectangle.x==0){
                            bounceX();
                        }
                        if (rectangle.y==height-rectangle.height||rectangle.y==0){
                            bounceY();
                        }
                        function bounceX(){
                            rectangle.vx=-rectangle.vx
                        }
                        function bounceY(){
                            rectangle.vy=-rectangle.vy
                        }


                    }

                //END OF MAIN BACKGROUND

            //CALLING INITIAL DRAW FUNCTIONS
            var Interval=setInterval(function(){drawBG()},1);
            Interval;

            //END OF DRAW FUNCTION

}
//END OF INIT


//ONLOAD RUN INIT
window.onload=init;
//


</script>
<style type="text/css">
body{margin: 0; overflow: hidden;}
</style>
</head>
<body>
<canvas id='canvas' width='10' height='10'></canvas>
</body>
</html>