Toy made with Carlé

by Admiral Potato

HTML

<canvas id="myCanvas" width="640" height="640"></canvas>

CSS

*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
	background-color: #000;
}
canvas{
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #333;
}

JavaScript

var canvas = document.getElementById('myCanvas'),
	width = canvas.width,
	halfWidth = width / 2,
	context = canvas.getContext('2d'),
	pi = Math.PI, tau = pi * 2, deg = pi / 180,
	sin = Math.sin, cos = Math.cos,
	mouse = [0,0],
	updateMouse = function(event){
		mouse[0] = event.offsetX - halfWidth;
		mouse[1] = event.offsety - halfWidth;
	},
	addV = function(a, b, out){
		var output = out || a;
		output[0] = a[0] + b[0];
		output[1] = a[1] + b[1];
		return output;
	},
	scaleV = function(a, scale, out){
		var output = out || a;
		output[0] = a[0] * scale;
		output[1] = a[1] * scale;
		return output;
	},
	angleVelToVec = function(angle, vel, out){
		var output = out || [];
		output[0] = cos(angle) * vel;
		output[1] = sin(angle) * vel;
		return output;
	},
	obList = [],
	startTime = new Date().getTime(),
	lastUpdate = 0,
	animate = function(){
		var now = new Date().getTime(),
			time = (now - startTime) / 1000,
			delta = time - lastUpdate,
			len = obList.length, i, item;
		//console.log(time);
		context.clearRect(0, 0, width, width);
		context.save();
		context.globalCompositeOperation = 'lighter';
		context.translate(halfWidth, halfWidth);
		for(i = 0; i < len; i++){
			item = obList[i];
			item.update(time);
		}
		context.restore();
		lastUpdate = time;
		requestAnimationFrame(animate);
	},
	drawLine = function(aX, aY, bX, bY, color, width){
		var newColor = color || '#fff',
			newWidth = width || 2;
		if(context.strokeStyle !== newColor){
			context.strokeStyle = newColor;
		}
		if(context.lineWidth !== newWidth){
			context.lineWidth = newWidth;
		}
		context.beginPath();
		context.moveTo(aX, aY);
		context.lineTo(bX, bY);
		context.stroke();
	},
	drawLineV = function(a, b, color, width){
		drawLine(a[0], a[1], b[0], b[1], color, width);
	},
	drawCross = function(x, y, scale, color, width){
		var newScale = scale || 5;
		drawLine(x - newScale, y - newScale, x + newScale, y + newScale, color, width);
		drawLine(x + newScale, y - newScale, x - newScale, y +...