From ef5b289ff0363828fa44795bf4eba221e261bfa2 Mon Sep 17 00:00:00 2001 From: Lani Aung Date: Wed, 4 Jun 2025 19:22:19 -0700 Subject: [PATCH] WIP --- src/crack.ts | 48 +++++++++++++++++++ src/launch.ts | 2 +- src/{sandPainter.ts => sand-painter.ts} | 0 src/substrate.ts | 62 ++++--------------------- www/main.js | 6 +-- 5 files changed, 61 insertions(+), 57 deletions(-) create mode 100644 src/crack.ts rename src/{sandPainter.ts => sand-painter.ts} (100%) diff --git a/src/crack.ts b/src/crack.ts new file mode 100644 index 0000000..8a07422 --- /dev/null +++ b/src/crack.ts @@ -0,0 +1,48 @@ +import SandPainter from "./sand-painter" +import State from "./state" + +export default class Crack { + private static padding = .66 + private x: number = 0 + private y: number = 0 + private angle: number = 0 + private painter: SandPainter + private state: State + + constructor(state: State) { + this.painter = new SandPainter(state) + this.state = state + this.init() + } + + init() { + let x = 0, y = 0, found = false, tries = 0 + while (!found && tries++ < 1000) { + x = Math.random() * this.state.width + y = Math.random() * this.state.height + found = this.state.crackGrid[y * this.state.height + x] < 10000 + } + + if (!found) { + console.warn("Unable to start crack due to timeout") + return + } + + const negative = Math.random() < 0.5 + let value = this.state.crackGrid[y * this.state.height + x] + + if (negative) value -= 90 + Math.floor(Math.random() * 4.1 - 2) + else value += 90 + Math.floor(Math.random() * 4.1 - 2) + } + + start(x: number, y: number, angle: number) { + this.x = x + .61 * Math.cos(angle * Math.PI / 180) + this.y = y + .61 * Math.sin(angle * Math.PI / 180) + this.angle = angle + } + + continue() { + this.x += .42 * Math.cos(this.angle * Math.PI / 180) + this.y += .42 * Math.sin(this.angle * Math.PI / 180) + } +} \ No newline at end of file diff --git a/src/launch.ts b/src/launch.ts index f2f449a..b730bfc 100644 --- a/src/launch.ts +++ b/src/launch.ts @@ -1,5 +1,5 @@ import Substrate from "./substrate" -import Weather from "./weather"; +import Weather from "./weather" const background = new Substrate("substrate-canvas", 20) let weather: Weather diff --git a/src/sandPainter.ts b/src/sand-painter.ts similarity index 100% rename from src/sandPainter.ts rename to src/sand-painter.ts diff --git a/src/substrate.ts b/src/substrate.ts index a10195d..8ae06df 100644 --- a/src/substrate.ts +++ b/src/substrate.ts @@ -1,72 +1,28 @@ -// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02 +// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me import State from "./state" -import SandPainter from "./sandPainter" export default class Substrate { - private state: State + private readonly canvas: HTMLCanvasElement + private readonly state: State constructor(id: string, maxCracks: number, colors?: number[]) { if (!colors?.length) colors = [ 0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e ] // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7 - let canvas = document.getElementById(id) + let canvas = document.getElementById(id) as HTMLCanvasElement if (!canvas) { canvas = document.createElement("canvas") document.body.appendChild(canvas) } + this.canvas = canvas this.state = new State(colors, maxCracks, canvas.clientHeight, canvas.clientWidth) - } -} -class Crack { - private x: number = 0 - private y: number = 0 - private angle: number = 0 - private painter: SandPainter - private state: State - - constructor(state: State) { - this.painter = new SandPainter(state) - this.state = state this.init() } init() { - let x = 0, y = 0, found = false, tries = 0 - while (!found && tries++ < 1000) { - x = Math.random() * this.state.width - y = Math.random() * this.state.height - found = this.state.crackGrid[y * this.state.height + x] < 10000 - } - - if (!found) { - console.warn("Unable to start crack due to timeout") - return - } - - const negative = Math.random() < 0.5 - let value = this.state.crackGrid[y * this.state.height + x] - - if (negative) value -= 90 + Math.floor(Math.random() * 4.1 - 2) - else value += 90 + Math.floor(Math.random() * 4.1 - 2) + const context = this.canvas.getContext("2d") + context.fillStyle = "#fff" + context.fillRect(0, 0, this.canvas.width, this.canvas.height) } - - start(x: number, y: number, angle: number) { - this.x = x + .61 * Math.cos(angle * Math.PI / 180) - this.y = y + .61 * Math.sin(angle * Math.PI / 180) - this.angle = angle - } - - continue() { - this.x += .42 * Math.cos(this.angle * Math.PI / 180) - this.y += .42 * Math.sin(this.angle * Math.PI / 180) - } -} - -declare global { - interface Window { - main: Substrate - } -} - -window.main = new Substrate("substrate-canvas", 20) \ No newline at end of file +} \ No newline at end of file diff --git a/www/main.js b/www/main.js index 98b5e58..90dec4a 100644 --- a/www/main.js +++ b/www/main.js @@ -162,11 +162,11 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sub /***/ "./src/sandPainter.ts": /*!****************************!*\ - !*** ./src/sandPainter.ts ***! + !*** ./src/sand-painter.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 */ });\nvar SandPainter = /** @class */ (function () {\n function SandPainter(state) {\n this.color = state.getRandomColor();\n this.gain = Math.random() / 10;\n }\n return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sandPainter.ts?"); +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(state) {\n this.color = state.getRandomColor();\n this.gain = Math.random() / 10;\n }\n return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sand-painter.ts?"); /***/ }), @@ -186,7 +186,7 @@ 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/* harmony import */ var _sandPainter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sandPainter */ \"./src/sandPainter.ts\");\n// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02\n\n\nvar Substrate = /** @class */ (function () {\n function Substrate(id, 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.getElementById(id);\n if (!canvas) {\n canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n }\n this.state = new _state__WEBPACK_IMPORTED_MODULE_0__[\"default\"](colors, maxCracks, canvas.clientHeight, canvas.clientWidth);\n }\n return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\nvar Crack = /** @class */ (function () {\n function Crack(state) {\n this.x = 0;\n this.y = 0;\n this.angle = 0;\n this.painter = new _sandPainter__WEBPACK_IMPORTED_MODULE_1__[\"default\"](state);\n this.state = state;\n this.init();\n }\n Crack.prototype.init = function () {\n var x = 0, y = 0, found = false, tries = 0;\n while (!found && tries++ < 1000) {\n x = Math.random() * this.state.width;\n y = Math.random() * this.state.height;\n found = this.state.crackGrid[y * this.state.height + x] < 10000;\n }\n if (!found) {\n console.warn(\"Unable to start crack due to timeout\");\n return;\n }\n var negative = Math.random() < 0.5;\n var value = this.state.crackGrid[y * this.state.height + x];\n if (negative)\n value -= 90 + Math.floor(Math.random() * 4.1 - 2);\n else\n value += 90 + Math.floor(Math.random() * 4.1 - 2);\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 this.angle = angle;\n };\n Crack.prototype.continue = function () {\n this.x += .42 * Math.cos(this.angle * Math.PI / 180);\n this.y += .42 * Math.sin(this.angle * Math.PI / 180);\n };\n return Crack;\n}());\nwindow.main = new Substrate(\"substrate-canvas\", 20);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?"); +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/* harmony import */ var _sandPainter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sandPainter */ \"./src/sand-painter.ts\");\n// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02\n\n\nvar Substrate = /** @class */ (function () {\n function Substrate(id, 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.getElementById(id);\n if (!canvas) {\n canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n }\n this.canvas = canvas;\n this.state = new _state__WEBPACK_IMPORTED_MODULE_0__[\"default\"](colors, maxCracks, canvas.clientHeight, canvas.clientWidth);\n this.init();\n }\n Substrate.prototype.init = function () {\n var context = this.canvas.getContext(\"2d\");\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n };\n return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\nvar Crack = /** @class */ (function () {\n function Crack(state) {\n this.x = 0;\n this.y = 0;\n this.angle = 0;\n this.painter = new _sandPainter__WEBPACK_IMPORTED_MODULE_1__[\"default\"](state);\n this.state = state;\n this.init();\n }\n Crack.prototype.init = function () {\n var x = 0, y = 0, found = false, tries = 0;\n while (!found && tries++ < 1000) {\n x = Math.random() * this.state.width;\n y = Math.random() * this.state.height;\n found = this.state.crackGrid[y * this.state.height + x] < 10000;\n }\n if (!found) {\n console.warn(\"Unable to start crack due to timeout\");\n return;\n }\n var negative = Math.random() < 0.5;\n var value = this.state.crackGrid[y * this.state.height + x];\n if (negative)\n value -= 90 + Math.floor(Math.random() * 4.1 - 2);\n else\n value += 90 + Math.floor(Math.random() * 4.1 - 2);\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 this.angle = angle;\n };\n Crack.prototype.continue = function () {\n this.x += .42 * Math.cos(this.angle * Math.PI / 180);\n this.y += .42 * Math.sin(this.angle * Math.PI / 180);\n };\n return Crack;\n}());\nwindow.main = new Substrate(\"substrate-canvas\", 20);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?"); /***/ }),