lemilonkh/index.html

## index.html
<!DOCTYPE html>
<!-- http://twitter.com/lemilonkh -->
<html>
<head>
	<title>Clouds</title>
	<meta type="content-encoding" content="UTF-8" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.clouds.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			canvas = $('#canvas').get(0);
			canvas.height = 600;
			canvas.width = 600;
			$('#canvas').clouds();
		});
	</script>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
</html>

## jquery.clouds.js
// jquery.clouds.js
// (c) 2010 by LeMilonkh
// http://twitter.com/lemilonkh

;(function($) {
	var settings;
	var canvas;
	var c;
	var data = new Array();
	var stopIt = false;

	$.fn.clouds = function(arg) {
		if(arg == 'stop') {
			stop();
			return this;
		}
		settings = $.extend({}, $.fn.clouds.defaults, arg);
		canvas = this.first().get(0);
		init();
		return this;
	};

	$.fn.clouds.defaults = {
		clouds: random(25, 40),
		onlyGrey: true,
		veryDark: false,
		minCloudSize: 30,
		maxCloudSize: 40,
		minCloudSpeed: 1,
		maxCloudSpeed: 4,
		minCpC: 10,
		maxCpC: 18,
		minRadius:5,
		maxRadius: 15,
		fps: 12,
		transparent: false,
		direction: 'left'
	};

	function init() {
		var cloudColor;
		var cloudX;
		var cloudY;
		var cloudHeight;
		var cloudWidth;
		var cloudSpeed;

		if(canvas.getContext)
			c = canvas.getContext('2d');
		else
			return;

		for(var cloud = 1; cloud <= settings.clouds; cloud++) {
			if(settings.onlyGrey && settings.veryDark)
				cloudColor = random(128, 256);
			else
				cloudColor = [random(0, 256), random(0, 256), random(0, 256)];

			cloudSpeed = random(settings.minCloudSpeed, settings.maxCloudSpeed);

			cloudHeight = random(settings.minCloudSize, settings.maxCloudSize);
			cloudWidth = random(settings.minCloudSize, settings.maxCloudSize);
			cloudX = random(0, canvas.width - cloudWidth);
			cloudY = random(0, canvas.height - cloudHeight);

			circleCount = random(settings.MIN_CPC, settings.MAX_CPC);

			for(var circle = 1; circle <= circleCount; circle++) {
				data.push({
					r: random(settings.minRadius, settings.maxRadius),
					x: random(cloudX, cloudX + cloudWidth),
					y: random(cloudY, cloudY + cloudHeight),
					color: cloudColor,
					speed: cloudSpeed
				});
			}
		}

		loop();
	}

	function loop() {
		c.clearRect(0,0,canvas.width,canvas.height);

		$.each(data, function(index, current) {
			//move
			if(settings.direction == 'left') {
				current.x = current.x - current.speed;
				if((current.x + current.r) < 0)
					current.x = canvas.width + current.r;
			}
			else {
				current.x = current.x + current.speed;
				if((current.x - current.r) > canvas.width)
					current.x = 0 - current.r;
			}

			//draw
			if(settings.transparent) {
				if(settings.onlyGrey)
					c.fillStyle = 'rgba(' + current.color + ',' + current.color + ',' + current.color + ', 0.5)';
				else
					c.fillStyle = 'rgba(' + current.color[0] + ',' + current.color[1] + ',' + current.color[2] + ', 0.5)';
			}
			else {
				if(settings.onlyGrey)
					c.fillStyle = 'rgb(' + current.color + ',' + current.color + ',' + current.color + ')';
				else
					c.fillStyle = 'rgb(' + current.color[0] + ',' + current.color[1] + ',' + current.color[2] + ')';
			}

			c.beginPath();
			c.arc(current.x, current.y, current.r, 0, Math.PI * 2, false);
			c.closePath();
			c.fill();
		});

		if(!stopIt)
			setTimeout(loop, 1000 / settings.fps);
	}

	function random(min,max) {
		return Math.round(Math.random() * (max - min - 1) + min);
	}

	function stop() {
		stopIt = true;
	}
})(jQuery);
	<!DOCTYPE html>
	<!-- http://twitter.com/lemilonkh -->
	<html>
	<head>
	<title>Clouds</title>
	<meta type="content-encoding" content="UTF-8" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.clouds.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function() {
	canvas = $('#canvas').get(0);
	canvas.height = 600;
	canvas.width = 600;
	$('#canvas').clouds();
	});
	</script>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>
	// jquery.clouds.js
	// (c) 2010 by LeMilonkh
	// http://twitter.com/lemilonkh

	;(function($) {
	var settings;
	var canvas;
	var c;
	var data = new Array();
	var stopIt = false;

	$.fn.clouds = function(arg) {
	if(arg == 'stop') {
	stop();
	return this;
	}
	settings = $.extend({}, $.fn.clouds.defaults, arg);
	canvas = this.first().get(0);
	init();
	return this;
	};

	$.fn.clouds.defaults = {
	clouds: random(25, 40),
	onlyGrey: true,
	veryDark: false,
	minCloudSize: 30,
	maxCloudSize: 40,
	minCloudSpeed: 1,
	maxCloudSpeed: 4,
	minCpC: 10,
	maxCpC: 18,
	minRadius:5,
	maxRadius: 15,
	fps: 12,
	transparent: false,
	direction: 'left'
	};

	function init() {
	var cloudColor;
	var cloudX;
	var cloudY;
	var cloudHeight;
	var cloudWidth;
	var cloudSpeed;

	if(canvas.getContext)
	c = canvas.getContext('2d');
	else
	return;

	for(var cloud = 1; cloud <= settings.clouds; cloud++) {
	if(settings.onlyGrey && settings.veryDark)
	cloudColor = random(128, 256);
	else
	cloudColor = [random(0, 256), random(0, 256), random(0, 256)];

	cloudSpeed = random(settings.minCloudSpeed, settings.maxCloudSpeed);

	cloudHeight = random(settings.minCloudSize, settings.maxCloudSize);
	cloudWidth = random(settings.minCloudSize, settings.maxCloudSize);
	cloudX = random(0, canvas.width - cloudWidth);
	cloudY = random(0, canvas.height - cloudHeight);

	circleCount = random(settings.MIN_CPC, settings.MAX_CPC);

	for(var circle = 1; circle <= circleCount; circle++) {
	data.push({
	r: random(settings.minRadius, settings.maxRadius),
	x: random(cloudX, cloudX + cloudWidth),
	y: random(cloudY, cloudY + cloudHeight),
	color: cloudColor,
	speed: cloudSpeed
	});
	}
	}

	loop();
	}

	function loop() {
	c.clearRect(0,0,canvas.width,canvas.height);

	$.each(data, function(index, current) {
	//move
	if(settings.direction == 'left') {
	current.x = current.x - current.speed;
	if((current.x + current.r) < 0)
	current.x = canvas.width + current.r;
	}
	else {
	current.x = current.x + current.speed;
	if((current.x - current.r) > canvas.width)
	current.x = 0 - current.r;
	}

	//draw
	if(settings.transparent) {
	if(settings.onlyGrey)
	c.fillStyle = 'rgba(' + current.color + ',' + current.color + ',' + current.color + ', 0.5)';
	else
	c.fillStyle = 'rgba(' + current.color[0] + ',' + current.color[1] + ',' + current.color[2] + ', 0.5)';
	}
	else {
	if(settings.onlyGrey)
	c.fillStyle = 'rgb(' + current.color + ',' + current.color + ',' + current.color + ')';
	else
	c.fillStyle = 'rgb(' + current.color[0] + ',' + current.color[1] + ',' + current.color[2] + ')';
	}

	c.beginPath();
	c.arc(current.x, current.y, current.r, 0, Math.PI * 2, false);
	c.closePath();
	c.fill();
	});

	if(!stopIt)
	setTimeout(loop, 1000 / settings.fps);
	}

	function random(min,max) {
	return Math.round(Math.random() * (max - min - 1) + min);
	}

	function stop() {
	stopIt = true;
	}
	})(jQuery);