JSFiddle - React, Tailwind, and code Playground

by Tiago Marinho

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) {
                for (var blockY = 0; blockY < blockGroupHeight / blockHeight; blockY++) {
                    for (var blockX = 0; blockX < blockGroupWidth / blockWidth; blockX++) {
                        if (blockY == 0 && blockX == 0) {
                            var obj = new createjs.Bitmap(topLeft[Math.floor(Math.random() * topLeft.length)]);
                        }
                        if (blockY == 0 && blockX != 0 && blockX != (blockGroupWidth / blockWidth - 1)) {
                            var obj = new createjs.Bitmap(topCenter[Math.floor(Math.random() * topCenter.length)]);
                    ...