JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id="L1" width="500" height="500"></canvas>

CSS

canvas { background: #101010 }

JavaScript

var Moon


~function(e, g) {
    var d = [ 0, 30, 0 ], a = Array(3);
    e.e = function(c, h) {
        d[0] = .1171875 * c - 15;
        d[2] = .1171875 * h - 15;
        var b = d[0] * d[0] + 900 + d[2] * d[2], f = 324e4 - 4 * b * this.d;
        if (0 >= f) return null;
        b = (1800 - Math.sqrt(f)) / (2 * b);
        a[0] = b * d[0];
        a[1] = b * d[1] - 30;
        a[2] = b * d[2];
        b = a[0];
        a[0] = b * Math.cos(this.a[2]) - a[1] * Math.sin(this.a[2]);
        a[1] = b * Math.sin(this.a[2]) + a[1] * Math.cos(this.a[2]);
        b = a[2];
        a[2] = b * Math.cos(this.a[1]) - a[1] * Math.sin(this.a[1]);
        a[1] = b * Math.sin(this.a[1]) + a[1] * Math.cos(this.a[1]);
        return [ 1024 * (Math.atan2(a[1], a[0]) + Math.PI + 1) / (2 * Math.PI), 1024 * Math.floor(1023 - 1024 * Math.min(1, Math.acos(a[2] / this.c) / Math.PI)) ];
    };
    e.f = function(c) {
        if (this.b[c] === g) {
            var a = Math.floor(c / 256);
            this.b[c] = this.e(c - 256 * a, a);
        }
        return this.b[c];
    };
    e.g = function() {
        var c = document.createElement("canvas");
        c.height = c.width = 1024;
        c = c.getContext("2d");
        c.fillStyle = "#7f8c8d";
        c.fillRect(0, 0, 1024, 1024);
        c.fillStyle = "#ecf0f1";
        var a, b;
        for (a = 0; 32 > a; ++a) for (b = 0; 32 > b; ++b) a % 2 == b % 2 && c.fillRect(32 * a, 32 * b, 32, 32);
        this.h = c.getImageData(0, 0, 1024, 1024);
    };
    e.render = function(a, d) {
        for (var b = this.h.data, f, e, g = 65536; g--; ) f = this.f(g), null !== f && (f = 4 * (Math.floor(f[0] + d) % 1024 + f[1]), 
        e = 4 * g, a[e] = b[f], a[e + 1] = b[f + 1], a[e + 2] = b[f + 2], a[e + 3] = 255);
    };
}((Moon = function(e, g, d) {
    this.b = Array(65536);
    this.c = e || 12;
    this.d = 900 - this.c * this.c;
    this.a = [ 0, -Math.PI * (d || 48) / 180, -Math.PI * (g || 24) / 180 ];
    this.g();
}).prototype);


var L1 =...