WIP, refactoring... borked for now

src/crack.ts

@@ -8,18 +8,18 @@ export default class Crack {
     private painter: SandPainter
     private state: State
 
-    constructor(state: State) {
+    constructor(state: State, x: number, y: number, angle: number) {
-        this.painter = new SandPainter(state.getRandomColor())
+        this.painter = new SandPainter(state.getRandomColor(), state.isWithinBoundary.bind(state))
         this.state = state
+        this.x = x
+        this.y = y
+        this.angle = angle
         this.init()
     }
 
     init() {
-        const index = Math.floor(Math.random() * this.state.seeds.length)
-        const {x, y} = this.state.seeds.splice(index, 1)[0]
         const flip = Math.random() < 0.5
-        let angle = this.state.grid[x][y]
+        this.start(this.x, this.y, this.angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1))
-        this.start(x, y, angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1))
     }
 
     start(x: number, y: number, angle: number) {
@@ -38,9 +38,7 @@ export default class Crack {
 
         const x = Math.floor(this.x)
         const y = Math.floor(this.y)
-        const height = this.state.canvas.height
+        if (this.state.isWithinBoundary(x, y)) {
-        const width = this.state.canvas.width
-        if (x >= 0 && x < width && y >= 0 && y < height) {
             const seed = this.state.grid[x][y]
             if (seed > 10000 || Math.abs(seed - this.angle) < 5) {
                 this.state.grid[x][y] = Math.floor(this.angle)

src/sand-painter.ts

@@ -3,13 +3,25 @@ import State from "./state"
 export default class SandPainter {
     private color: number
     private gain: number
+    private readonly boundaryCheck: (x: number, y: number) => boolean
 
-    constructor(color: number) {
+    constructor(color: number, boundaryCheck: (x: number, y: number) => boolean) {
         this.color = color
+        this.boundaryCheck = boundaryCheck
         this.gain = Math.random() / 10
     }
 
-    render() {
+    render(x: number, y: number, angle: number) {
+        let open = true, paintX: number, paintY: number
+        while (open) {
+            paintX = x + .81 * Math.sin(angle * Math.PI / 180)
+            paintY = y - .81 * Math.cos(angle * Math.PI / 180)
+
+            const gridX = Math.floor(paintX)
+            const gridY = Math.floor(paintY)
+            if (this.boundaryCheck(gridX, gridY)) {
 
             }
+        }
+    }
 }

src/state.ts

@@ -20,6 +20,7 @@ export default class State {
 
     init() {
         this.seeds = []
+        this.cracks = []
         const height = this.canvas.height
         const width = this.canvas.width
         const context = this.canvas.getContext("2d")
@@ -34,14 +35,13 @@ export default class State {
             }
         }
 
-        for (let i = 0; i < 16; i++) {
+        for (let i = 0; i < 3; i++) {
             const x = Math.floor(Math.random() * width)
             const y = Math.floor(Math.random() * height)
-            this.grid[x][y] = Math.floor(Math.random() * 360)
+            const angle = Math.floor(Math.random() * 360)
-            this.seeds.push({x, y})
+            this.cracks.push(new Crack(this, x, y, angle))
+            this.grid[x][y] = angle
         }
-
-        this.cracks = [new Crack(this), new Crack(this), new Crack(this)]
     }
 
     addCrack() {
@@ -51,4 +51,8 @@ export default class State {
     getRandomColor(): number {
         return this.colors[Math.floor(Math.random() * this.colors.length)]
     }
+
+    isWithinBoundary(x: number, y: number): boolean {
+        return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height
+    }
 }

src/substrate.ts

@@ -18,18 +18,16 @@ export default class Substrate {
 
     init() {
         const me = this
-        let request: number
         const draw = () => {
             for (const crack of me.state.cracks) crack.draw()
-            request = requestAnimationFrame(draw)
+            requestAnimationFrame(draw)
         }
 
         setInterval(() => {
-            cancelAnimationFrame(request)
             me.state.init()
-            request = requestAnimationFrame(draw)
+            requestAnimationFrame(draw)
-        }, 60 * 1000)
+        }, 120 * 1000)
 
-        request = requestAnimationFrame(draw)
+        requestAnimationFrame(draw)
     }
 }

www/main.js

@@ -16,7 +16,7 @@
   \**********************/
 /***/ ((__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) {\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.init();\n    }\n    Crack.prototype.init = function () {\n        var index = Math.floor(Math.random() * this.state.seeds.length);\n        var _a = this.state.seeds.splice(index, 1)[0], x = _a.x, y = _a.y;\n        var flip = Math.random() < 0.5;\n        var angle = this.state.grid[x][y];\n        this.start(x, y, angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1));\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.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        var height = this.state.canvas.height;\n        var width = this.state.canvas.width;\n        if (x >= 0 && x < width && y >= 0 && y < height) {\n            var seed = this.state.grid[x][y];\n            if (seed > 10000 || Math.abs(seed - this.angle) < 5) {\n                this.state.grid[x][y] = Math.floor(this.angle);\n                this.state.seeds.push({ x: x, y: y });\n            }\n            else if (Math.abs(seed - this.angle) > 2) {\n                this.init();\n                this.state.addCrack();\n            }\n        }\n        else {\n            this.init();\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?");
+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) {\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(), state.isWithinBoundary.bind(state));\n        this.state = state;\n        this.init();\n    }\n    Crack.prototype.init = function () {\n        var index = Math.floor(Math.random() * this.state.seeds.length);\n        var _a = this.state.seeds.splice(index, 1)[0], x = _a.x, y = _a.y;\n        var flip = Math.random() < 0.5;\n        var angle = this.state.grid[x][y];\n        this.start(x, y, angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1));\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.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 seed = this.state.grid[x][y];\n            if (seed > 10000 || Math.abs(seed - this.angle) < 5) {\n                this.state.grid[x][y] = Math.floor(this.angle);\n                this.state.seeds.push({ x: x, y: y });\n            }\n            else if (Math.abs(seed - this.angle) > 2) {\n                this.init();\n                this.state.addCrack();\n            }\n        }\n        else {\n            this.init();\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?");
 
 /***/ }),
 
@@ -36,7 +36,7 @@ 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 () {\n    };\n    return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sand-painter.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(color, boundaryCheck) {\n        this.color = color;\n        this.boundaryCheck = boundaryCheck;\n        this.gain = Math.random() / 10;\n    }\n    SandPainter.prototype.render = function (x, y, angle) {\n        var open = true, paintX, paintY;\n        while (open) {\n            paintX = x + .81 * Math.sin(angle * Math.PI / 180);\n            paintY = y - .81 * Math.cos(angle * Math.PI / 180);\n            var gridX = Math.floor(paintX);\n            var gridY = Math.floor(paintY);\n            if (this.boundaryCheck(gridX, gridY)) {\n            }\n        }\n    };\n    return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sand-painter.ts?");
 
 /***/ }),
 
@@ -46,7 +46,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 _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.init();\n    }\n    State.prototype.init = function () {\n        this.seeds = [];\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            if (!this.grid[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 < 16; i++) {\n            var x = Math.floor(Math.random() * width);\n            var y = Math.floor(Math.random() * height);\n            this.grid[x][y] = Math.floor(Math.random() * 360);\n            this.seeds.push({ x: x, y: y });\n        }\n        this.cracks = [new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this), new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this), new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this)];\n    };\n    State.prototype.addCrack = function () {\n        if (this.cracks.length < this.maxCracks)\n            this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this));\n    };\n    State.prototype.getRandomColor = function () {\n        return this.colors[Math.floor(Math.random() * this.colors.length)];\n    };\n    return State;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (State);\n\n\n//# sourceURL=webpack:///./src/state.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 _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.init();\n    }\n    State.prototype.init = function () {\n        this.seeds = [];\n        this.cracks = [];\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            if (!this.grid[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            this.grid[x][y] = Math.floor(Math.random() * 360);\n            this.seeds.push({ x: x, y: y });\n        }\n        this.cracks = [new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this), new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this), new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this)];\n    };\n    State.prototype.addCrack = function () {\n        if (this.cracks.length < this.maxCracks)\n            this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this));\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    return State;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (State);\n\n\n//# sourceURL=webpack:///./src/state.ts?");
 
 /***/ }),
 
@@ -56,7 +56,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// 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 request;\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            request = requestAnimationFrame(draw);\n        };\n        setInterval(function () {\n            cancelAnimationFrame(request);\n            me.state.init();\n            request = requestAnimationFrame(draw);\n        }, 60 * 1000);\n        request = requestAnimationFrame(draw);\n    };\n    return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\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// 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 () {\n            me.state.init();\n            requestAnimationFrame(draw);\n        }, 120 * 1000);\n        requestAnimationFrame(draw);\n    };\n    return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?");
 
 /***/ })