drm/moochallenge-1.html

## moochallenge-1.html
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Gerard van Helden <drm@melp.nl>">
    <style type="text/css">
        div#container {
            position: relative;
        }
        div#container>div {
            position: absolute;
            outline: 1px solid #888;
            text-align: center;
        }
        div#container>div>span {
            font-family: Verdana, Tahoma, sans-serif;
            font-size: 10px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <fieldset>
        <legend>Make awesome thingy</legend>
        <p><label for="rows">Rows:</label> <input id="rows" value="5"></p>
        <p><label for="cols">Columns:</label> <input id="cols" value="15"></p>
        <p><label for="algorithm">Algorithm:</label> <select id="algorithm"><option value="random">Random</option><option value="spiral">Spiral</option></select>

        <button onclick="document.getElementById('container').innerHTML=''; Challenge1.run(document.getElementById('container'), window[document.getElementById('algorithm').options[document.getElementById('algorithm').selectedIndex].value], 30, 30, parseInt(document.getElementById('cols').value), parseInt(document.getElementById('rows').value));">Do it</button>
    </fieldset>
    <div id="container"></div>
</body>
<script type="text/javascript">
var _ = {
    each: function(arr, callback) {
        var key;
        for (key in arr) {
            if (arr.hasOwnProperty(key)) {
                callback(arr[key], key);
            }
        }
    },

    reduce: function(arr, callback, initial) {
        var ret = initial;
        _.each(arr, function(v, k) {
            ret = callback(ret, v);
        });
        return ret;
    },

    map: function(arr, callback) {
        var ret = [];
        _.each(arr, function(v, k) {
            ret[k] = callback(v, k);
        });
        return ret;
    },

    range: function(lower, upper) {
        var ret = [];
        for (var i = lower; i < upper; i ++) {
            ret.push(i);
        }
        return ret;
    },

    iter: function(obj, callback) {
        obj.reset();
        while (obj.valid()) {
            callback(obj.current(), obj.key());
            obj.next();
        }
    },

    color: function(rgb) {
        return _.reduce(
            rgb,
            function (ret, val) {
                return ret + ('0' + Math.round(val).toString(16)).substr(-2);
            },
            '#'
        );
    }
};
</script>

<script type="text/javascript">
Challenge1 = (function() {
    var grid = [];
    var bounds = [];

    function paint(el, i, total) {
        var tmp = el.ownerDocument.createElement('span');
        tmp.appendChild(el.ownerDocument.createTextNode(i));
        el.appendChild(tmp);
        el.style.backgroundColor = _.color(
            _.map(
                [255, 255, 255],  // base color
                function(v) {
                    return Math.floor(((i + 128) / (total + 128)) * v);  // lineair tint
                }
           )
       );

    }


    function fill(grid, algorithm) {
        function collides(current) {
            if(current[0] > bounds[1][0] || current[1] > bounds[1][1] || current[0] < bounds[0][0] || current[1] < bounds[0][1]) {
                return true;
            }
            return grid[current[0]][current[1]].getAttribute('data-painted');
        }
        var total = (bounds[1][0] +1) * (bounds[1][1] + 1);
        _.iter(
            new algorithm(grid, collides),
            function(current, i) {
                el = grid[current[0]][current[1]];
                paint(el, i, total);
                el.setAttribute('data-painted', true);
            }
        );
    }

    return {
        'run': function(container, algorithm, w, h, columns, rows) {
            bounds = [[0, 0], [columns -1, rows -1]];

            _.each(_.range(0, columns), function(x) {
                grid[x] = [];
                _.each(_.range(0, rows), function(y) {
                    grid[x][y]= container.ownerDocument.createElement('div');
                    grid[x][y].style.left = x * w + 'px';
                    grid[x][y].style.top  = y * h + 'px';
                    grid[x][y].style.width = w + 'px';
                    grid[x][y].style.height = h + 'px';
                    container.appendChild(grid[x][y]);
                });
            });

            fill(grid, algorithm);
        }
    };
})();

function spiral(grid, collisionDetector) {
    this.grid = grid;
    this.collides = collisionDetector;
}

spiral.prototype = {
    reset: function() {
        this.cur = [0, 0];
        this.index = 0;
        this.order = [
            [1, 0],
            [0, 1],
            [-1, 0],
            [0, -1],
        ];
        this.direction = this.order.shift();
    },

    next: function() {
        this.cur = this._next(this.cur);
        this.index ++;
    },

    valid: function() {
        return this.cur !== null;
    },

    current: function() {
        return this.cur;
    },

    key: function() {
        return this.index;
    },

    _next: function(current, nested) {
        var ret = [current[0], current[1]];
        var direction = this.direction;
        _.each(ret, function(val, xy) {
            ret[xy] = current[xy] + direction[xy];
        });
        if (this.collides(ret)) {
            if(nested) {
                return null; // end is reached;
            }
            this.order.push(this.direction);
            this.direction = this.order.shift();
            ret = this._next(current, true);
        }
        return ret;
    }
};


function random(grid, collisionDetector) {
    this.grid = grid;
    this.collides = collisionDetector;
}

random.prototype = {
    reset: function() {
        this.index = 0;
        this.order = [];
        for (var x = 0; x < this.grid.length; x ++) {
            for (var y = 0; y < this.grid[x].length; y ++) {
                this.order.push([x, y]);
            }
        }
        this.order = this.order.sort(function() {
            return Math.round(Math.random()) - .5;
        });
    },

    next: function() {
        this.index ++;
    },

    valid: function() {
        return typeof this.order[this.index] != 'undefined';
    },

    current: function() {
        return this.order[this.index];
    },

    key: function() {
        return this.index;
    }
};

