GZShi · December 26, 2015 00:58
diff --git a/RotationMatrix.html b/RotationMatrix.html
 <html>
 <head>
  <title>test rotation</title>
  <meta charset='utf-8'>
 	<script>
 		var PI_2 = Math.PI * 2;
 		var alpha = Math.PI / 180;
 		var cx = 400;
 		var cy = 300;
 		var ctrlRotation = 1;
 		var ctrlRevolution = 1;
 
 		function intRand (min, max) {
 			return Math.floor(Math.random()*(max - min) + min);
 		}
 
 		var Block = function (x, y, n) {
 			this.x = x;
 			this.y = y;
 			this.n = n <= 0 ? 20 : n;
 
 			this.points = [];
 
 			for(var i = 0; i < this.n; ++i) {
 				var p = {
 					deg: Math.random()*2+1,
 					x: intRand(-200, 200), 
 					y: intRand(-200, 200), 
 					c: 'rgba(' + [intRand(50,200), intRand(100,200), intRand(150,250), 0.7].join(',')  + ')'
 				};
 				this.points.push(p);
 			}
 		};
 
 		Block.prototype = {
 			rotation: function () {
 
 				for(var i = 0; i < this.points.length; ++i) {
 					var rad = this.points[i].deg * alpha * ctrlRotation;
 					var sin_rad = Math.sin(rad);
 					var cos_rad = Math.cos(rad);
 					var rotMatrix = new Matrix([[cos_rad, -sin_rad], [sin_rad, cos_rad]]);
 
 					var tMatrix = new Matrix([[this.points[i].x, this.points[i].y]]);
 					tMatrix = tMatrix.mul(rotMatrix);
 					this.points[i].x = tMatrix.data[0][0];
 					this.points[i].y = tMatrix.data[0][1];
 				}
 			},
 
 			revolution: function (deg) {
 				var rad = deg * alpha * ctrlRevolution;
 				var sin_rad = Math.sin(rad);
 				var cos_rad = Math.cos(rad);
 				var rotMatrix = new Matrix([[cos_rad, -sin_rad], [sin_rad, cos_rad]]);
 
 				var tMatrix = new Matrix([[this.x, this.y]]);
 				tMatrix = tMatrix.mul(rotMatrix);
 				this.x = tMatrix.data[0][0];
 				this.y = tMatrix.data[0][1];
 			},
 
 			draw: function (ctx) {
 				for(var i = 0, len = this.points.length; i < len; ++i) {
 					ctx.fillStyle = this.points[i].c;
 					ctx.beginPath();
 					ctx.arc(cx + this.points[i].x + this.x, cy + this.points[i].y + this.y, 5, 0, PI_2, true);
 					ctx.closePath();
 					ctx.fill();
 				}
 			}
 		};
 
 
 		var Matrix = function (param1, param2) {
 			if(typeof param1 === 'object') {
 				this.y = param1.length;
 				var min = 0xfffff;
 				for(var i = 0; i < this.y; ++i) {
 					if(param1[i].length < min) {
 						min = param1[i].length;
 					}
 				}
 				this.x = min;
 				this.data = Array(this.y);
 				for(var i = 0; i < this.y; ++i) {
 					this.data[i] = Array(this.x);
 					for(var j = 0; j < this.x; ++j) {
 						this.data[i][j] = param1[i][j];
 					}
 				}
 			} else {
 				this.data = Array(param2);
 				for(var i = 0; i < param2; ++i) {
 					this.data[i] = Array(param1);
 				}
 				this.x = param1;
 				this.y = param2;
 			}
 		};
 
 		Matrix.prototype = {
 			add: function (other) {
 				if(this.x != other.x || this.y != other.y) {
 					return null;
 				} else if(this.x == 0) {
 					return newMatrix(0,0);
 				} else {
 					var newMatrix = new Matrix(this.x, this.y);
 					for(var i = 0; i < this.y; i++) {
 						for(var j =0; j < this.x; ++j) {
 							newMatrix.data[i][j] = this.data[i][j] + other.data[i][j];
 						}
 					}
 					return newMatrix;
 				}
 			},

 			sub: function (other) {
 				if(this.x != other.x || this.y != other.y) {
 					return null;
 				} else if(this.x == 0) {
 					return newMatrix(0,0);
 				} else {
 					var newMatrix = new Matrix(this.x, this.y);
 					for(var i = 0; i < this.y; i++) {
 						for(var j =0; j < this.x; ++j) {
 							newMatrix.data[i][j] = this.data[i][j] - other.data[i][j];
 						}
 					}
 					return newMatrix;
 				}
 			},

 			mul: function (other) {
 				if(this.x != other.y) {
 					return null
 				} else {
 					var newMatrix = new Matrix(other.x, this.y);
 					for(var i = 0; i < this.y; ++i) {
 						for(var j = 0; j < other.x; ++j) {
 							var sum = 0;
 							for(var k = 0; k < this.x; k++) {
 								sum += this.data[i][k]*other.data[k][j];
 							}
 							newMatrix.data[i][j] = sum;
 						}
 					}
 					return newMatrix;
 				}
 			},

 			set: function(x, y, value) {
 				x = parseInt(x);
 				y = parseInt(y);
 				if(x > this.x || y > this.y || x < 0 || y < 0) {
 					return false;
 				} else {
 					this.data[y][x] = value;
 					return true
 				}
 			}
 		};


 		function changeRotation() {
 			ctrlRotation *= -1;
 		}

 		function changeRevolution() {
 			ctrlRevolution *= -1;
 		}
 
 
 		function main() {
 			var block = new Block(100, 100, 460);
 			var canvas = document.getElementById('c');
 			var ctx = canvas.getContext('2d');
 
 			block.draw(ctx);
 
 			setInterval(function(){
 				block.rotation();
 				block.revolution(2);
 				ctx.fillStyle = 'rgba(255,255,255,0.5)';
 				ctx.fillRect(0, 0, 800, 600);
 				block.draw(ctx);
 			}, 20);
 		}
 	</script>
 </head>
 <body onload='main();'>
 	<canvas id='c' width='800px' height='600px' style='margin: 0 auto; border: 1px solid blue'></canvas>
 	<div id='control'>
 		<button onclick='changeRotation();'>改变小球方向</button><br>
 		<button onclick='changeRevolution();'>改变公转方向</button><br>
 	</div>
 </body>
 </html>
	<html>
	<head>
	<title>test rotation</title>
	<meta charset='utf-8'>
	<script>
	var PI_2 = Math.PI * 2;
	var alpha = Math.PI / 180;
	var cx = 400;
	var cy = 300;
	var ctrlRotation = 1;
	var ctrlRevolution = 1;

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

	var Block = function (x, y, n) {
	this.x = x;
	this.y = y;
	this.n = n <= 0 ? 20 : n;

	this.points = [];

	for(var i = 0; i < this.n; ++i) {
	var p = {
	deg: Math.random()*2+1,
	x: intRand(-200, 200),
	y: intRand(-200, 200),
	c: 'rgba(' + [intRand(50,200), intRand(100,200), intRand(150,250), 0.7].join(',') + ')'
	};
	this.points.push(p);
	}
	};

	Block.prototype = {
	rotation: function () {

	for(var i = 0; i < this.points.length; ++i) {
	var rad = this.points[i].deg * alpha * ctrlRotation;
	var sin_rad = Math.sin(rad);
	var cos_rad = Math.cos(rad);
	var rotMatrix = new Matrix([[cos_rad, -sin_rad], [sin_rad, cos_rad]]);

	var tMatrix = new Matrix([[this.points[i].x, this.points[i].y]]);
	tMatrix = tMatrix.mul(rotMatrix);
	this.points[i].x = tMatrix.data[0][0];
	this.points[i].y = tMatrix.data[0][1];
	}
	},

	revolution: function (deg) {
	var rad = deg * alpha * ctrlRevolution;
	var sin_rad = Math.sin(rad);
	var cos_rad = Math.cos(rad);
	var rotMatrix = new Matrix([[cos_rad, -sin_rad], [sin_rad, cos_rad]]);

	var tMatrix = new Matrix([[this.x, this.y]]);
	tMatrix = tMatrix.mul(rotMatrix);
	this.x = tMatrix.data[0][0];
	this.y = tMatrix.data[0][1];
	},

	draw: function (ctx) {
	for(var i = 0, len = this.points.length; i < len; ++i) {
	ctx.fillStyle = this.points[i].c;
	ctx.beginPath();
	ctx.arc(cx + this.points[i].x + this.x, cy + this.points[i].y + this.y, 5, 0, PI_2, true);
	ctx.closePath();
	ctx.fill();
	}
	}
	};


	var Matrix = function (param1, param2) {
	if(typeof param1 === 'object') {
	this.y = param1.length;
	var min = 0xfffff;
	for(var i = 0; i < this.y; ++i) {
	if(param1[i].length < min) {
	min = param1[i].length;
	}
	}
	this.x = min;
	this.data = Array(this.y);
	for(var i = 0; i < this.y; ++i) {
	this.data[i] = Array(this.x);
	for(var j = 0; j < this.x; ++j) {
	this.data[i][j] = param1[i][j];
	}
	}
	} else {
	this.data = Array(param2);
	for(var i = 0; i < param2; ++i) {
	this.data[i] = Array(param1);
	}
	this.x = param1;
	this.y = param2;
	}
	};

	Matrix.prototype = {
	add: function (other) {
	if(this.x != other.x \|\| this.y != other.y) {
	return null;
	} else if(this.x == 0) {
	return newMatrix(0,0);
	} else {
	var newMatrix = new Matrix(this.x, this.y);
	for(var i = 0; i < this.y; i++) {
	for(var j =0; j < this.x; ++j) {
	newMatrix.data[i][j] = this.data[i][j] + other.data[i][j];
	}
	}
	return newMatrix;
	}
	},

	sub: function (other) {
	if(this.x != other.x \|\| this.y != other.y) {
	return null;
	} else if(this.x == 0) {
	return newMatrix(0,0);
	} else {
	var newMatrix = new Matrix(this.x, this.y);
	for(var i = 0; i < this.y; i++) {
	for(var j =0; j < this.x; ++j) {
	newMatrix.data[i][j] = this.data[i][j] - other.data[i][j];
	}
	}
	return newMatrix;
	}
	},

	mul: function (other) {
	if(this.x != other.y) {
	return null
	} else {
	var newMatrix = new Matrix(other.x, this.y);
	for(var i = 0; i < this.y; ++i) {
	for(var j = 0; j < other.x; ++j) {
	var sum = 0;
	for(var k = 0; k < this.x; k++) {
	sum += this.data[i][k]*other.data[k][j];
	}
	newMatrix.data[i][j] = sum;
	}
	}
	return newMatrix;
	}
	},

	set: function(x, y, value) {
	x = parseInt(x);
	y = parseInt(y);
	if(x > this.x \|\| y > this.y \|\| x < 0 \|\| y < 0) {
	return false;
	} else {
	this.data[y][x] = value;
	return true
	}
	}
	};


	function changeRotation() {
	ctrlRotation *= -1;
	}

	function changeRevolution() {
	ctrlRevolution *= -1;
	}


	function main() {
	var block = new Block(100, 100, 460);
	var canvas = document.getElementById('c');
	var ctx = canvas.getContext('2d');

	block.draw(ctx);

	setInterval(function(){
	block.rotation();
	block.revolution(2);
	ctx.fillStyle = 'rgba(255,255,255,0.5)';
	ctx.fillRect(0, 0, 800, 600);
	block.draw(ctx);
	}, 20);
	}
	</script>
	</head>
	<body onload='main();'>
	<canvas id='c' width='800px' height='600px' style='margin: 0 auto; border: 1px solid blue'></canvas>
	<div id='control'>
	<button onclick='changeRotation();'>改变小球方向</button><br>
	<button onclick='changeRevolution();'>改变公转方向</button><br>
	</div>
	</body>
	</html>