Whoo got unit tests that are failing...

.gitignore

@@ -1,2 +1,3 @@
 .idea
 /node_modules/
+/www/tests.js

package.json

@@ -1,5 +1,11 @@
 {
+  "scripts": {
+    "test-serve": "webpack --config webpack-test.config.js --mode development && jasmine-browser-runner"
+  },
   "devDependencies": {
+    "glob": "^11.0.2",
+    "jasmine-browser-runner": "^3.0.0",
+    "jasmine-core": "^5.8.0",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.3",
     "webpack": "^5.99.9",

spec/HslSpec.js

@@ -0,0 +1,21 @@
+import HSL from "../src/hsl"
+import RGB from "../src/rgb"
+
+describe("HSL", () => {
+    it("should match provided base RBG values", () => {
+        const red = HSL.fromRgb(new RGB(255, 0, 0))
+        expect(red.hue).toEqual(0)
+        expect(red.lightness).toEqual(.5)
+        expect(red.saturation).toEqual(1)
+
+        const green = HSL.fromRgb(new RGB(0, 255, 0))
+        expect(green.hue).toEqual(120)
+        expect(green.lightness).toEqual(.5)
+        expect(green.saturation).toEqual(1)
+
+        const blue = HSL.fromRgb(new RGB(0, 0, 255))
+        expect(blue.hue).toEqual(240)
+        expect(blue.lightness).toEqual(.5)
+        expect(blue.saturation).toEqual(1)
+    })
+})

spec/support/jasmine-browser.mjs

@@ -0,0 +1,32 @@
+export default {
+  srcDir: "src",
+  srcFiles: [
+    "**/*.js"
+  ],
+  specDir: "www",
+  specFiles: [
+    "test.js"
+  ],
+  helpers: [
+    "helpers/**/*.js"
+  ],
+  env: {
+    stopSpecOnExpectationFailure: false,
+    stopOnSpecFailure: false,
+    random: true,
+    // Fail if a suite contains multiple suites or specs with the same name.
+    forbidDuplicateNames: true
+  },
+
+  // For security, listen only to localhost. You can also specify a different
+  // hostname or IP address, or remove the property or set it to "*" to listen
+  // to all network interfaces.
+  listenAddress: "localhost",
+
+  // The hostname that the browser will use to connect to the server.
+  hostname: "localhost",
+
+  browser: {
+    name: "firefox"
+  }
+};

src/color-schemes.ts

@@ -0,0 +1,103 @@
+import HSL from "./hsl"
+
+abstract class Scheme {
+    protected primary: HSL
+    protected constructor(initial: number) {
+        this.primary = HSL.fromHex(initial)
+    }
+
+    colors: number[]
+}
+
+export class Analogous extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        const left1 = new HSL(this.primary.hue - 60, this.primary.saturation, this.primary.lightness)
+        const left2 = new HSL(this.primary.hue - 30, this.primary.saturation, this.primary.lightness)
+        const right1 = new HSL(this.primary.hue + 30, this.primary.saturation, this.primary.lightness)
+        const right2 = new HSL(this.primary.hue + 60, this.primary.saturation, this.primary.lightness)
+
+        this.colors = [
+            left1.toHex(),
+            left2.toHex(),
+            initial,
+            right1.toHex(),
+            right2.toHex()
+        ]
+    }
+}
+
+export class Monochromatic extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        const delta = this.primary.lightness / 6
+        this.colors = [
+            initial,
+            new HSL(this.primary.hue, this.primary.saturation, this.primary.lightness - delta).toHex(),
+            new HSL(this.primary.hue, this.primary.saturation, this.primary.lightness - delta * 2).toHex(),
+            new HSL(this.primary.hue, this.primary.saturation, this.primary.lightness - delta * 3).toHex(),
+            new HSL(this.primary.hue, this.primary.saturation, this.primary.lightness - delta * 4).toHex()
+        ]
+    }
+}
+
+export class SplitComplementary extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        const complement = new HSL((this.primary.hue + 180) % 360, this.primary.saturation, this.primary.lightness)
+        this.colors = [
+            initial,
+            new HSL(complement.hue - 30, complement.saturation, complement.lightness).toHex(),
+            new HSL(complement.hue + 30, complement.saturation, complement.lightness).toHex()
+        ]
+    }
+}
+
+export class Triadic extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        this.colors = [
+            initial,
+            new HSL(this.primary.hue - 120, this.primary.saturation, this.primary.lightness).toHex(),
+            new HSL(this.primary.hue + 120, this.primary.saturation, this.primary.lightness).toHex()
+        ]
+    }
+}
+
+export class Tetradic extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        const second = new HSL(this.primary.hue + 45, this.primary.saturation, this.primary.lightness)
+        const complement = new HSL(this.primary.hue + 180, this.primary.saturation, this.primary.lightness)
+        const secondComplement = new HSL(second.hue + 180, this.primary.saturation, this.primary.lightness)
+
+        this.colors = [
+            initial,
+            second.toHex(),
+            complement.toHex(),
+            secondComplement.toHex()
+        ]
+    }
+}
+
+export class Square extends Scheme {
+    constructor(initial: number) {
+        super(initial)
+
+        const second = new HSL(this.primary.hue + 90, this.primary.saturation, this.primary.lightness)
+        const third = new HSL(this.primary.hue + 180, this.primary.saturation, this.primary.lightness)
+        const fourth = new HSL(second.hue + 270, this.primary.saturation, this.primary.lightness)
+
+        this.colors = [
+            initial,
+            second.toHex(),
+            third.toHex(),
+            fourth.toHex()
+        ]
+    }
+}

