lele85/snow.html

## snow.html
<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                /*
                * Get mouse event coordinate converted to canvas coordinate
                * c: The canvas object
                * e: A mouse event
                */
                function toCanvasX(c, e) {
                  var posx = 0;

                  if (e.pageX)   {
                    posx = e.pageX;
                  } else if (e.clientX)   {
                    posx = e.clientX + document.body.scrollLeft
                      + document.documentElement.scrollLeft;
                  }
                  posx = posx - c.offsetLeft;
                  return posx;
                }

                function toCanvasY(c, e) {
                  var posy = 0;

                  if (e.pageY)   {
                    posy = e.pageY;
                  } else if (e.clientY)   {
                    posy = e.clientY + document.body.scrollTop
                      + document.documentElement.scrollTop;
                  }
                  posy = posy - c.offsetTop;

                  return posy;
                }

                function Ball(x, y, radius, speedX, speedY, Xdisplacement){
                    this.Xdisplacement = Xdisplacement;
                    this.LEFT_LIMIT = x - Xdisplacement;
                    this.RIGHT_LIMIT = x + Xdisplacement;
                    this.TOP_LIMIT = 0;
                    this.BOTTOM_LIMIT = 600;
                    this.__speedX = speedX;
                    this.__speedY = speedY;
                    this.__x = x;
                    this.__y = y;
                    this.__radius = radius;

                    this.draw = function(context){
                        context.lineWidth = 5;
                        context.arc(
                            this.__x,
                            this.__y,
                            this.__radius,
                            0,
                            2*Math.PI,
                            false
                        );
                        this.__updateColor(context);
                    };

                    this.update = function(){

                        this.__x += this.__speedX;
                        this.__y += this.__speedY;
                        this.__speedX = Math.cos(this.__y/30);
                    };

                    this.__updateColor = function(context){
                        context.strokeStyle =
                        'rgb(' +
                        Math.floor(255*this.__x/800) +
                        ',' +
                        Math.floor(255*this.__y/600) +
                        ',' +
                        50 +
                        ');';
                    };
                };

                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                context.lineWidth = 15;
                context.strokeStyle = "#ff0000"
                context.lineCap = 'round'
                var LINE_WIDTH = 0;
                var MIN_X = 0;
                var MIN_Y = 0;
                var MAX_X = 800;
                var MAX_Y = 600;
                var ORIGIN_X = 150;
                var ORIGIN_Y = 150;
                var DESTINATION_X = ORIGIN_X;
                var DESTINATION_Y = ORIGIN_Y;
                var SPEED_X = 2;
                var SPEED_Y = 2;

                var balls = [];
                /*for (i = 0; i < 50; i++){
                    var ball = new Ball(50*i, 20,5,1,1,50);
                    balls.push(ball);
                };*/

                var onMouseMove = function (ev) {
                    var mouseX = toCanvasX(canvas, ev);
                    var mouseY = toCanvasY(canvas, ev);
                    balls.push(new Ball(mouseX, mouseY,5,1,0.5,50));
                };

                canvas.addEventListener('mousedown', onMouseMove, false);
                //var ball = new Ball(50,50,5,1,1,50);


                var mainloop =  function() {
                    context.clearRect ( MIN_X , MIN_Y , MAX_X , MAX_Y );
                    for (var index in balls){
                        context.beginPath()
                        balls[index].update();
                        balls[index].draw(context);
                        context.stroke();
                    }
                };

                var animFrame =
                    window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    window.oRequestAnimationFrame      ||
                    window.msRequestAnimationFrame     ||
                    null ;

                var recursiveAnim = function() {
                    mainloop();
                    animFrame(recursiveAnim);
                }

                animFrame(recursiveAnim);

            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px dotted;">
        </canvas>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script>

	window.onload = function(){
	/*
	* Get mouse event coordinate converted to canvas coordinate
	* c: The canvas object
	* e: A mouse event
	*/
	function toCanvasX(c, e) {
	var posx = 0;

	if (e.pageX) {
	posx = e.pageX;
	} else if (e.clientX) {
	posx = e.clientX + document.body.scrollLeft
	+ document.documentElement.scrollLeft;
	}
	posx = posx - c.offsetLeft;
	return posx;
	}

	function toCanvasY(c, e) {
	var posy = 0;

	if (e.pageY) {
	posy = e.pageY;
	} else if (e.clientY) {
	posy = e.clientY + document.body.scrollTop
	+ document.documentElement.scrollTop;
	}
	posy = posy - c.offsetTop;

	return posy;
	}

	function Ball(x, y, radius, speedX, speedY, Xdisplacement){
	this.Xdisplacement = Xdisplacement;
	this.LEFT_LIMIT = x - Xdisplacement;
	this.RIGHT_LIMIT = x + Xdisplacement;
	this.TOP_LIMIT = 0;
	this.BOTTOM_LIMIT = 600;
	this.__speedX = speedX;
	this.__speedY = speedY;
	this.__x = x;
	this.__y = y;
	this.__radius = radius;

	this.draw = function(context){
	context.lineWidth = 5;
	context.arc(
	this.__x,
	this.__y,
	this.__radius,
	0,
	2*Math.PI,
	false
	);
	this.__updateColor(context);
	};

	this.update = function(){

	this.__x += this.__speedX;
	this.__y += this.__speedY;
	this.__speedX = Math.cos(this.__y/30);
	};

	this.__updateColor = function(context){
	context.strokeStyle =
	'rgb(' +
	Math.floor(255*this.__x/800) +
	',' +
	Math.floor(255*this.__y/600) +
	',' +
	50 +
	');';
	};
	};

	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	context.lineWidth = 15;
	context.strokeStyle = "#ff0000"
	context.lineCap = 'round'
	var LINE_WIDTH = 0;
	var MIN_X = 0;
	var MIN_Y = 0;
	var MAX_X = 800;
	var MAX_Y = 600;
	var ORIGIN_X = 150;
	var ORIGIN_Y = 150;
	var DESTINATION_X = ORIGIN_X;
	var DESTINATION_Y = ORIGIN_Y;
	var SPEED_X = 2;
	var SPEED_Y = 2;

	var balls = [];
	/*for (i = 0; i < 50; i++){
	var ball = new Ball(50*i, 20,5,1,1,50);
	balls.push(ball);
	};*/

	var onMouseMove = function (ev) {
	var mouseX = toCanvasX(canvas, ev);
	var mouseY = toCanvasY(canvas, ev);
	balls.push(new Ball(mouseX, mouseY,5,1,0.5,50));
	};

	canvas.addEventListener('mousedown', onMouseMove, false);
	//var ball = new Ball(50,50,5,1,1,50);



	var mainloop = function() {
	context.clearRect ( MIN_X , MIN_Y , MAX_X , MAX_Y );
	for (var index in balls){
	context.beginPath()
	balls[index].update();
	balls[index].draw(context);
	context.stroke();
	}
	};

	var animFrame =
	window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	null ;

	var recursiveAnim = function() {
	mainloop();
	animFrame(recursiveAnim);
	}

	animFrame(recursiveAnim);

	};

	</script>
	</head>
	<body>
	<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted;">
	</canvas>
	</body>
	</html>