JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<script src="http://static.tumblr.com/uzcr0ts/uzIn1l1v2/easeljs-0.7.1.min.js"></script>
<canvas id="canvas">Your browser doesn't have full HTML5 support.</canvas>

CSS

* {
    margin:0;
}
canvas {
    background:#6CF;
}

JavaScript

function init() {
    var stage = new createjs.Stage("canvas");

    var Graphic = function (src, blockWidth, blockHeight) {
        return {
            createBlockAt: function (x, y, blockGroupWidth, blockGroupHeight, clsdir, alpha) {
                for (var blockY = 0; blockY < blockGroupHeight / blockHeight; blockY++) {
                    for (var blockX = 0; blockX < blockGroupWidth / blockWidth; blockX++) {

                        var obj = new createjs.Bitmap(src[Math.floor(Math.random() * src.length)]);

                        obj.width = blockWidth;
                        obj.height = blockHeight;
                        if (typeof alpha !== 'undefined') {
                            obj.alpha = alpha; // While debugging this can be used to check if a block was made over another block.
                        }

                        obj.x = Math.round(x + (blockWidth * blockX));
                        obj.y = Math.round(y + (blockHeight * blockY));

                        stage.addChild(obj);
                    }
                }
            }
        }
    }
    var complexBlock = function (topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter, bottomRight, blockWidth, blockHeight) {
        return {
            createBlockAt: function (x, y, blockGroupWidth, blockGroupHeight, clsdir, alpha) {

                function randomImage(arr) {
                    return new createjs.Bitmap(arr[Math.floor(Math.random() * arr.length)]);
                }

                var blocksHigh = blockGroupHeight / blockHeight;
                var blocksWide = blockGroupWidth / blockWidth;
                var blockSelector = [
                    [topLeft, topCenter, topRight],
                    [middleLeft, middleCenter, middleRight],
                    [bottomLeft, bottomCenter, bottomRight]
                ];

                for (var blockY = 0; blockY < blocksHigh; blockY++) {
                    var blockSY =...