/******/ (() => { // 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 */ Scheme: () => (/* binding */ Scheme), /* 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 __()); }; })(); var Scheme = /** @class */ (function () { function Scheme(initial) { this.primary = _hsl__WEBPACK_IMPORTED_MODULE_0__["default"].fromHex(initial); } Scheme.prototype.toString = function () { var values = this.colors.map(function (color) { return color.toString(16); }).join(","); return "".concat(this.constructor.name, ": ").concat(values); }; 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__["default"](_this.primary.hue - 30, _this.primary.saturation, _this.primary.lightness); var left2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue - 15, _this.primary.saturation, _this.primary.lightness); var right1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 15, _this.primary.saturation, _this.primary.lightness); var right2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 30, _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__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta).toHex(), new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 2).toHex(), new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 3).toHex(), new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_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__["default"]((_this.primary.hue + 180) % 360, _this.primary.saturation, _this.primary.lightness); _this.colors = [ initial, new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](complement.hue - 30, complement.saturation, complement.lightness).toHex(), new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](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__["default"](_this.primary.hue - 120, _this.primary.saturation, _this.primary.lightness).toHex(), new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_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__["default"](_this.primary.hue + 45, _this.primary.saturation, _this.primary.lightness); var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness); var secondComplement = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](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__["default"](_this.primary.hue + 90, _this.primary.saturation, _this.primary.lightness); var third = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness); var fourth = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](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__) => { __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/hsl.ts": /*!********************!*\ !*** ./src/hsl.ts ***! \********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* 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/HSL_and_HSV HSL.fromRgb = function (rgb) { var redValue = rgb.red / 255, greenValue = rgb.green / 255, blueValue = rgb.blue / 255, max = Math.max(redValue, greenValue, blueValue), min = Math.min(redValue, greenValue, blueValue), chroma = max - min, lightness = .5 * (max + min), saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue); var huePrime = 0; if (chroma != 0) { if (redValue == max) huePrime = ((greenValue - blueValue) / chroma) % 6; else if (greenValue == max) huePrime = ((blueValue - redValue) / chroma) + 2; else huePrime = ((redValue - greenValue) / chroma) + 4; } return new HSL(huePrime * 60, saturation, lightness); }; HSL.fromHex = function (color) { return HSL.fromRgb(_rgb__WEBPACK_IMPORTED_MODULE_0__["default"].fromHex(color)); }; HSL.prototype.toHex = function () { return _rgb__WEBPACK_IMPORTED_MODULE_0__["default"].fromHsl(this).toHex(); }; return HSL; }()); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (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 */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); var RGB = /** @class */ (function () { function RGB(red, green, blue) { this.red = Math.floor(red < 0 ? 0 : red > 255 ? 255 : red); this.green = Math.floor(green < 0 ? 0 : green > 255 ? 255 : green); this.blue = Math.floor(blue < 0 ? 0 : blue > 255 ? 255 : 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 chroma = (1 - Math.abs(2 * hsl.lightness - 1)) * hsl.saturation, range = hsl.hue / 60, intermediate = chroma * (1 - Math.abs(range % 2 - 1)), match = hsl.lightness - 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); }; RGB.fromHex = function (color) { var red = color >> 16; var green = (color - (red << 16)) >> 8; var blue = color - (red << 16) - (green << 8); return new RGB(red, green, blue); }; return RGB; }()); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RGB); /***/ }), /***/ "./src/sand-painter.ts": /*!*****************************!*\ !*** ./src/sand-painter.ts ***! \*****************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __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.getNextColor(); 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); /***/ }), /***/ "./src/state.ts": /*!**********************!*\ !*** ./src/state.ts ***! \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __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.colorIndex = 0; this.canvas = canvas; this.maxCracks = maxCracks; this.grid = []; this.colors = colors; 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; this.colorIndex = 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.getNextColor = function () { return this.colors[this.colorIndex++ % 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); /***/ }), /***/ "./src/substrate.ts": /*!**************************!*\ !*** ./src/substrate.ts ***! \**************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __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()); }, 120 * 1000); draw(); }; Substrate.prototype.getRandomColorScheme = function () { var color = Math.floor(Math.random() * Math.pow(256, 3)); var scheme; switch (Math.floor(Math.random() * 6)) { case 1: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Monochromatic(color); break; case 2: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.SplitComplementary(color); break; case 3: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Triadic(color); break; case 4: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Tetradic(color); break; case 5: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Square(color); break; default: scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Analogous(color); } console.info(scheme.toString()); return scheme.colors; }; return Substrate; }()); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /************************************************************************/ 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