src/crack.ts

@@ -2,15 +2,15 @@ import SandPainter from "./sand-painter"
 import State from "./state"
 
 export default class Crack {
-    private x: number = 0
-    private y: number = 0
-    private angle: number = 0
+    x: number = 0
+    y: number = 0
+    angle: number = 0
+    readonly state: State
     private painter: SandPainter
-    private state: State
 
     constructor(state: State, x: number, y: number, angle: number) {
-        this.painter = new SandPainter(state.getRandomColor())
         this.state = state
+        this.painter = new SandPainter(this)
         this.start(x, y, angle)
     }
 
@@ -25,9 +25,13 @@ export default class Crack {
         this.x += .42 * Math.cos(this.angle * Math.PI / 180)
         this.y += .42 * Math.sin(this.angle * Math.PI / 180)
 
+        const fuzzX = this.x + (Math.random() * .66 - .33)
+        const fuzzY = this.y + (Math.random() * .66 - .33)
+
         const context = this.state.canvas.getContext("2d")
         context.fillStyle = "#000"
-        context.fillRect(this.x, this.y, 1, 1)
+        context.fillRect(fuzzX, fuzzY, 1, 1)
+        this.painter.render()
 
         const x = Math.floor(this.x)
         const y = Math.floor(this.y)

src/hsl.ts

@@ -0,0 +1,40 @@
+import RGB from "./rgb"
+
+export default class HSL {
+    hue: number
+    saturation: number
+    lightness: number
+
+    constructor(hue: number, saturation: number, lightness: number) {
+        this.hue = (hue + 360) % 360
+        this.saturation = saturation
+        this.lightness = lightness
+    }
+
+    // https://en.wikipedia.org/wiki/RGB_color_model
+    public static fromRgb(rgb: RGB) {
+        const redValue = rgb.red / 255,
+            greenValue = rgb.green / 255,
+            blueValue = rgb.blue / 255,
+            lightness = (redValue + greenValue + blueValue) / 3,
+            saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue)
+
+        const dividend = (redValue - greenValue) + (redValue - blueValue)
+        const divisor = 2 * Math.sqrt((redValue - greenValue) ^ 2 + (redValue - blueValue) * (greenValue - blueValue))
+        let hue = (1 / Math.cos(dividend / divisor))
+        if (greenValue > blueValue) hue = 360 - hue
+
+        return new HSL(hue, saturation, lightness)
+    }
+
+    public static fromHex(color: number): HSL {
+        const red = color >> 16
+        const green = (color - (red << 16)) >> 8
+        const blue = color - (red << 16) - (green << 8)
+        return HSL.fromRgb(new RGB(red, green, blue))
+    }
+
+    public toHex(): number {
+        return RGB.fromHsl(this).toHex()
+    }
+}

src/rgb.ts

@@ -1,32 +1,6 @@
-export class HSL {
-    hue: number
-    saturation: number
-    lightness: number
+import HSL from "./hsl"
 
-    constructor(hue: number, saturation: number, lightness: number) {
-        this.hue = hue
-        this.saturation = saturation
-        this.lightness = lightness
-    }
-
-    // https://en.wikipedia.org/wiki/RGB_color_model
-    public static fromRgb(rgb: RGB) {
-        const redValue = rgb.red / 255,
-            greenValue = rgb.green / 255,
-            blueValue = rgb.blue / 255,
-            lightness = (redValue + greenValue + blueValue) / 3,
-            saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue)
-
-        const dividend = (redValue - greenValue) + (redValue - blueValue)
-        const divisor = 2 * Math.sqrt((redValue - greenValue) ^ 2 + (redValue - blueValue) * (greenValue - blueValue))
-        let hue = (1 / Math.cos(dividend / divisor))
-        if (greenValue > blueValue) hue = 360 - hue
-
-        return new HSL(hue, saturation, lightness)
-    }
-}
-
-export class RGB {
+export default class RGB {
     red: number
     green: number
     blue: number
@@ -37,6 +11,10 @@ export class RGB {
         this.blue = blue
     }
 
+    toHex(): number {
+        return this.red << 16 + this.green << 8 + this.blue
+    }
+
     // https://en.wikipedia.org/wiki/HSL_and_HSV
     public static fromHsl(hsl: HSL): RGB {
         let red = 0,
@@ -71,13 +49,4 @@ export class RGB {
 
         return new RGB((red + match) * 255, (green + match) * 255, (blue + match) * 255)
     }
-}
-
-export enum Schemes {
-    Analogous,
-    Monochromatic,
-    SplitComplementary,
-    Triadic,
-    Tetradic,
-    Square
 }

src/sand-painter.ts

@@ -1,16 +1,20 @@
-import State from "./state"
+import Crack from "./crack"
 
 export default class SandPainter {
+    private crack: Crack
     private color: number
     private gain: number
 
-    constructor(color: number) {
-        this.color = color
+    constructor(crack: Crack) {
+        this.crack = crack
+        this.color = this.crack.state.getRandomColor()
         this.gain = Math.random() / 10
     }
 
-    render(x: number, y: number, angle: number, state: State) {
+    render() {
+        const state = this.crack.state, x = this.crack.x, y = this.crack.y, angle = this.crack.angle
         let open = true, endX = x, endY = y
+
         while (open) {
             endX += .81 * Math.sin(angle * Math.PI / 180)
             endY -= .81 * Math.cos(angle * Math.PI / 180)
@@ -24,14 +28,20 @@ export default class SandPainter {
             }
         }
 
+        this.gain += (Math.random() / 10 - .05)
+        if (this.gain < 0) this.gain = 0
+        if (this.gain > 1) this.gain = 1
+
         const grains = 64
         const hex = this.color.toString(16)
         const w = this.gain / (grains - 1) // some kind of multiplier
         const context = state.canvas.getContext("2d")
         for (let i = 0; i < grains; i++) {
-            const alpha = (.1 - i / (grains * 10)) * 255
+            const alpha = Math.floor((.1 - i / (grains * 10)) * 255)
+            const paintX = x + (endX - x) * Math.sin(Math.sin(i * w))
+            const paintY = y + (endY - y) * Math.sin(Math.sin(i * w))
             context.fillStyle = `#${hex.padStart(6, "0")}${alpha.toString(16).padStart(2, "0")}`
-
+            context.fillRect(paintX, paintY, 1, 1)
         }
     }
 }

src/state.ts

@@ -2,7 +2,7 @@ import Crack from "./crack"
 
 export default class State {
     readonly canvas: HTMLCanvasElement
-    readonly colors: number[]
+    colors: number[]
     readonly maxCracks: number
     readonly grid: number[][]
     seeds: {x: number, y: number}[]
@@ -19,7 +19,8 @@ export default class State {
         this.init()
     }
 
-    init() {
+    init(colors?: number[]) {
+        if (colors) this.colors = colors
         this.cracks.length = 0
         this.grid.length = 0
         this.seeds.length = 0

src/substrate.ts

@@ -1,5 +1,6 @@
 // TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me
 import State from "./state"
+import {Analogous, Monochromatic, SplitComplementary, Square, Tetradic, Triadic} from "./color-schemes"
 
 export default class Substrate {
     private readonly state: State
@@ -23,7 +24,25 @@ export default class Substrate {
             requestAnimationFrame(draw)
         }
 
-        setInterval(() => me.state.init(), 120 * 1000)
+        setInterval(() => me.state.init(me.getRandomColorScheme()), 30 * 1000)
         draw()
     }
+
+    getRandomColorScheme(): number[] {
+        const color = Math.floor(Math.random() * Math.pow(256, 3))
+        switch (Math.floor(Math.random() * 6)) {
+            case 1:
+                return new Monochromatic(color).colors
+            case 2:
+                return new SplitComplementary(color).colors
+            case 3:
+                return new Triadic(color).colors
+            case 4:
+                return new Tetradic(color).colors
+            case 5:
+                return new Square(color).colors
+            default:
+                return new Analogous(color).colors
+        }
+    }
 }

webpack-test.config.js

@@ -0,0 +1,23 @@
+const path = require("path");
+const glob = require("glob");
+
+module.exports = {
+    entry: glob.sync("spec/**/*Spec.js?(x)"),
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: "ts-loader",
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        modules: [__dirname, "src", "node_modules"],
+        extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
+    },
+    output: {
+        filename: "test.js",
+        path: path.resolve(__dirname, "www"),
+    },
+};

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
     resolve: {
         extensions: [".tsx", ".ts", ".js"],
     },
+    devtool: "source-map",
     output: {
         filename: "main.js",
         path: path.resolve(__dirname, "www"),

www/main.js

@@ -1,32 +1,320 @@
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
 /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./src/color-schemes.ts":
+/*!******************************!*\
+  !*** ./src/color-schemes.ts ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Analogous: () => (/* binding */ Analogous),
+/* harmony export */   Monochromatic: () => (/* binding */ Monochromatic),
+/* harmony export */   SplitComplementary: () => (/* binding */ SplitComplementary),
+/* harmony export */   Square: () => (/* binding */ Square),
+/* harmony export */   Tetradic: () => (/* binding */ Tetradic),
+/* harmony export */   Triadic: () => (/* binding */ Triadic)
+/* harmony export */ });
+/* harmony import */ var _hsl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hsl */ "./src/hsl.ts");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+/*
+export enum Scheme {
+    Analogous,
+    Monochromatic,
+    SplitComplementary,
+    Triadic,
+    Tetradic,
+    Square
+}
+*/
+var Scheme = /** @class */ (function () {
+    function Scheme(initial) {
+        this.primary = _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL.fromHex(initial);
+    }
+    return Scheme;
+}());
+var Analogous = /** @class */ (function (_super) {
+    __extends(Analogous, _super);
+    function Analogous(initial) {
+        var _this = _super.call(this, initial) || this;
+        var left1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 60, _this.primary.saturation, _this.primary.lightness);
+        var left2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 30, _this.primary.saturation, _this.primary.lightness);
+        var right1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 30, _this.primary.saturation, _this.primary.lightness);
+        var right2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 60, _this.primary.saturation, _this.primary.lightness);
+        _this.colors = [
+            left1.toHex(),
+            left2.toHex(),
+            initial,
+            right1.toHex(),
+            right2.toHex()
+        ];
+        return _this;
+    }
+    return Analogous;
+}(Scheme));
+
+var Monochromatic = /** @class */ (function (_super) {
+    __extends(Monochromatic, _super);
+    function Monochromatic(initial) {
+        var _this = _super.call(this, initial) || this;
+        var delta = _this.primary.lightness / 6;
+        _this.colors = [
+            initial,
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta).toHex(),
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 2).toHex(),
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 3).toHex(),
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 4).toHex()
+        ];
+        return _this;
+    }
+    return Monochromatic;
+}(Scheme));
+
+var SplitComplementary = /** @class */ (function (_super) {
+    __extends(SplitComplementary, _super);
+    function SplitComplementary(initial) {
+        var _this = _super.call(this, initial) || this;
+        var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL((_this.primary.hue + 180) % 360, _this.primary.saturation, _this.primary.lightness);
+        _this.colors = [
+            initial,
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(complement.hue - 30, complement.saturation, complement.lightness).toHex(),
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(complement.hue + 30, complement.saturation, complement.lightness).toHex()
+        ];
+        return _this;
+    }
+    return SplitComplementary;
+}(Scheme));
+
+var Triadic = /** @class */ (function (_super) {
+    __extends(Triadic, _super);
+    function Triadic(initial) {
+        var _this = _super.call(this, initial) || this;
+        _this.colors = [
+            initial,
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 120, _this.primary.saturation, _this.primary.lightness).toHex(),
+            new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 120, _this.primary.saturation, _this.primary.lightness).toHex()
+        ];
+        return _this;
+    }
+    return Triadic;
+}(Scheme));
+
+var Tetradic = /** @class */ (function (_super) {
+    __extends(Tetradic, _super);
+    function Tetradic(initial) {
+        var _this = _super.call(this, initial) || this;
+        var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 45, _this.primary.saturation, _this.primary.lightness);
+        var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
+        var secondComplement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(second.hue + 180, _this.primary.saturation, _this.primary.lightness);
+        _this.colors = [
+            initial,
+            second.toHex(),
+            complement.toHex(),
+            secondComplement.toHex()
+        ];
+        return _this;
+    }
+    return Tetradic;
+}(Scheme));
+
+var Square = /** @class */ (function (_super) {
+    __extends(Square, _super);
+    function Square(initial) {
+        var _this = _super.call(this, initial) || this;
+        var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 90, _this.primary.saturation, _this.primary.lightness);
+        var third = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
+        var fourth = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(second.hue + 270, _this.primary.saturation, _this.primary.lightness);
+        _this.colors = [
+            initial,
+            second.toHex(),
+            third.toHex(),
+            fourth.toHex()
+        ];
+        return _this;
+    }
+    return Square;
+}(Scheme));
+
+
+
+/***/ }),
+
 /***/ "./src/crack.ts":
 /*!**********************!*\
   !*** ./src/crack.ts ***!
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _sand_painter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sand-painter */ \"./src/sand-painter.ts\");\n\nvar Crack = /** @class */ (function () {\n    function Crack(state, x, y, angle) {\n        this.x = 0;\n        this.y = 0;\n        this.angle = 0;\n        this.painter = new _sand_painter__WEBPACK_IMPORTED_MODULE_0__[\"default\"](state.getRandomColor());\n        this.state = state;\n        this.start(x, y, angle);\n    }\n    Crack.prototype.start = function (x, y, angle) {\n        this.x = x + .61 * Math.cos(angle * Math.PI / 180);\n        this.y = y + .61 * Math.sin(angle * Math.PI / 180);\n        var flip = Math.random() < 0.5;\n        this.angle = angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1);\n    };\n    Crack.prototype.draw = function () {\n        this.x += .42 * Math.cos(this.angle * Math.PI / 180);\n        this.y += .42 * Math.sin(this.angle * Math.PI / 180);\n        var context = this.state.canvas.getContext(\"2d\");\n        context.fillStyle = \"#000\";\n        context.fillRect(this.x, this.y, 1, 1);\n        var x = Math.floor(this.x);\n        var y = Math.floor(this.y);\n        if (this.state.isWithinBoundary(x, y)) {\n            var angle = this.state.grid[x][y];\n            if (angle > 10000) {\n                this.state.grid[x][y] = Math.floor(this.angle);\n                this.state.seeds.push({ x: x, y: y });\n            }\n            else if (this.state.grid[x][y] != Math.floor(this.angle)) {\n                var entry = this.state.getNewEntry();\n                this.start(entry.x, entry.y, entry.angle);\n            }\n        }\n        else {\n            var entry = this.state.getNewEntry();\n            this.start(entry.x, entry.y, entry.angle);\n            this.state.addCrack();\n        }\n    };\n    return Crack;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Crack);\n\n\n//# sourceURL=webpack:///./src/crack.ts?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _sand_painter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sand-painter */ "./src/sand-painter.ts");
+
+var Crack = /** @class */ (function () {
+    function Crack(state, x, y, angle) {
+        this.x = 0;
+        this.y = 0;
+        this.angle = 0;
+        this.state = state;
+        this.painter = new _sand_painter__WEBPACK_IMPORTED_MODULE_0__["default"](this);
+        this.start(x, y, angle);
+    }
+    Crack.prototype.start = function (x, y, angle) {
+        this.x = x + .61 * Math.cos(angle * Math.PI / 180);
+        this.y = y + .61 * Math.sin(angle * Math.PI / 180);
+        var flip = Math.random() < 0.5;
+        this.angle = angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1);
+    };
+    Crack.prototype.draw = function () {
+        this.x += .42 * Math.cos(this.angle * Math.PI / 180);
+        this.y += .42 * Math.sin(this.angle * Math.PI / 180);
+        var fuzzX = this.x + (Math.random() * .66 - .33);
+        var fuzzY = this.y + (Math.random() * .66 - .33);
+        var context = this.state.canvas.getContext("2d");
+        context.fillStyle = "#000";
+        context.fillRect(fuzzX, fuzzY, 1, 1);
+        this.painter.render();
+        var x = Math.floor(this.x);
+        var y = Math.floor(this.y);
+        if (this.state.isWithinBoundary(x, y)) {
+            var angle = this.state.grid[x][y];
+            if (angle > 10000) {
+                this.state.grid[x][y] = Math.floor(this.angle);
+                this.state.seeds.push({ x: x, y: y });
+            }
+            else if (this.state.grid[x][y] != Math.floor(this.angle)) {
+                var entry = this.state.getNewEntry();
+                this.start(entry.x, entry.y, entry.angle);
+            }
+        }
+        else {
+            var entry = this.state.getNewEntry();
+            this.start(entry.x, entry.y, entry.angle);
+            this.state.addCrack();
+        }
+    };
+    return Crack;
+}());
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Crack);
+
 
 /***/ }),
 
