Background Generator #1

by Bacher

HTML

<!-- by Jack Rugile
http://codepen.io/jackrugile/
-->

CSS

body {
    background-repeat: no-repeat;
}

JavaScript

var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var rows = cols = 36;
var gap = 1;
var grays = [
    [26, 29],
    [32, 37],
    [42, 50],
    [46, 56],
    [54, 66]
];
var sizes = [4, 9, 14];
var frequency = [false, 30, 9];
var cw = ch = c.width = c.height = (sizes[0] + gap) * rows;

function random(max, min) {
    var min = min || 0;
    return Math.random() * (max - min) + min;
}

function cell(x, y, size) {
    var gray = Math.floor(random(grays.length));
    var fill = grays[gray][0];
    var stroke = grays[gray][1];

    ctx.fillStyle = 'rgb(' + fill + ', ' + fill + ', ' + fill + ')';
    ctx.strokeStyle = 'rgb(' + stroke + ', ' + stroke + ', ' + stroke + ')';
    ctx.fillRect(x, y, size, size);
    ctx.strokeRect(x + 0.5, y + 0.5, size - 1, size - 1);
}

function generate() {
    var store = [];

    ctx.fillStyle = 'rgb(18, 18, 18)';
    ctx.fillRect(0, 0, cw, ch);

    for (var x = 0; x < cols; x++) {
        for (var y = 0; y < rows; y++) {
            cell((x * sizes[0]) + (x * gap), (y * sizes[0]) + (y * gap), sizes[0]);
        }
    }

    for (var freq = 0; freq < frequency.length; freq++) {
        if (frequency[freq]) {
            for (var i = 0; i < frequency[freq]; ) {
                var canDraw = true;
                var sizeNew = sizes[freq];
                var pad = Math.ceil((sizeNew / cw) * rows);
                var xNew = Math.floor(random(1, cols - pad)) * (ch / cols);
                var yNew = Math.floor(random(1, rows - pad)) * (cw / rows);
                var storeLength = store.length;
                if (storeLength) {
                    for (var j = 0; j < storeLength; j++) {
                        var storeCell = store[j];
                        if (!(xNew + sizeNew + (cw / cols) < storeCell.x ||
                              yNew + sizeNew + (ch / rows) < storeCell.y ||
                              xNew > storeCell.x + storeCell.size + (cw / cols) ||
                              yNew >...