Simple gear rendering.

GearRender.js

//Luca Béla Palkovics 27.01.2014 - Luca.Bela.Palkovics@gmail.com
/*
    Renders gears in Canvas
    Copy & Past into http://htmlivecode.com/canvas-animation-playground/
*/
 
function gear(ctx, settings) {
	var acc = 10;
	if (typeof settings.cache === "undefined") {
		settings.cache = {};
		settings.cache.phi_rad = settings.phi/360*Math.PI;
		settings.cache.D = settings.m*settings.z+settings.s;
		settings.cache.R_b = settings.cache.D/2*Math.cos(settings.cache.phi_rad);
		settings.cache.R_a = settings.cache.D/2 + settings.m;
		settings.cache.g_phi = Math.asin(settings.g/(settings.cache.R_b-settings.g));
		settings.cache.om_max = Math.sqrt(Math.pow(settings.cache.R_a, 2) - Math.pow(settings.cache.R_b, 2)) / settings.cache.R_b;
	}
	ctx.beginPath();
	for(var i = 0; i < settings.z; ++i) {
		//1. seite zahn
		ctx.save();
		ctx.rotate((i/settings.z + 0)*Math.PI*2);
		
		ctx.arc(0, 0, settings.cache.R_b-settings.g, -Math.PI*2/settings.z/2+settings.cache.g_phi, -settings.cache.g_phi, false);
		ctx.arc(settings.cache.R_b, -settings.g, settings.g, Math.PI, Math.PI/2, true);
		
		var om = 0
		for(om; om <= settings.cache.om_max; om = om + settings.cache.om_max/acc) {
			var x = settings.cache.R_b*Math.cos(om) + settings.cache.R_b*om*Math.sin(om);
			var y = settings.cache.R_b*Math.sin(om) - settings.cache.R_b*om*Math.cos(om);
			ctx.lineTo(x, y);
		}		
		//2. seite zahn
		ctx.rotate(Math.PI*2/settings.z/2);
		for(om = om - settings.cache.om_max/acc; om >= 0; om = om - settings.cache.om_max/acc) {
			var x = settings.cache.R_b*Math.cos(-om) + settings.cache.R_b*-om*Math.sin(-om);
			var y = settings.cache.R_b*Math.sin(-om) - settings.cache.R_b*-om*Math.cos(-om);
			ctx.lineTo(x, y);
		}
		ctx.arc(settings.cache.R_b, settings.g, settings.g, -Math.PI/2, Math.PI, true);
		ctx.restore();
	}
	ctx.closePath();
	ctx.moveTo(settings.b,0); //do i really need this ?
	ctx.arc(0, 0, settings.b, 0, 2 * Math.PI, true);
	//ctx.fill();
	ctx.stroke();
	ctx.clip();
	
	ctx.beginPath();
	for(var i = -100; i < 100; ++i) {
		ctx.moveTo(-100+i*settings.z/5,-100);
		ctx.lineTo(100+i*settings.z/5,100);
	}
	ctx.stroke();
}
 
// CANVAS ANIMATION LOOP (CALLED EVERY FRAME)
var tick = 0;
var CanvasAnimationLoop = function() {
	var ctx = CTX;
	ctx.clearRect(0, 0, CVS.width, CVS.height);
	ctx.save();
	ctx.translate(CVS.width/2, CVS.height/2);
	ctx.scale(10,10);
	ctx.lineWidth = 0.1;
	
	//1. gear
	ctx.save();
	ctx.rotate(tick);
	gear(ctx, {
		m: 3,    //Modular
		z: 17,   //Teeth
		phi: 25, //Pressure angle
		g: 1,    //Gap
		b: 35,   //Hole
		s: 0.5   //Shift
	});	
	ctx.rotate(tick);
	ctx.beginPath();
	for(var i = -100; i < 100; ++i) {
		ctx.moveTo(-100+i*settings.z/5,-100);
		ctx.lineTo(100+i*settings.z/5,100);
	}
	ctx.stroke();
	ctx.restore();
	
	//2. gear
	ctx.save();
	ctx.translate(14.6,0)
	ctx.rotate(tick*(17/7));
	gear(ctx, {
		m: 3,    //Modular
		z: 7,    //Teeth
		phi: 25, //Pressure angle
		g: 1,    //Gap
		b: 5,    //Hole
		s: 0     //Shift
	});	
	ctx.restore();
	
	ctx.restore();
	tick+=0.01
};