kissarat · April 4, 2013 08:17
diff --git a/alim-security-background-animation2.html b/alim-security-background-animation2.html
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <style type="text/css">
        #canvas {
            /*width: 1280px;*/
            /*height: 1024px;*/
            image-rendering: optimize-contrast;
            border: black 1px solid;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        window.__defineGetter__('centerX', function () {
           return Math.round(this.innerWidth/2);
        });
        window.__defineGetter__('centerY', function () {
            return Math.round(this.innerHeight/2);
        });

        var Box = function(x, y, width, height) {
            this.left = x ? x : 100;
            this.right = this.left + (width ? width : 500);
            this.top = y ? y : 100;
            this.bottom = this.top + (height ? height : 500);

            var self = this;
            Object.defineProperty(this, 'centerX', {
                get : function() {
                    return Math.round(this.left + (this.right - this.left)/2);
                },

                set : function(value) {
                    value -= this.centerX;
                    this.left += value;
                    this.right += value;
                }
            });

            Object.defineProperty(this, 'centerY', {
                get : function() {
                    return Math.round(this.top + (this.bottom - this.top)/2);
                },

                set : function(value) {
                    value -= this.centerY;
                    this.top += value;
                    this.bottom += value;
                }
            });
            setInterval(function () {
                self.draw();
            }, 40);
        }

        Box.prototype = {
            draw : function() {
                g = canvas.getContext('2d');
                g.beginPath();
                g.clearRect(0, 0, canvas.width, canvas.height);
                //g.strokeRect(centerX-1, centerY-1, centerX+1, centerY+1);
                for (var i=0; i < 280; i += 10)
                    g.strokeRect(this.left + i, this.top + i, this.right - i*2, this.bottom - i*2);
                g.closePath();
            }
        }
        var box;
        window.onload = function() {
            document.body.onmousemove = mouse_move;
            canvas.width = innerWidth;
            canvas.height = innerHeight;
            box = new Box();
        }

        function mouse_move(event) {
            var
                    deltaX = event.clientX - centerX,
                    deltaY = event.clientY - centerY;
            setTimeout(function() {
                box.centerX = centerX - deltaX/4;
                box.centerY = centerY - deltaY/4;
            }, 20);
        }


    </script>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	#canvas {
	/width: 1280px;/
	/height: 1024px;/
	image-rendering: optimize-contrast;
	border: black 1px solid;
	left: 0;
	top: 0;
	}
	</style>
	<script type="text/javascript">
	window.__defineGetter__('centerX', function () {
	return Math.round(this.innerWidth/2);
	});
	window.__defineGetter__('centerY', function () {
	return Math.round(this.innerHeight/2);
	});

	var Box = function(x, y, width, height) {
	this.left = x ? x : 100;
	this.right = this.left + (width ? width : 500);
	this.top = y ? y : 100;
	this.bottom = this.top + (height ? height : 500);

	var self = this;
	Object.defineProperty(this, 'centerX', {
	get : function() {
	return Math.round(this.left + (this.right - this.left)/2);
	},

	set : function(value) {
	value -= this.centerX;
	this.left += value;
	this.right += value;
	}
	});

	Object.defineProperty(this, 'centerY', {
	get : function() {
	return Math.round(this.top + (this.bottom - this.top)/2);
	},

	set : function(value) {
	value -= this.centerY;
	this.top += value;
	this.bottom += value;
	}
	});
	setInterval(function () {
	self.draw();
	}, 40);
	}

	Box.prototype = {
	draw : function() {
	g = canvas.getContext('2d');
	g.beginPath();
	g.clearRect(0, 0, canvas.width, canvas.height);
	//g.strokeRect(centerX-1, centerY-1, centerX+1, centerY+1);
	for (var i=0; i < 280; i += 10)
	g.strokeRect(this.left + i, this.top + i, this.right - i2, this.bottom - i2);
	g.closePath();
	}
	}
	var box;
	window.onload = function() {
	document.body.onmousemove = mouse_move;
	canvas.width = innerWidth;
	canvas.height = innerHeight;
	box = new Box();
	}

	function mouse_move(event) {
	var
	deltaX = event.clientX - centerX,
	deltaY = event.clientY - centerY;
	setTimeout(function() {
	box.centerX = centerX - deltaX/4;
	box.centerY = centerY - deltaY/4;
	}, 20);
	}


	</script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>