-/***/ "./src/launch.ts":
-/*!***********************!*\
-  !*** ./src/launch.ts ***!
-  \***********************/
+/***/ "./src/hsl.ts":
+/*!********************!*\
+  !*** ./src/hsl.ts ***!
+  \********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _substrate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./substrate */ \"./src/substrate.ts\");\n\nvar ready = function (func) { return document.readyState !== \"loading\" ? func() : document.addEventListener(\"DOMContentLoaded\", func); };\nready(function () {\n    new _substrate__WEBPACK_IMPORTED_MODULE_0__[\"default\"](20);\n});\n/*\nlet weather: Weather\nnavigator.geolocation.getCurrentPosition(position => {\n    weather = new Weather(position.coords.latitude, position.coords.longitude)\n}, () => {\n    weather = new Weather()\n})\n */ \n\n\n//# sourceURL=webpack:///./src/launch.ts?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   HSL: () => (/* binding */ HSL)
+/* harmony export */ });
+/* harmony import */ var _rgb__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./rgb */ "./src/rgb.ts");
+
+var HSL = /** @class */ (function () {
+    function HSL(hue, saturation, lightness) {
+        this.hue = (hue + 360) % 360;
+        this.saturation = saturation;
+        this.lightness = lightness;
+    }
+    // https://en.wikipedia.org/wiki/RGB_color_model
+    HSL.fromRgb = function (rgb) {
+        var redValue = rgb.red / 255, greenValue = rgb.green / 255, blueValue = rgb.blue / 255, lightness = (redValue + greenValue + blueValue) / 3, saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue);
+        var dividend = (redValue - greenValue) + (redValue - blueValue);
+        var divisor = 2 * Math.sqrt((redValue - greenValue) ^ 2 + (redValue - blueValue) * (greenValue - blueValue));
+        var hue = (1 / Math.cos(dividend / divisor));
+        if (greenValue > blueValue)
+            hue = 360 - hue;
+        return new HSL(hue, saturation, lightness);
+    };
+    HSL.fromHex = function (color) {
+        var red = color >> 16;
+        var green = (color - (red << 16)) >> 8;
+        var blue = color - (red << 16) - (green << 8);
+        return HSL.fromRgb(new _rgb__WEBPACK_IMPORTED_MODULE_0__.RGB(red, green, blue));
+    };
+    HSL.prototype.toHex = function () {
+        return _rgb__WEBPACK_IMPORTED_MODULE_0__.RGB.fromHsl(this).toHex();
+    };
+    return HSL;
+}());
+
+
+
+/***/ }),
+
+/***/ "./src/rgb.ts":
+/*!********************!*\
+  !*** ./src/rgb.ts ***!
+  \********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   RGB: () => (/* binding */ RGB)
+/* harmony export */ });
+var RGB = /** @class */ (function () {
+    function RGB(red, green, blue) {
+        this.red = red;
+        this.green = green;
+        this.blue = blue;
+    }
+    RGB.prototype.toHex = function () {
+        return this.red << 16 + this.green << 8 + this.blue;
+    };
+    // https://en.wikipedia.org/wiki/HSL_and_HSV
+    RGB.fromHsl = function (hsl) {
+        var red = 0, green = 0, blue = 0;
+        var saturationValue = hsl.saturation / 100, lightnessValue = hsl.lightness / 100, chroma = 1 - Math.abs(2 * hsl.lightness - 1) * saturationValue, range = hsl.hue / 60, intermediate = chroma * (1 - Math.abs(range % 2 - 1)), match = lightnessValue - chroma / 2;
+        if (range >= 0 && range < 1) {
+            red = chroma;
+            green = intermediate;
+        }
+        else if (range >= 1 && range < 2) {
+            red = intermediate;
+            green = chroma;
+        }
+        else if (range >= 2 && range < 3) {
+            green = chroma;
+            blue = intermediate;
+        }
+        else if (range >= 3 && range < 4) {
+            green = intermediate;
+            blue = chroma;
+        }
+        else if (range >= 4 && range < 5) {
+            red = intermediate;
+            blue = chroma;
+        }
+        else if (range >= 5 && range < 6) {
+            red = chroma;
+            blue = intermediate;
+        }
+        return new RGB((red + match) * 255, (green + match) * 255, (blue + match) * 255);
+    };
+    return RGB;
+}());
+
+
 
 /***/ }),
 