</script>
</html>
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="author" content="Gerard van Helden <drm@melp.nl>">
	<style type="text/css">
	div#container {
	position: relative;
	}
	div#container>div {
	position: absolute;
	outline: 1px solid #888;
	text-align: center;
	}
	div#container>div>span {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 10px;
	margin: 10px auto;
	}
	</style>
	</head>

	<body>
	<fieldset>
	<legend>Make awesome thingy</legend>
	<p><label for="rows">Rows:</label> <input id="rows" value="5"></p>
	<p><label for="cols">Columns:</label> <input id="cols" value="15"></p>
	<p><label for="algorithm">Algorithm:</label> <select id="algorithm"><option value="random">Random</option><option value="spiral">Spiral</option></select>

	<button onclick="document.getElementById('container').innerHTML=''; Challenge1.run(document.getElementById('container'), window[document.getElementById('algorithm').options[document.getElementById('algorithm').selectedIndex].value], 30, 30, parseInt(document.getElementById('cols').value), parseInt(document.getElementById('rows').value));">Do it</button>
	</fieldset>
	<div id="container"></div>
	</body>
	<script type="text/javascript">
	var _ = {
	each: function(arr, callback) {
	var key;
	for (key in arr) {
	if (arr.hasOwnProperty(key)) {
	callback(arr[key], key);
	}
	}
	},

	reduce: function(arr, callback, initial) {
	var ret = initial;
	_.each(arr, function(v, k) {
	ret = callback(ret, v);
	});
	return ret;
	},

	map: function(arr, callback) {
	var ret = [];
	_.each(arr, function(v, k) {
	ret[k] = callback(v, k);
	});
	return ret;
	},

	range: function(lower, upper) {
	var ret = [];
	for (var i = lower; i < upper; i ++) {
	ret.push(i);
	}
	return ret;
	},

	iter: function(obj, callback) {
	obj.reset();
	while (obj.valid()) {
	callback(obj.current(), obj.key());
	obj.next();
	}
	},

	color: function(rgb) {
	return _.reduce(
	rgb,
	function (ret, val) {
	return ret + ('0' + Math.round(val).toString(16)).substr(-2);
	},
	'#'
	);
	}
	};
	</script>

	<script type="text/javascript">
	Challenge1 = (function() {
	var grid = [];
	var bounds = [];

	function paint(el, i, total) {
	var tmp = el.ownerDocument.createElement('span');
	tmp.appendChild(el.ownerDocument.createTextNode(i));
	el.appendChild(tmp);
	el.style.backgroundColor = _.color(
	_.map(
	[255, 255, 255], // base color
	function(v) {
	return Math.floor(((i + 128) / (total + 128)) * v); // lineair tint
	}
	)
	);

	}


	function fill(grid, algorithm) {
	function collides(current) {
	if(current[0] > bounds[1][0] \|\| current[1] > bounds[1][1] \|\| current[0] < bounds[0][0] \|\| current[1] < bounds[0][1]) {
	return true;
	}
	return grid[current[0]][current[1]].getAttribute('data-painted');
	}
	var total = (bounds[1][0] +1) * (bounds[1][1] + 1);
	_.iter(
	new algorithm(grid, collides),
	function(current, i) {
	el = grid[current[0]][current[1]];
	paint(el, i, total);
	el.setAttribute('data-painted', true);
	}
	);
	}

	return {
	'run': function(container, algorithm, w, h, columns, rows) {
	bounds = [[0, 0], [columns -1, rows -1]];

	_.each(_.range(0, columns), function(x) {
	grid[x] = [];
	_.each(_.range(0, rows), function(y) {
	grid[x][y]= container.ownerDocument.createElement('div');
	grid[x][y].style.left = x * w + 'px';
	grid[x][y].style.top = y * h + 'px';
	grid[x][y].style.width = w + 'px';
	grid[x][y].style.height = h + 'px';
	container.appendChild(grid[x][y]);
	});
	});

	fill(grid, algorithm);
	}
	};
	})();

	function spiral(grid, collisionDetector) {
	this.grid = grid;
	this.collides = collisionDetector;
	}

	spiral.prototype = {
	reset: function() {
	this.cur = [0, 0];
	this.index = 0;
	this.order = [
	[1, 0],
	[0, 1],
	[-1, 0],
	[0, -1],
	];
	this.direction = this.order.shift();
	},

	next: function() {
	this.cur = this._next(this.cur);
	this.index ++;
	},

	valid: function() {
	return this.cur !== null;
	},

	current: function() {
	return this.cur;
	},

	key: function() {
	return this.index;
	},

	_next: function(current, nested) {
	var ret = [current[0], current[1]];
	var direction = this.direction;
	_.each(ret, function(val, xy) {
	ret[xy] = current[xy] + direction[xy];
	});
	if (this.collides(ret)) {
	if(nested) {
	return null; // end is reached;
	}
	this.order.push(this.direction);
	this.direction = this.order.shift();
	ret = this._next(current, true);
	}
	return ret;
	}
	};


	function random(grid, collisionDetector) {
	this.grid = grid;
	this.collides = collisionDetector;
	}

	random.prototype = {
	reset: function() {
	this.index = 0;
	this.order = [];
	for (var x = 0; x < this.grid.length; x ++) {
	for (var y = 0; y < this.grid[x].length; y ++) {
	this.order.push([x, y]);
	}
	}
	this.order = this.order.sort(function() {
	return Math.round(Math.random()) - .5;
	});
	},

	next: function() {
	this.index ++;
	},

	valid: function() {
	return typeof this.order[this.index] != 'undefined';
	},

	current: function() {
	return this.order[this.index];
	},

	key: function() {
	return this.index;
	}
	};

	</script>
	</html>