lani/fxl.codes.Weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Whoo got unit tests that are failing...

Browse Source
This commit is contained in:
Lani Aung
2025-06-07 15:26:51 -07:00
parent 5e9039efad
commit 44053555ec
15 changed files with 2472 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/main.js
+503 -24
View File
@@ -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