@@ -36,7 +324,52 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sub
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar SandPainter = /** @class */ (function () {\n    function SandPainter(color) {\n        this.color = color;\n        this.gain = Math.random() / 10;\n    }\n    SandPainter.prototype.render = function (x, y, angle, state) {\n        var open = true, endX = x, endY = y;\n        while (open) {\n            endX += .81 * Math.sin(angle * Math.PI / 180);\n            endY -= .81 * Math.cos(angle * Math.PI / 180);\n            var gridX = Math.floor(endX);\n            var gridY = Math.floor(endY);\n            if (state.isWithinBoundary(gridX, gridY)) {\n                open = state.grid[gridX][gridY] > 10000;\n            }\n            else {\n                open = false;\n            }\n        }\n        var grains = 64;\n        var hex = this.color.toString(16);\n        var w = this.gain / (grains - 1);\n        var context = state.canvas.getContext(\"2d\");\n        for (var i = 0; i < grains; i++) {\n            var alpha = .1 - i / (grains * 10);\n            context.fillStyle = \"\";\n        }\n    };\n    return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sand-painter.ts?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var SandPainter = /** @class */ (function () {
+    function SandPainter(crack) {
+        this.crack = crack;
+        this.color = this.crack.state.getRandomColor();
+        this.gain = Math.random() / 10;
+    }
+    SandPainter.prototype.render = function () {
+        var state = this.crack.state, x = this.crack.x, y = this.crack.y, angle = this.crack.angle;
+        var open = true, endX = x, endY = y;
+        while (open) {
+            endX += .81 * Math.sin(angle * Math.PI / 180);
+            endY -= .81 * Math.cos(angle * Math.PI / 180);
+            var gridX = Math.floor(endX);
+            var gridY = Math.floor(endY);
+            if (state.isWithinBoundary(gridX, gridY)) {
+                open = state.grid[gridX][gridY] > 10000;
+            }
+            else {
+                open = false;
+            }
+        }
+        this.gain += (Math.random() / 10 - .05);
+        if (this.gain < 0)
+            this.gain = 0;
+        if (this.gain > 1)
+            this.gain = 1;
+        var grains = 64;
+        var hex = this.color.toString(16);
+        var w = this.gain / (grains - 1); // some kind of multiplier
+        var context = state.canvas.getContext("2d");
+        for (var i = 0; i < grains; i++) {
+            var alpha = Math.floor((.1 - i / (grains * 10)) * 255);
+            var paintX = x + (endX - x) * Math.sin(Math.sin(i * w));
+            var paintY = y + (endY - y) * Math.sin(Math.sin(i * w));
+            context.fillStyle = "#".concat(hex.padStart(6, "0")).concat(alpha.toString(16).padStart(2, "0"));
+            context.fillRect(paintX, paintY, 1, 1);
+        }
+    };
+    return SandPainter;
+}());
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);
+
 
 /***/ }),
 
