This article deserves recognition for its fun potential. After reading it, I decided to try it out by building a simple HTML/JavaScript application to try it out. I used jQuery and a jQuery plugin, SVG. The work is simple and not very elegant, but I had fun putting it together.
The HTML Code
Note that the references to the jQuery and SVG libraries have been shortened as if to suggest that they live in the same folder as the app. You will have to download and install these libraries and adjust these references to reflect your installation.
The library paths will have to be adjusted to yours
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Tiles</title>
<style type="text/css">
@import "C:\Users\Rodrigo\Dropbox\Silveira\SilveiraConsulting\Gildhalle\jquery\jquery.svg.package-1.4.3\jquery.svg.css";
#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="C:\Users\Rodrigo\Dropbox\Silveira\SilveiraConsulting\Gildhalle\jquery\jquery-ui-1.8.4.custom\js\jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="C:\Users\Rodrigo\Dropbox\Silveira\SilveiraConsulting\Gildhalle\jquery\jquery.svg.package-1.4.3\jquery.svg.js"></script>
<script type="text/javascript" src="tiling_1.js"></script>
</head>
<body>
<h1>Tiling</h1>
<h2>Collect the information</h2>
<div>
<div id="collectTilingInformation" >
<form id="collectTilingInformationForm" style="width: 99%">
<input type="hidden" name="Hidden" value="hiddenValue"></input>
<table>
<tbody>
<tr>
<td>Tiles</td>
</tr>
<tr>
<td><input name="numberOfTiles" type="text" value="6"></input></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<h2>Show the Tiles</h2>
<div id="svgbasics"></div>
<div id="collectTilingInformationForm" class="im_buttons_right">
<button type="button" id="tiles">Generate Tiles</button>
</div>
</html>
JS
$(function() {
$('#svgbasics').svg({onLoad: drawInitial_1});
$('#tiles').click(drawTiles);
$('#clear').click(function() {
$('#svgbasics').svg('get').clear();
});
});
function drawInitial_1(svg) {
}
var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
function drawTiles() {
var i = 0;
var svg = jQuery('#svgbasics').svg('get');
var formValues = {};
var $inputs = jQuery('#collectTilingInformationForm :input');
$inputs.each(function() {
formValues[this.name] = jQuery(this).val();
});
iTiles = formValues.numberOfTiles
console.log("Number of Tiles to draw: " + iTiles);
tiles = tileRectangularArea(iTiles);
for (i in tiles) {
console.log("Tiles in row " + (i + 1) + ": " + tiles[i]);
}
jQuery('#svgbasics').svg('get').clear();
drawingAreaHeight = jQuery('#svgbasics').height();
drawingAreaWidth = jQuery('#svgbasics').width();
console.log("Drawing area height: " + drawingAreaHeight);
console.log("Drawing area width: " + drawingAreaWidth);
var iTileX = 0;
var iTileY = 0;
for (i in tiles) {
iTilesInRow = tiles[i];
tilesHeight = Math.floor(drawingAreaHeight/iTilesInRow);
tilesWidth = Math.floor(drawingAreaWidth/iTilesInRow);
console.log("Tiles height for row " + i + ": " + tilesHeight);
console.log("Tiles width for row " + i + ": " + tilesWidth);
for (j = 0; j < iTilesInRow; j++) {
svg.rect(iTileX, iTileY,tilesWidth, tilesHeight,
{fill: colours[random(9)], stroke: colours[random(9)],
'stroke-width': random(5) + 1});
iTileX += tilesWidth;
}
iTileX = 0;
iTileY += tilesHeight;
}
}
function random(range) {
return Math.floor(Math.random() * range);
}
function tileRectangularArea(iRectangles) {
var i = 0,
iSections = 0,
aColumnsPerRow = null,
fRoot = 0.0,
fSquareRoot = 0.0,
iRoundedRoot = 0,
iRowCount = 0,
iColCount = 0,
iLeftOver = 0,
iLeft = 0,
oTiles = null;
if (iRectangles == 0) {
}
else {
aColumnsPerRow = [];
if (iRectangles <= 4) {
aColumnsPerRow[0] = iRectangles
}
else {
fRoot = iRectangles * 1.0;
fSquareRoot = Math.sqrt(fRoot)
iRoundedRoot = Math.floor(fSquareRoot);
iRowCount = iRoundedRoot;
iColCount = iRoundedRoot;
iLeftOver = iRectangles - iRowCount*iColCount;
iDistribution = Math.floor(iLeftOver/iRowCount);
iColCount += iDistribution;
iLeft = iRectangles - iRowCount*iColCount;
iStartAddingIndex = iRowCount - iLeft;
for (i = 0; i < iRowCount; i++) {
if (i == iStartAddingIndex) {
iColCount++;
iStartAddingIndex = -1;
}
aColumnsPerRow[i] = iColCount;
}
}
}
return aColumnsPerRow;
}