[Diphenyl Oxalate]

Есть такой код для создания поля из 12х12 ячеек.

<div id="main"></div>

<script type="text/javascript">
var main = document.getElementById( "main" );

var tileW = 50;
var tileH = 45;

for ( var i = 0; i < 12; i++ ) {
	for ( var j = 0; j < 12; j++ ) {
		var tile = document.createElement( "DIV" );
		main.appendChild( tile );
		tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
		tile.style.height = tileH;
		tile.style.width = tileW;
		tile.style.top = tileH * i;
		tile.style.left = tileW * j;
	}
}
</script>

Надо сделать так, чтобы чем ближе к центру находится ячейка, тем она меньше. Ну а крайние, соответственно, больше.

Было решено измерять глубину ячейки (пример для наглядности) вот такой функцией:

function Q( i, j ) {
	var lvl = Math.min( i, j, 11 - i, 11 - j );
	return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}

Она вычисляет, на сколько умножать размеры ячейки. Т.е. для крайних (с lvl=0) будет умножаться на 1.6, а для самых центральных - на 0.4

Позицию ячейки надо теперь тоже считать по-другому, поэтому сделал для этого функцию:

function S( r ) {
	var s = 0;
	for (var i = 0; i < r; i++) {
		var t = i < 6 ? i : r - i - 1;
		s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
	} 
	return s.toFixed(1);
}

Она вместо i, j возвращает новые множители для top и left с учётом масштабирования Q() - пример работы

Теперь в коде умножаю размеры ячейки на Q(i, j), а координаты - вместо top = height * i подаю top = height * S(i) и так же с left. Но получается немного не то

<div id="main"></div>

<script type="text/javascript">
var main = document.getElementById( "main" );

var tileW = 50;
var tileH = 45;

for ( var i = 0; i < 12; i++ ) {
	for ( var j = 0; j < 12; j++ ) {
		var tile = document.createElement( "DIV" );
		main.appendChild( tile );
		tile.style.cssText = "background-color: #cccccc; border: 1px dashed #eeeeee; position: absolute";
		tile.style.height = tileH * Q(i, j);
		tile.style.width = tileW * Q(i, j);
		tile.style.top = tileH * S(i);
		tile.style.left = tileW * S(j);
		tile.onclick = function () { this.style.display = "none" };
	}
}

function Q( i, j ) {
	var lvl = Math.min( i, j, 11 - i, 11 - j );
	return [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][lvl];
}

function S( r ) {
	var s = 0;
	for (var i = 0; i < r; i++) {
		var t = i < 6 ? i : r - i - 1;
		s += [ 1.6, 1.4, 1.2, 0.8, 0.6, 0.4 ][t];
	} 
	return s.toFixed(1);
}
</script>

Где я ошибся в расчётах, может есть готовое решение?
В идеале хотелось бы задавать "центр" вручную (например, ячейки уменьшаются не чем ближе к центру, а чем ближе к ячейке i=3; j=9).