<canvas id="ctx" width="330" height="1200"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");

function resetCanvas(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

var frameno = 0;
var fps = 100;

function acceleration(accel, duration, length){
	this.a = accel;
	this.d = duration;
	this.l = length;

	var snask = 1;
	for(var g = 1; g < duration; g++){
		snask = snask + Math.pow(this.a, this.d-g);
	}
	this.s = this.l/snask;
	this.calc = calcAccelPoint;
	this.outputArr = calcAccelArray;
}

function calcAccelPoint(t){
	var res = 0;
	for(var x = 1; x < t; x++){
		res = res + this.s * Math.pow(this.a, (x-1));
	}
	return res; //s * Math.pow(a,(t-1));
}

function calcAccelArray(){
	points = [];
	for(var i = 0; i < (this.d+2); i++){
		points.push(this.calc(i));
	}
	return points;
}

function drawPoint(lmargin, tmargin, pos){
	ctx.moveTo(lmargin+pos,tmargin-5);
	ctx.lineTo(lmargin+pos,tmargin+5);
	ctx.stroke();
}


function drawLines(frameno){
	for(var b = 0; b < 21; b++){
		ctx.beginPath();
		ctx.moveTo(10,b*50+50);
		ctx.lineTo(310, b*50+50);
		ctx.stroke();

		var bane = new acceleration(0.1+(b*0.1), 10, 300);
		banep = bane.outputArr();
		for(var h = 0; h < banep.length; h++){
			drawPoint(10, 50*b+50, banep[h]);
		}
		ctx.beginPath();
		ctx.arc(banep[frameno]+10, b*50+50, 10, 0, 2*Math.PI, true);
		ctx.fill();
	}
}


function sequence1() {
	setTimeout(function () {
		resetCanvas();
		frameno = frameno + 1;

		drawLines(frameno);

		if((frameno-1) < 10){
		        sequence1();
		}else{
			frameno = 0;
			sequence1();
		}
	}, fps);
}

sequence1();
</script>