episode 27

bit101 · bit101 · commit f38edc30f0e1 · 2014-09-29T07:45:17.000-07:00
diff --git a/episode27/index.html b/episode27/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="main.js"></script>
+	<style type="text/css">
+	html, body {
+		margin: 0px;
+	}
+
+	canvas {
+		display: block;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+	}
+
+	</style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+</body>
+</html>
diff --git a/episode27/main.js b/episode27/main.js
@@ -0,0 +1,46 @@
+window.onload = function() {
+	var canvas = document.getElementById("canvas"),
+		context = canvas.getContext("2d"),
+		width = canvas.width = window.innerWidth,
+		height = canvas.height = window.innerHeight,
+
+		target = {
+			x: width,
+			y: Math.random() * height
+		},
+
+		position = {
+			x: 0,
+			y: Math.random() * height
+		},
+
+		ease = 0.1;
+
+	update();
+
+	document.body.addEventListener("mousemove", function(event) {
+		target.x = event.clientX;
+		target.y = event.clientY;
+	});
+
+	function update() {
+		context.clearRect(0, 0, width, height);
+
+		context.beginPath();
+		context.arc(position.x, position.y, 10, 0, Math.PI * 2, false);
+		context.fill();
+
+
+		var dx = target.x - position.x,
+			dy = target.y - position.y,
+			vx = dx * ease,
+			vy = dy * ease;
+
+		position.x += vx;
+		position.y += vy;
+
+
+		requestAnimationFrame(update);
+	}
+
+};
