feat: bsp dungeon sketch

isaac-mason · Dec 22, 2024 · d9e6974 · d9e6974
1 parent 984e141
commit d9e6974
Show file tree

Hide file tree

Showing 9 changed files with 457 additions and 113 deletions.
diff --git a/sketches.ts b/sketches.ts
@@ -32,6 +32,7 @@ export const sketchesOrder = [
     'p2-es/marching-cubes-goo',
     'p2-es/pixelated-text',
     'procedural-generation/caves',
+    'procedural-generation/bsp-dungeon',
     'procedural-generation/l-systems',
     'procedural-generation/diamond-square-heightmap',
     'procedural-generation/pixelated-planet',

diff --git a/sketches/procedural-generation/bsp-dungeon/cover.png b/sketches/procedural-generation/bsp-dungeon/cover.png
diff --git a/sketches/procedural-generation/bsp-dungeon/package.json b/sketches/procedural-generation/bsp-dungeon/package.json
@@ -3,7 +3,6 @@
     "packageManager": "[email protected]",
     "private": true,
     "sketch": {
-        "hidden": true,
         "title": "Procedural Generation - BSP Dungeon",
         "tags": [
             "procedural-generation"

diff --git a/sketches/procedural-generation/bsp-dungeon/src/grid.js b/sketches/procedural-generation/bsp-dungeon/src/grid.js
@@ -0,0 +1,91 @@
+import { Vector2 } from './vector.js'
+
+export const CHUNK_SIZE = Math.pow(2, 6)
+
+const getChunkCoords = (x, y) => {
+    const chunkX = Math.floor(x / CHUNK_SIZE)
+    const chunkY = Math.floor(y / CHUNK_SIZE)
+
+    return [chunkX, chunkY]
+}
+
+const getChunkKey = (x, y) => {
+    return `${x},${y}`
+}
+
+const getChunkIndex = (x, y) => {
+    const localX = ((x % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE
+    const localY = ((y % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE
+
+    return localX + localY * CHUNK_SIZE
+}
+
+export const getChunkPositionFromIndex = (index, out) => {
+    const x = index % CHUNK_SIZE
+    const y = Math.floor(index / CHUNK_SIZE)
+
+    out.set(x, y)
+}
+
+export class Grid {
+    /**
+     * @type {Record<string, { chunkPosition: Vector2, data: Array<number> }>}
+     */
+    chunks = {}
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {number} value
+     */
+    set(x, y, value) {
+        const [chunkX, chunkY] = getChunkCoords(x, y)
+        const chunkKey = getChunkKey(chunkX, chunkY)
+
+        let chunk = this.chunks[chunkKey]
+        if (!chunk) {
+            this.chunks[chunkKey] = chunk = { chunkPosition: [chunkX, chunkY], data: new Array(CHUNK_SIZE * CHUNK_SIZE) }
+        }
+
+        const chunkIndex = getChunkIndex(x, y)
+
+        chunk.data[chunkIndex] = value
+    }
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @returns {number}
+     */
+    get(x, y) {
+        const [chunkX, chunkY] = getChunkCoords(x, y)
+        const chunk = this.chunks[getChunkKey(chunkX, chunkY)]
+
+        if (!chunk) {
+            return undefined
+        }
+
+        return chunk.data[getChunkIndex(x, y)]
+    }
+
+    /**
+     * @returns {[Vector2, Vector2]}
+     */
+    getChunkBounds() {
+        const min = new Vector2()
+        const max = new Vector2()
+
+        for (const chunk of Object.values(this.chunks)) {
+            min[0] = Math.min(min[0], chunk.chunkPosition[0])
+            min[1] = Math.min(min[1], chunk.chunkPosition[1])
+
+            max[0] = Math.max(max[0], chunk.chunkPosition[0])
+            max[1] = Math.max(max[1], chunk.chunkPosition[1])
+        }
+
+        min.multiplyScalar(CHUNK_SIZE)
+        max.multiplyScalar(CHUNK_SIZE)
+
+        return [min, max]
+    }
+}
diff --git a/sketches/procedural-generation/bsp-dungeon/src/index.html b/sketches/procedural-generation/bsp-dungeon/src/index.html
@@ -7,17 +7,52 @@
     </head>
     <body>
         <div id="app"></div>
+        <div id="controls"></div>
     </body>
     <script src="./sketch.js" type="module"></script>
     <style>
         body {
+            width: 100vw;
+            height: 100vh;
             margin: 0;
             padding: 0;
-            background: #000;
+            background: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         canvas {
-            width: 100vw;
+            width: 100vh;
+            max-width: 45em;
             object-fit: cover;
+            image-rendering: pixelated;
+        }
+        #controls {
+            position: fixed;
+            bottom: 1em;
+            left: 1em;
+            padding: 1em;
+            gap: 1em;
+            width: 20em;
+            display: flex;
+            flex-direction: column;
+            font-family: monospace;
+            opacity: 0.4;
+            background: rgba(0, 0, 0, 0.5);
+            color: #fff;
+        }
+        #controls:hover {
+            opacity: 1;
+        }
+        #controls .control {
+            display: flex;
+            gap: 1em;
+            align-items: center;
+            justify-content: space-between;
+        }
+        #controls .control label {
+            display: block;
+            margin-bottom: 0.5em;
         }
     </style>
 </html>