Life Forms?

by Admiral Potato

HTML

<canvas id="space" width="800" height="400"></canvas>

CSS

body{
    background-color: #000;
}
#space{
    border: 1px solid #333;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

JavaScript

var canvas =  document.getElementById('space'),
	context = canvas.getContext('2d'),
	width = canvas.width,
	height = canvas.height,
	halfX = width / 2,
	halfY = height / 2,
	posRange = function(){
		return halfX - width * Math.random();
	},
	pi = Math.PI,
	tau = pi * 2,
	deg = tau / 360,
	vAdd = function(a, b, c){
		var destination = c || a;
		destination.x = a.x + b.x;
		destination.y = a.y + b.y;
		return destination;
	},
	vSet = function(angle, radius, out){
		angle = angle || 0;
		radius = radius || 1;
		out = out || {};
		out.x = Math.cos(angle) * radius;
		out.y = Math.sin(angle) * radius;
		return out;
	},
	drawX = function(pos, crossWidth){
		crossWidth = crossWidth || 5;
		context.save();
		context.translate(pos.x, pos.y);
		context.strokeStyle = '#fff';
		context.beginPath();
		context.moveTo(-crossWidth, -crossWidth);
		context.lineTo(crossWidth, crossWidth);
		context.stroke();
		context.beginPath();
		context.moveTo(crossWidth, -crossWidth);
		context.lineTo(-crossWidth, crossWidth);
		context.stroke();
		context.restore();
	},
	vBound = function(target){
		if(target.pos.x > halfX || target.pos.x > halfX){
			//target.vel.x *= -1;
			target.angle += pi;
		}
		if(target.pos.y > halfY || target.pos.y > halfY){
			//target.vel.y *= -1;
			target.angle += pi;
		}
	};

var Part = function(){
	
};
Part.prototype = {
	render: function(){}
};
var LifeForm = function(){
	var t = this;
	t.pos = {
		x: posRange(),
		y: posRange()
	};
	t.angle = tau * Math.random();
	t.vel = vSet(t.angle, 1, t.vel);
};
LifeForm.prototype = {
	update: function(){
		var t = this;
		t.angle += (Math.random() - 0.5) * 0.3;
		t.vel = vSet(t.angle, 1, t.vel);
		vBound(t);
		vAdd(t.pos, t.vel);
	},
	render: function(){
		drawX(this.pos);
	}
};

var objectList = [];

var frame = function(){
	context.save();
	context.fillStyle = 'rgba(0,0,0,0.125)';
	context.fillRect(0, 0, width, height);
	context.translate(halfX,...