I have been playing around with tables and random colors to generate some mosaic.
As I find it rather slow, tell me how it can be improved in terms of speed.
function generate_mosaic(cols, rows) {
var i, ncol, trans, colspan, style, html;
html += "<table>";
for (i = 0; i < rows; i += 1) {
html += "<tr>";
ncol = 0;
while (ncol < cols) {
trans = ncol / cols * 0.5 + i / rows * 0.5;
colspan = Math.floor(Math.random() * 2) + 1;
if (ncol === cols - 1) {
colspan = 1;
}
ncol += colspan;
style = "background-color: rgba(" + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + Math.floor(Math.random() * 255) + ", " + trans + ");";
html += "<td colspan=" + colspan + " style='" + style + " line-height: 5px'> <\/td>";
}
html += "<\/tr>";
}
html += "<\/table>";
return html;
}
document.write(generate_mosaic(250, 250));
Code is also available as a jsfiddle