@@ -46,7 +379,82 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _crack__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./crack */ \"./src/crack.ts\");\n\nvar State = /** @class */ (function () {\n    function State(colors, maxCracks, canvas) {\n        this.canvas = canvas;\n        this.colors = colors;\n        this.maxCracks = maxCracks;\n        this.grid = [];\n        this.cracks = [];\n        this.seeds = [];\n        this.init();\n    }\n    State.prototype.init = function () {\n        this.cracks.length = 0;\n        this.grid.length = 0;\n        this.seeds.length = 0;\n        var height = this.canvas.height;\n        var width = this.canvas.width;\n        var context = this.canvas.getContext(\"2d\");\n        context.fillStyle = \"rgb(255 255 255 / 95%)\";\n        context.fillRect(0, 0, width, height);\n        for (var x = 0; x < width; x++) {\n            this.grid[x] = [];\n            for (var y = 0; y < height; y++) {\n                this.grid[x][y] = 10001;\n            }\n        }\n        for (var i = 0; i < 3; i++) {\n            var x = Math.floor(Math.random() * width);\n            var y = Math.floor(Math.random() * height);\n            var angle = Math.floor(Math.random() * 360);\n            this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this, x, y, angle));\n            this.grid[x][y] = angle;\n        }\n    };\n    State.prototype.addCrack = function () {\n        if (this.cracks.length >= this.maxCracks)\n            return;\n        var _a = this.getNewEntry(), x = _a.x, y = _a.y, angle = _a.angle;\n        this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this, x, y, angle));\n    };\n    State.prototype.getRandomColor = function () {\n        return this.colors[Math.floor(Math.random() * this.colors.length)];\n    };\n    State.prototype.isWithinBoundary = function (x, y) {\n        return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height;\n    };\n    State.prototype.getNewEntry = function () {\n        if (!this.seeds.length) {\n            var x = Math.floor(Math.random() * this.canvas.width);\n            var y = Math.floor(Math.random() * this.canvas.height);\n            var angle = this.grid[x][y];\n            if (angle > 10000) {\n                angle = Math.floor(Math.random() * 360);\n                this.grid[x][y] = angle;\n            }\n            return { x: x, y: y, angle: angle };\n        }\n        var randomIndex = Math.floor(Math.random() * this.seeds.length);\n        var entry = this.seeds.splice(randomIndex, 1)[0];\n        return {\n            x: entry.x,\n            y: entry.y,\n            angle: this.grid[entry.x][entry.y]\n        };\n    };\n    return State;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (State);\n\n\n//# sourceURL=webpack:///./src/state.ts?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _crack__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./crack */ "./src/crack.ts");
+
+var State = /** @class */ (function () {
+    function State(colors, maxCracks, canvas) {
+        this.canvas = canvas;
+        this.colors = colors;
+        this.maxCracks = maxCracks;
+        this.grid = [];
+        this.cracks = [];
+        this.seeds = [];
+        this.init();
+    }
+    State.prototype.init = function (colors) {
+        if (colors)
+            this.colors = colors;
+        this.cracks.length = 0;
+        this.grid.length = 0;
+        this.seeds.length = 0;
+        var height = this.canvas.height;
+        var width = this.canvas.width;
+        var context = this.canvas.getContext("2d");
+        context.fillStyle = "rgb(255 255 255 / 95%)";
+        context.fillRect(0, 0, width, height);
+        for (var x = 0; x < width; x++) {
+            this.grid[x] = [];
+            for (var y = 0; y < height; y++) {
+                this.grid[x][y] = 10001;
+            }
+        }
+        for (var i = 0; i < 3; i++) {
+            var x = Math.floor(Math.random() * width);
+            var y = Math.floor(Math.random() * height);
+            var angle = Math.floor(Math.random() * 360);
+            this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__["default"](this, x, y, angle));
+            this.grid[x][y] = angle;
+        }
+    };
+    State.prototype.addCrack = function () {
+        if (this.cracks.length >= this.maxCracks)
+            return;
+        var _a = this.getNewEntry(), x = _a.x, y = _a.y, angle = _a.angle;
+        this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__["default"](this, x, y, angle));
+    };
+    State.prototype.getRandomColor = function () {
+        return this.colors[Math.floor(Math.random() * this.colors.length)];
+    };
+    State.prototype.isWithinBoundary = function (x, y) {
+        return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height;
+    };
+    State.prototype.getNewEntry = function () {
+        if (!this.seeds.length) {
+            var x = Math.floor(Math.random() * this.canvas.width);
+            var y = Math.floor(Math.random() * this.canvas.height);
+            var angle = this.grid[x][y];
+            if (angle > 10000) {
+                angle = Math.floor(Math.random() * 360);
+                this.grid[x][y] = angle;
+            }
+            return { x: x, y: y, angle: angle };
+        }
+        var randomIndex = Math.floor(Math.random() * this.seeds.length);
+        var entry = this.seeds.splice(randomIndex, 1)[0];
+        return {
+            x: entry.x,
+            y: entry.y,
+            angle: this.grid[entry.x][entry.y]
+        };
+    };
+    return State;
+}());
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (State);
+
 
 /***/ }),
 
