episode 17 files

stefancaspersz · Mar 12, 2014 · 20159d4 · 20159d4
1 parent 38d3b1d
commit 20159d4
Show file tree

Hide file tree

Showing 6 changed files with 330 additions and 0 deletions.
diff --git a/episode17/index.html b/episode17/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="vector.js"></script>
+	<script type="text/javascript" src="particle.js"></script>
+	<script type="text/javascript" src="utils.js"></script>
+	<script type="text/javascript" src="spring1.js"></script>
+	<style type="text/css">
+	html, body {
+		margin: 0px;
+	}
+
+	canvas {
+		display: block;
+	}
+
+	</style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+</body>
+</html>
diff --git a/episode17/orbit.js b/episode17/orbit.js
@@ -0,0 +1,34 @@
+window.onload = function() {
+	var canvas = document.getElementById("canvas"),
+		context = canvas.getContext("2d"),
+		width = canvas.width = window.innerWidth,
+		height = canvas.height = window.innerHeight,
+		sun = particle.create(width / 2, height / 2, 0, 0);
+		planet = particle.create(width / 2 + 200, height / 2, 10, -Math.PI / 2);
+
+	sun.mass = 20000;
+
+	update();
+
+
+	function update() {
+		context.clearRect(0, 0, width, height);
+
+		// animation goes here
+
+		planet.gravitateTo(sun);
+		planet.update();
+
+		context.beginPath();
+		context.fillStyle = "#ffff00";
+		context.arc(sun.x, sun.y, 20, 0, Math.PI * 2, false);
+		context.fill();
+
+		context.beginPath();
+		context.fillStyle = "#0000ff";
+		context.arc(planet.x, planet.y, 4, 0, Math.PI * 2, false);
+		context.fill();
+
+		requestAnimationFrame(update);
+	}
+};
diff --git a/episode17/particle.js b/episode17/particle.js
@@ -0,0 +1,58 @@
+var particle = {
+	x: 0,
+	y: 0,
+	vx: 0,
+	vy: 0,
+	mass: 1,
+	radius: 0,
+	bounce: -1,
+	friction: 1,
+	gravity: 0,
+
+	create: function(x, y, speed, direction, grav) {
+		var obj = Object.create(this);
+		obj.x = x;
+		obj.y = y;
+		obj.vx = Math.cos(direction) * speed;
+		obj.vy = Math.sin(direction) * speed;
+		obj.gravity = grav || 0;
+		return obj;
+	},
+
+	accelerate: function(ax, ay) {
+		this.vx += ax;
+		this.vy += ay;
+	},
+
+	update: function() {
+		this.vx *= this.friction;
+		this.vy *= this.friction;
+		this.vy += this.gravity;
+		this.x += this.vx;
+		this.y += this.vy;
+	},
+
+	angleTo: function(p2) {
+		return Math.atan2(p2.y - this.y, p2.x - this.x);
+	},
+
+	distanceTo: function(p2) {
+		var dx = p2.x - this.x,
+			dy = p2.y - this.y;
+
+		return Math.sqrt(dx * dx + dy * dy);
+	},
+
+	gravitateTo: function(p2) {
+		var dx = p2.x - this.x,
+			dy = p2.y - this.y,
+			distSQ = dx * dx + dy * dy,
+			dist = Math.sqrt(distSQ),
+			force = p2.mass / distSQ,
+			ax = dx / dist * force,
+			ay = dy / dist * force;
+
+		this.vx += ax;
+		this.vy += ay;
+	}
+};
diff --git a/episode17/spring1.js b/episode17/spring1.js
@@ -0,0 +1,59 @@
+window.onload = function() {
+	var canvas = document.getElementById("canvas"),
+		context = canvas.getContext("2d"),
+		width = canvas.width = window.innerWidth,
+		height = canvas.height = window.innerHeight,
+		springPoint = {
+			x: width / 2, 
+			y: height / 2
+		},
+		weight = particle.create(Math.random() * width, Math.random() * height, 
+								50, Math.random() * Math.PI * 2, 0.5),
+		k = 0.1,
+		springLength = 100;
+
+	weight.radius = 20;
+	weight.friction = 0.95;
+
+	document.body.addEventListener("mousemove", function(event) {
+		springPoint.x = event.clientX ;
+		springPoint.y = event.clientY;
+	});
+
+
+	update();
+
+	function update() {
+		context.clearRect(0, 0, width, height);
+
+		var dx = springPoint.x - weight.x,
+			dy = springPoint.y - weight.y,
+			distance = Math.sqrt(dx * dx + dy * dy),
+			springForce = (distance - springLength) * k,
+			ax = dx / distance * springForce,
+			ay = dy / distance * springForce;
+
+		weight.vx += ax;
+		weight.vy += ay;
+
+		weight.update();
+
+		context.beginPath();
+		context.arc(weight.x, weight.y, weight.radius,
+					0, Math.PI * 2, false);
+		context.fill();
+
+		context.beginPath();
+		context.arc(springPoint.x, springPoint.y, 4,
+					0, Math.PI * 2, false);
+		context.fill();
+
+		context.beginPath();
+		context.moveTo(weight.x, weight.y);
+		context.lineTo(springPoint.x, springPoint.y);
+		context.stroke();
+
+		requestAnimationFrame(update);
+	}
+
+};
diff --git a/episode17/utils.js b/episode17/utils.js
@@ -0,0 +1,73 @@
+var utils = {
+	norm: function(value, min, max) {
+		return (value - min) / (max - min);
+	},
+
+	lerp: function(norm, min, max) {
+		return (max - min) * norm + min;
+	},
+
+	map: function(value, sourceMin, sourceMax, destMin, destMax) {
+		return utils.lerp(utils.norm(value, sourceMin, sourceMax), destMin, destMax);
+	},
+
+	clamp: function(value, min, max) {
+		return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+	},
+
+	distance: function(p0, p1) {
+		var dx = p1.x - p0.x,
+			dy = p1.y - p0.y;
+		return Math.sqrt(dx * dx + dy * dy);
+	},
+
+	distanceXY: function(x0, y0, x1, y1) {
+		var dx = x1 - x0,
+			dy = y1 - y0;
+		return Math.sqrt(dx * dx + dy * dy);
+	},
+
+	circleCollision: function(c0, c1) {
+		return utils.distance(c0, c1) <= c0.radius + c1.radius;
+	},
+
+	circlePointCollision: function(x, y, circle) {
+		return utils.distanceXY(x, y, circle.x, circle.y) < circle.radius;
+	},
+
+	pointInRect: function(x, y, rect) {
+		return utils.inRange(x, rect.x, rect.x + rect.width) &&
+		       utils.inRange(y, rect.y, rect.y + rect.height);
+	},
+
+	inRange: function(value, min, max) {
+		return value >= Math.min(min, max) && value <= Math.max(min, max);
+	},
+
+	rangeIntersect: function(min0, max0, min1, max1) {
+		return Math.max(min0, max0) >= Math.min(min1, max1) && 
+			   Math.min(min0, max0) <= Math.max(min1, max1);
+	},
+
+	rectIntersect: function(r0, r1) {
+		return utils.rangeIntersect(r0.x, r0.x + r0.width, r1.x, r1.x + r1.width) &&
+			   utils.rangeIntersect(r0.y, r0.y + r0.height, r1.y, r1.y + r1.height);
+	},
+
+	degreesToRads: function(degrees) {
+		return degrees / 180 * Math.PI;
+	},
+
+	radsToDegrees: function(radians) {
+		return radians * 180 / Math.PI;
+	},
+
+	randomRange: function(min, max) {
+		return min + Math.random() * (max - min);
+	},
+
+	randomInt: function(min, max) {
+		return Math.floor(min + Math.random() * (max - min + 1));
+	}
+
+}
diff --git a/episode17/vector.js b/episode17/vector.js
@@ -0,0 +1,83 @@
+var vector = {
+	_x: 1,
+	_y: 0,
+
+	create: function(x, y) {
+		var obj = Object.create(this);
+		obj.setX(x);
+		obj.setY(y);
+		return obj;
+	},
+
+	setX: function(value) {
+		this._x = value;
+	},
+
+	getX: function() {
+		return this._x;
+	},
+
+	setY: function(value) {
+		this._y = value;
+	},
+
+	getY: function() {
+		return this._y;
+	},
+
+	setAngle: function(angle) {
+		var length = this.getLength();
+		this._x = Math.cos(angle) * length;
+		this._y = Math.sin(angle) * length;
+	},
+
+	getAngle: function() {
+		return Math.atan2(this._y, this._x);
+	},
+
+	setLength: function(length) {
+		var angle = this.getAngle();
+		this._x = Math.cos(angle) * length;
+		this._y = Math.sin(angle) * length;
+	},
+
+	getLength: function() {
+		return Math.sqrt(this._x * this._x + this._y * this._y);
+	},
+
+	add: function(v2) {
+		return vector.create(this._x + v2.getX(), this._y + v2.getY());
+	},
+
+	subtract: function(v2) {
+		return vector.create(this._x - v2.getX(), this._y - v2.getY());
+	},
+
+	multiply: function(val) {
+		return vector.create(this._x * val, this._y * val);
+	},
+
+	divide: function(val) {
+		return vector.create(this._x / val, this._y / val);
+	},
+
+	addTo: function(v2) {
+		this._x += v2.getX();
+		this._y += v2.getY();
+	},
+
+	subtractFrom: function(v2) {
+		this._x -= v2.getX();
+		this._y -= v2.getY();
+	},
+
+	multiplyBy: function(val) {
+		this._x *= val;
+		this._y *= val;
+	},
+
+	divideBy: function(val) {
+		this._x /= val;
+		this._y /= val;
+	}
+};