JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<canvas id="scr" width="160" height="100">THIS IS A CANVAS.</canvas><label for="lod">LOD intensity</label><input type="range" min="2" max="12" step="1" id="lod" /><br /><label for="dd">draw distance</label><input type="range" min="255" max="2049" step="1" id="dd" /><br /><label for="interlaced">interlaced</label><input type="checkbox" id="interlaced" /><br /><canvas id="lightmap" width="512" height="512" style="display:none"></canvas>

CSS

body {
  text-align: center;
  color: #fff;
  font-family: sans, sans-serif;
  background: #000;
}
canvas#scr {
  padding: 0;
  margin: 0;
  width: 100%;
  background: #62c0ff;
}
canvas#lightmap {
  background: url("https://raw.githubusercontent.com/namuol/earf-html5/master/build/heightmap.jpg");
}

a {
  color: #558;
  text-decoration: none;
}
a:visited {
  color: #858;
}

CoffeeScript

var __slice = Array.prototype.slice;var __hasProp = Object.prototype.hasOwnProperty;var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };var __extends = function(child, parent) {  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }  function ctor() { this.constructor = child; }  ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype;  return child; };var __indexOf = Array.prototype.indexOf || function(item) {  for (var i = 0, l = this.length; i < l; i++) {    if (this[i] === item) return i;  } return -1; };(function () {
    // Derp.
    var Camera, Vector, map_el, setPixel;
    setPixel = function(imageData, x, y, r, g, b, a) {
      var index;
      index = (x + y * imageData.width) * 4;
      imageData.data[index] = r;
      imageData.data[index + 1] = g;
      imageData.data[index + 2] = b;
      return imageData.data[index + 3] = a;
    };
    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
        return window.setTimeout(callback, 1000 / 60);
      };
    })();
    Vector = (function() {

      function Vector(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
      }

      Vector.prototype.add = function(v) {
        return new Vector(this.x + v.x, this.y + v.y, this.z + v.z);
      };

      Vector.prototype.sub = function(v) {
        return new Vector(this.x - v.x, this.y - v.y, this.z - v.z);
      };

      Vector.prototype.mul = function(s) {
        return new Vector(this.x * s, this.y * s, this.z * s);
      };

      Vector.prototype.normal = function() {
        var mag;
        mag = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
        this.x /= mag;
        this.y /= mag;
        this.z /= mag;
     ...