JSFiddle - React, Tailwind, and code Playground
HTML
<main>
<table id="container">
<tbody></tbody>
</table>
</main>
CSS
/* table idea from http://codeitdown.com/css-square-rectangle/ */
body > main {
width:256px;
height:256px;
background-color:#444;
}
body > main > table#container {
border-collapse:collapse;
width:100%;
height:100%;
background-color:#444;
}
/* each row */
body > main > table#container > tbody > tr {
height:1px;
}
/* each pixel */
body > main > table#container > tbody > tr > td {
padding:0px;
width:1px;
height:1px;
overflow:hidden;
text-overflow:clip;
font-size:1px;
color:transparent;
}
JavaScript
/* http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array */
function shuffle(array) {
var currentIndex = array.length
, temporaryValue
, randomIndex
;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
$(function() {
$container = $('body > main > table#container > tbody');
$container
.hide();
$td = $('<td>0</td>');
var reds = [];
var greens = [];
var blues = [];
for (var i = 0; i <= 256; i = i + 8)
{
reds.push(i);
greens.push(i);
blues.push(i);
}
//~ shuffle(reds);
//~ shuffle(greens);
//~ shuffle(blues);
var y_len = (reds.length * 4);
var x_len = greens.length;
var z_len = blues.length;
var z = 0;
var z_end = 0;
for (var y = 0; y < y_len; y++)
{
$row = $('<tr></tr>');
tmp_z = ((y % 4) * 8);
tmp_z_end = (tmp_z + 8);
for (var x = 0; x < x_len; x++)
{
for (var z = tmp_z; z < tmp_z_end; z++)
{
$pixel = $td
.clone()
.css({ 'background-color':
'rgb(' + reds[x] +','
+ greens[Math.floor(y / 4)] + ','
+ blues[z] + ')' })
;
$row.append($pixel);
}
}
$container.append($row, "\n");
}
$container
.show();
});