buunguyen · May 5, 2012 04:40
diff --git a/circles.html b/circles.html
 <!doctype html>
 <html lang="en">
 	<head>
 		<title>Circles</title>
 		<meta charset="utf-8" />
 		<script>
 			var Point = function(x, y) {
 				this.x = x;
 				this.y = y;
 			}
 		
 			var Circle = function(pos, dir, color, radius) {
 				this.pos = pos;
 				this.dir = dir;
 				this.color = color;
 				this.radius = radius;
 			};
 			
 			Circle.prototype.move = function(speed, w, h) {
 				this.pos.x += this.dir.x * speed;
 				if (this.pos.x < 0) {
 					this.pos.x = 0;
 					this.dir.x = -this.dir.x;
 				} else if ((this.pos.x + this.radius*2) > w) {
 					this.pos.x = w - this.radius*2;
 					this.dir.x = -this.dir.x;
 				}
 				
 				this.pos.y += this.dir.y * speed;
 				if (this.pos.y < 0) {
 					this.pos.y = 0;
 					this.dir.y = -this.dir.y;
 				} else if ((this.pos.y + this.radius*2) > h) {
 					this.pos.y = h - this.radius*2;
 					this.dir.y = -this.dir.y;
 				}
 			};
 			
 			Circle.prototype.draw = function(context) {
 				context.beginPath();
 				context.arc(this.pos.x + this.radius, 
 							this.pos.y + this.radius, 
 							this.radius, 
 							0, 
 							Utils.degreesToRadians(360), true);
 				context.fillStyle = this.color;
 				context.fill();
 			};
 			
 			var Frame = function(canvasId, numberOfCircles) {
 				this.canvas = document.getElementById(canvasId);
 				this.speed = 1;
 				this.numberOfCircles = numberOfCircles || 5;
 				this.circles = [];
 			};
 			
 			Frame.prototype.start = function() {
 				for (var i = 0; i < this.numberOfCircles; i++) {
 					this.addBall();
 				}
 				var self = this;
 				setInterval(function() { self.update(); }, 25);
 			};
 			
 			Frame.prototype.speedUp = function() {
 				this.speed++;
 			};
 			
 			Frame.prototype.addBall = function() {
 				var circle = new Circle(Utils.randPos(this.canvas.width, this.canvas.height), 
 										Utils.randDir(), 
 										Utils.randColor(),
 										Utils.randRadius());
 				this.circles.push(circle);
 			};
 			
 			Frame.prototype.update = function() {
 				var canvas = this.canvas;
 				var context = canvas.getContext("2d");
 				
 				context.clearRect(0, 0, canvas.width, canvas.height);
 				context.strokeStyle = '#000000';
 				context.strokeRect(0, 0, canvas.width, canvas.height);
 				
 				for (var i = 0; this.circles[i]; i++) {
 					var circle = this.circles[i];
 					circle.move(this.speed, canvas.width, canvas.height);
 					circle.draw(context);
 				}
 			};
 			
 			var Utils = {
 				degreesToRadians: function(degrees) {
 					return (degrees * Math.PI) / 180;
 				},

 				randDir: function() {
 					return new Point((Math.random() > 0.5 ? 1 : -1) * Math.random(), 
 									 (Math.random() > 0.5 ? 1 : -1) * Math.random());
 				},
 				
 				randPos: function(w, h) {
 					return new Point(Utils.rand(w), Utils.rand(h));
 				},

 				randColor: function() {
 					var letters = '0123456789ABCDEF'.split('');
 				    var color = '#';
 				    for (var i = 0; i < 6; i++ ) {
 				        color += letters[Utils.rand(15)];
 				    }
 				    return color;
 				},
 				
 				randRadius: function() {
 					return Utils.rand(5) + 5;
 				},

 				rand: function(max) {
 					return Math.round(Math.random() * max);
 				}	
 			};
 			
 			Array.prototype.each = function(f) {
 				for (var i = 0; this[i]; i++) f(this[i]);
 			};
 			
 			window.onload = function() {
 				var frames = [new Frame("canvas1"), new Frame("canvas2"), new Frame("canvas3"), new Frame("canvas4")];
 				frames.each(function(f) { f.start(); });
 							
 				document.getElementById("btnAddSpeed").onclick = function() {
 					frames.each(function(f) { f.speedUp(); });
 				};

 				document.getElementById("btnAddBall").onclick = function() {
 					frames.each(function(f) { f.addBall(); });
 				};	
 			};
 		</script>
 	</head>
 	<body>
 		<canvas id="canvas1"></canvas>
 		<canvas id="canvas2"></canvas>
 		<br/>
 		<canvas id="canvas3"></canvas>
 		<canvas id="canvas4"></canvas>
 		<br/>
 		<input type="button" id="btnAddSpeed" value="Add Speed">
 		<input type="button" id="btnAddBall" value="Add Balls">
 	</body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Circles</title>
	<meta charset="utf-8" />
	<script>
	var Point = function(x, y) {
	this.x = x;
	this.y = y;
	}

	var Circle = function(pos, dir, color, radius) {
	this.pos = pos;
	this.dir = dir;
	this.color = color;
	this.radius = radius;
	};

	Circle.prototype.move = function(speed, w, h) {
	this.pos.x += this.dir.x * speed;
	if (this.pos.x < 0) {
	this.pos.x = 0;
	this.dir.x = -this.dir.x;
	} else if ((this.pos.x + this.radius*2) > w) {
	this.pos.x = w - this.radius*2;
	this.dir.x = -this.dir.x;
	}

	this.pos.y += this.dir.y * speed;
	if (this.pos.y < 0) {
	this.pos.y = 0;
	this.dir.y = -this.dir.y;
	} else if ((this.pos.y + this.radius*2) > h) {
	this.pos.y = h - this.radius*2;
	this.dir.y = -this.dir.y;
	}
	};

	Circle.prototype.draw = function(context) {
	context.beginPath();
	context.arc(this.pos.x + this.radius,
	this.pos.y + this.radius,
	this.radius,
	0,
	Utils.degreesToRadians(360), true);
	context.fillStyle = this.color;
	context.fill();
	};

	var Frame = function(canvasId, numberOfCircles) {
	this.canvas = document.getElementById(canvasId);
	this.speed = 1;
	this.numberOfCircles = numberOfCircles \|\| 5;
	this.circles = [];
	};

	Frame.prototype.start = function() {
	for (var i = 0; i < this.numberOfCircles; i++) {
	this.addBall();
	}
	var self = this;
	setInterval(function() { self.update(); }, 25);
	};

	Frame.prototype.speedUp = function() {
	this.speed++;
	};

	Frame.prototype.addBall = function() {
	var circle = new Circle(Utils.randPos(this.canvas.width, this.canvas.height),
	Utils.randDir(),
	Utils.randColor(),
	Utils.randRadius());
	this.circles.push(circle);
	};

	Frame.prototype.update = function() {
	var canvas = this.canvas;
	var context = canvas.getContext("2d");

	context.clearRect(0, 0, canvas.width, canvas.height);
	context.strokeStyle = '#000000';
	context.strokeRect(0, 0, canvas.width, canvas.height);

	for (var i = 0; this.circles[i]; i++) {
	var circle = this.circles[i];
	circle.move(this.speed, canvas.width, canvas.height);
	circle.draw(context);
	}
	};

	var Utils = {
	degreesToRadians: function(degrees) {
	return (degrees * Math.PI) / 180;
	},

	randDir: function() {
	return new Point((Math.random() > 0.5 ? 1 : -1) * Math.random(),
	(Math.random() > 0.5 ? 1 : -1) * Math.random());
	},

	randPos: function(w, h) {
	return new Point(Utils.rand(w), Utils.rand(h));
	},

	randColor: function() {
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++ ) {
	color += letters[Utils.rand(15)];
	}
	return color;
	},

	randRadius: function() {
	return Utils.rand(5) + 5;
	},

	rand: function(max) {
	return Math.round(Math.random() * max);
	}
	};

	Array.prototype.each = function(f) {
	for (var i = 0; this[i]; i++) f(this[i]);
	};

	window.onload = function() {
	var frames = [new Frame("canvas1"), new Frame("canvas2"), new Frame("canvas3"), new Frame("canvas4")];
	frames.each(function(f) { f.start(); });

	document.getElementById("btnAddSpeed").onclick = function() {
	frames.each(function(f) { f.speedUp(); });
	};

	document.getElementById("btnAddBall").onclick = function() {
	frames.each(function(f) { f.addBall(); });
	};
	};
	</script>
	</head>
	<body>
	<canvas id="canvas1"></canvas>
	<canvas id="canvas2"></canvas>
	<br/>
	<canvas id="canvas3"></canvas>
	<canvas id="canvas4"></canvas>
	<br/>
	<input type="button" id="btnAddSpeed" value="Add Speed">
	<input type="button" id="btnAddBall" value="Add Balls">
	</body>
	</html>