hisasann/RunAwayFromMouseCanvas.js

## RunAwayFromMouseCanvas.js
<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>RunAwayFromMouse.js</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
</head>
<script src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {
		var targetElem = "canvas";
		var count = jQuery.browser.safari ? 100 : 50;	// webkitならちょっと多め
		var opacity = 0.7;
		// div要素の作成
		// for(var i=0; i<count; ++i) {
		// 	console.log(getColor());
		// 	$("<div>")
		// 		.appendTo("#mover")
		// 		.addClass("move")
		// 		.css({
		// 			left: Math.random() * $(window).width() - 100 + "px",
		// 			top: Math.random() * $(window).height() - 100 + "px",
		// 			opacity: opacity,
		// 			backgroundColor: "#" + getColor()
		// 		});
		// }
		// canvas要素の作成
		for(var i=0; i<count; ++i) {
			var canvas = $("<canvas>");
			canvas
				.attr("height", 100)
				.attr("width", 100)
				.css({
					position: "absolute",
					opacity: opacity,
					left: Math.random() * $(window).width() - 100 + "px",
					top: Math.random() * $(window).height() - 100 + "px"
				})
		    	.appendTo("#mover");

			var context = canvas[0].getContext('2d');
			context.beginPath();
			// ちょっとグリーンぽく
			context.fillStyle = ["rgb(", 0, ",", getRGB(), ",", getRGB(), ")"].join("");
			context.arc( 50, 50, 50, 0, Math.PI * 2, false);
			context.fill();
		}

		function getColor() {
			return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
		}
		function getRGB() {
			return Math.floor(Math.random() * 200);
		}

		var firstPointX = [],
			firstPointY = [];

		// offsetの保存
		$("#mover").find(targetElem).each(function(index) {
			var offset = $(this).offset();
			firstPointX[index] = offset.left;
			firstPointY[index] = offset.top;
		});

		$("html")
			.mousemove(function(e) {
				$("#mover").find(targetElem).each(function(index) {
					var elem = $(this),
						offset = elem.offset(),
						theta = Math.atan2(offset.top - e.pageY, offset.left - e.pageX),
						d = 1000 / Math.sqrt(Math.pow(e.pageX - offset.left, 2) + Math.pow(e.pageY - offset.top, 2)),
						left = parseFloat(elem.css("left")) + d * Math.cos(theta) + (firstPointX[index] - offset.left) * 0.1 + "px",
						top = parseFloat(elem.css("top")) + d * Math.cos(theta) + (firstPointY[index] - offset.top) * 0.1 + "px";

					elem.css("left", left);
					elem.css("top", top);
				});
			})
	});
</script>
<style type="text/css" media="screen">
	html {
		overflow: hidden;
	}
	.move {
		width: 100px;
		height: 100px;
		border: 1px solid #999;
		position: absolute;
	}
</style>
<body>

<div id="mover">
</div>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>RunAwayFromMouse.js</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	</head>
	<script src="jquery.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function() {
	var targetElem = "canvas";
	var count = jQuery.browser.safari ? 100 : 50; // webkitならちょっと多め
	var opacity = 0.7;
	// div要素の作成
	// for(var i=0; i<count; ++i) {
	// console.log(getColor());
	// $("<div>")
	// .appendTo("#mover")
	// .addClass("move")
	// .css({
	// left: Math.random() * $(window).width() - 100 + "px",
	// top: Math.random() * $(window).height() - 100 + "px",
	// opacity: opacity,
	// backgroundColor: "#" + getColor()
	// });
	// }
	// canvas要素の作成
	for(var i=0; i<count; ++i) {
	var canvas = $("<canvas>");
	canvas
	.attr("height", 100)
	.attr("width", 100)
	.css({
	position: "absolute",
	opacity: opacity,
	left: Math.random() * $(window).width() - 100 + "px",
	top: Math.random() * $(window).height() - 100 + "px"
	})
	.appendTo("#mover");

	var context = canvas[0].getContext('2d');
	context.beginPath();
	// ちょっとグリーンぽく
	context.fillStyle = ["rgb(", 0, ",", getRGB(), ",", getRGB(), ")"].join("");
	context.arc( 50, 50, 50, 0, Math.PI * 2, false);
	context.fill();
	}

	function getColor() {
	return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
	}
	function getRGB() {
	return Math.floor(Math.random() * 200);
	}

	var firstPointX = [],
	firstPointY = [];

	// offsetの保存
	$("#mover").find(targetElem).each(function(index) {
	var offset = $(this).offset();
	firstPointX[index] = offset.left;
	firstPointY[index] = offset.top;
	});

	$("html")
	.mousemove(function(e) {
	$("#mover").find(targetElem).each(function(index) {
	var elem = $(this),
	offset = elem.offset(),
	theta = Math.atan2(offset.top - e.pageY, offset.left - e.pageX),
	d = 1000 / Math.sqrt(Math.pow(e.pageX - offset.left, 2) + Math.pow(e.pageY - offset.top, 2)),
	left = parseFloat(elem.css("left")) + d * Math.cos(theta) + (firstPointX[index] - offset.left) * 0.1 + "px",
	top = parseFloat(elem.css("top")) + d * Math.cos(theta) + (firstPointY[index] - offset.top) * 0.1 + "px";

	elem.css("left", left);
	elem.css("top", top);
	});
	})
	});
	</script>
	<style type="text/css" media="screen">
	html {
	overflow: hidden;
	}
	.move {
	width: 100px;
	height: 100px;
	border: 1px solid #999;
	position: absolute;
	}
	</style>
	<body>

	<div id="mover">
	</div>

	</body>
	</html>