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) {
-        this.painter = new SandPainter(state.getRandomColor())
+    constructor(state: State, x: number, y: number, angle: number) {
+        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(x, y, angle + (90 + Math.floor(Math.random() * 4.1 - 2)) * (flip ? -1 : 1))
+        this.start(this.x, this.y, this.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
-        const width = this.state.canvas.width
-        if (x >= 0 && x < width && y >= 0 && y < height) {
+        if (this.state.isWithinBoundary(x, y)) {
             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)
-            this.seeds.push({x, y})
+            const angle = Math.floor(Math.random() * 360)
+            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)
-        }, 60 * 1000)
+            requestAnimationFrame(draw)
+        }, 120 * 1000)
 
-        request = requestAnimationFrame(draw)
+        requestAnimationFrame(draw)
     }
 }