WIP

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)
+    }
+}

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

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
+        const context = this.canvas.getContext("2d")
-        while (!found && tries++ < 1000) {
+        context.fillStyle = "#fff"
-            x = Math.random() * this.state.width
+        context.fillRect(0, 0, this.canvas.width, this.canvas.height)
-            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)
     }
 }
-
-declare global {
-    interface Window {
-        main: Substrate
-    }
-}
-
-window.main = new Substrate("substrate-canvas", 20)

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?");
 
 /***/ }),