JSFiddle - React, Tailwind, and code Playground

by Lorenzo Brutti

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<body>
    <div id="container"></div>
</body>

CSS

body {
       margin:0px;
       overflow:hidden;
   }
   #container {
       background-color: #888888;
   }

JavaScript

function drawImage(imageObj) {
    var piecesArray = new Array();
    var horizontalPieces = 3;
    var verticalPieces = 3;
    var imageWidth = imageObj.width;
    var imageHeight = imageObj.height;
    var pieceWidth = Math.round(imageWidth / horizontalPieces);
    var pieceHeight = Math.round(imageHeight / verticalPieces);
    var stage = new Kinetic.Stage({
        container: "container",
        width: window.innerWidth,
        height: window.innerHeight
    });
    var layer = new Kinetic.Layer();
    for (i = 0; i < horizontalPieces; i++) {
        piecesArray[i] = new Array();
        for (j = 0; j < verticalPieces; j++) {
            piecesArray[i][j] = new Object();
            piecesArray[i][j].right = Math.floor(Math.random() * 2);
            piecesArray[i][j].down = Math.floor(Math.random() * 2);
            if (j > 0) {
                piecesArray[i][j].up = 1 - piecesArray[i][j - 1].down;
            }
            if (i > 0) {
                piecesArray[i][j].left = 1 - piecesArray[i - 1][j].right;
            }
            piecesArray[i][j].shape = new Kinetic.Shape({
                drawFunc: function (i, j, pieceWidth, pieceHeight, tileObj) {
                    return function (context) {
                        var x8 = Math.round(pieceWidth / 8);
                        var y8 = Math.round(pieceHeight / 8);
                        context.beginPath();
                        context.moveTo(0, 0);
                        if (j != 0) {
                            context.lineTo(3 * x8, 0);
                            if (tileObj.up == 1) {
                                context.quadraticCurveTo(2 * x8, -2 * y8, 4 * x8, -2 * y8);
                                context.quadraticCurveTo(6 * x8, -2 * y8, 5 * x8, 0);
                            } else {
                                context.quadraticCurveTo(2 * x8, 2 * y8, 4 * x8, 2 * y8);
                                context.quadraticCurveTo(6 * x8, 2 * y8, 5 * x8, 0);
                   ...