@@ -56,7 +464,59 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./state */ \"./src/state.ts\");\n// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me\n\nvar Substrate = /** @class */ (function () {\n    function Substrate(maxCracks, colors) {\n        if (!(colors === null || colors === void 0 ? void 0 : colors.length))\n            colors = [0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e]; // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7\n        var canvas = document.createElement(\"canvas\");\n        canvas.width = document.body.clientWidth;\n        canvas.height = document.body.clientHeight;\n        document.body.appendChild(canvas);\n        this.state = new _state__WEBPACK_IMPORTED_MODULE_0__[\"default\"](colors, maxCracks, canvas);\n        this.init();\n    }\n    Substrate.prototype.init = function () {\n        var me = this;\n        var draw = function () {\n            for (var _i = 0, _a = me.state.cracks; _i < _a.length; _i++) {\n                var crack = _a[_i];\n                crack.draw();\n            }\n            requestAnimationFrame(draw);\n        };\n        setInterval(function () { return me.state.init(); }, 120 * 1000);\n        draw();\n    };\n    return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./state */ "./src/state.ts");
+/* harmony import */ var _color_schemes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./color-schemes */ "./src/color-schemes.ts");
+// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me
+
+
+var Substrate = /** @class */ (function () {
+    function Substrate(maxCracks, colors) {
+        if (!(colors === null || colors === void 0 ? void 0 : colors.length))
+            colors = [0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e]; // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7
+        var canvas = document.createElement("canvas");
+        canvas.width = document.body.clientWidth;
+        canvas.height = document.body.clientHeight;
+        document.body.appendChild(canvas);
+        this.state = new _state__WEBPACK_IMPORTED_MODULE_0__["default"](colors, maxCracks, canvas);
+        this.init();
+    }
+    Substrate.prototype.init = function () {
+        var me = this;
+        var draw = function () {
+            for (var _i = 0, _a = me.state.cracks; _i < _a.length; _i++) {
+                var crack = _a[_i];
+                crack.draw();
+            }
+            requestAnimationFrame(draw);
+        };
+        setInterval(function () { return me.state.init(me.getRandomColorScheme()); }, 30 * 1000);
+        draw();
+    };
+    Substrate.prototype.getRandomColorScheme = function () {
+        var color = Math.floor(Math.random() * Math.pow(256, 3));
+        switch (Math.floor(Math.random() * 6)) {
+            case 1:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Monochromatic(color).colors;
+            case 2:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.SplitComplementary(color).colors;
+            case 3:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Triadic(color).colors;
+            case 4:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Tetradic(color).colors;
+            case 5:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Square(color).colors;
+            default:
+                return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Analogous(color).colors;
+        }
+    };
+    return Substrate;
+}());
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);
+
 
 /***/ })
 
@@ -116,11 +576,30 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	})();
 /******/ 	
 /************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval devtool is used.
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/launch.ts");
-/******/ 	
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+/*!***********************!*\
+  !*** ./src/launch.ts ***!
+  \***********************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _substrate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./substrate */ "./src/substrate.ts");
+
+var ready = function (func) { return document.readyState !== "loading" ? func() : document.addEventListener("DOMContentLoaded", func); };
+ready(function () {
+    new _substrate__WEBPACK_IMPORTED_MODULE_0__["default"](20);
+});
+/*
+let weather: Weather
+navigator.geolocation.getCurrentPosition(position => {
+    weather = new Weather(position.coords.latitude, position.coords.longitude)
+}, () => {
+    weather = new Weather()
+})
+ */ 
+
+})();
+
 /******/ })()
-;
+;
+//# sourceMappingURL=main.js.map