Create a gist now

Instantly share code, notes, and snippets.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment