JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
    <title>Cracked — Shiny Demos</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
    <video>
        <source src="http://media.shinydemos.com/getusermedia-cracked/WebStandardsHoedown.mp4" type="video/mp4"></source>
        <source src="http://media.shinydemos.com/getusermedia-cracked/WebStandardsHoedown.webm" type="video/webm"></source>
        Sorry, your browser doesn't support video. I recommend trying <a href="http://www.opera.com/browser/">Opera</a>.
    </video>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <script src="/scripts/modernizr.js"></script>
    <script src="/scripts/panel.js"></script>
    <script src="scripts/options.js"></script>
    <script src="scripts/script.js"></script>

CSS

body {
    background:#000;
    color:#fff;
    margin:0;
    padding:0;
}
canvas {
    cursor:crosshair;
}
#canvas1, video {
    display:none;
}
#canvas2 {
    display:block;
}

JavaScript

function randomXToY(minVal, maxVal, floatVal) {
    var randVal = minVal + (Math.random() * (maxVal - minVal));
    return typeof floatVal === 'undefined' ? randVal >> 0 : randVal.toFixed(floatVal);
}

// Returns an array containing the x and y coordinates of an event (e.g. mouse click)
// Code from: http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/
function getCoords(event) {
    var x, y;
    if (event.touches) {
        x = event.touches[0].pageX;
        y = event.touches[0].pageY;
    } else if (event.pageX || event.pageY) { 
        x = event.pageX;
        y = event.pageY;
        
    } else { 
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    }
    x -= canvas1.offsetLeft;
    y -= canvas1.offsetTop;
    return [x, y];
}

/* MAIN SCRIPT */
document.addEventListener('DOMContentLoaded', function(){
    // Global variables
    var windowwidth = window.outerWidth;
    var windowheight = window.outerHeight;
    var shards = [];
    var coords = [];
    var MAX_ROTATION = 0.05; // In radians
    var DRAW_SPEED = 1000 / 20; // Draw at 20 fps
    var mouse_down = ('createTouch' in document ? 'ontouchstart' : 'onmousedown');
    var video = document.querySelector('video');
    var canvas1 = document.getElementById('canvas1');
    var context1 = canvas1.getContext('2d');
    var canvas2 = document.getElementById('canvas2');
    var context2 = canvas2.getContext('2d');
    var HEALING_DELAY = 600; // Milliseconds
    var HEALING_TIME = 1000; // Milliseconds
    var opacity = 1;
    var timer_delay = HEALING_DELAY;
    var timer_heal = HEALING_TIME;
    var heal_step = DRAW_SPEED / HEALING_TIME;
 
    // Shard constructor
    function Shard() {
        this.rotation = 0;
        this.corner1 = []; // Make this an empty array
        this.corner2 = [];
        this.corner3 = [];
    }
    
   ...