Refactor river zone draw

Author: hacktoon

src/lib/geometry/point/set.js

@@ -108,7 +108,7 @@ export class PointSet {
     forEach(callback) {
         this.#indexSet.forEach(index => {
             const point = this.rect.indexToPoint(index)
-            callback(point)
+            callback(point, index)
         })
     }
 }

src/model/tilemap/worldmap/world/basin/index.js

@@ -3,12 +3,15 @@ import { Grid } from '/src/lib/grid'
 import { Direction } from '/src/lib/direction'
 import { DirectionBitMaskGrid } from '/src/model/tilemap/lib/bitmask'
 
-import { buildBasinGrid } from './model'
+import {
+    buildBasinModel,
+    buildMidpointGrid
+} from './model'
 import {
     Basin,
+    WaterBasin,
     EMPTY,
     DiffuseLandBasin,
-    WaterBasin,
 } from './type'
 
 
@@ -19,6 +22,8 @@ export class BasinLayer {
     // grid of basin ids
     #basinGrid
 
+    #midpointGrid
+
     // the walk distance of each basin starting from shore
     // initial value is 0, used to determine river stretch
     #distanceGrid
@@ -30,21 +35,22 @@ export class BasinLayer {
     #typeMap = new Map()
 
     // map a point to a basin zone direction bitmask
-    #erosionMaskGrid
+    #directionBitmask
 
     constructor(context) {
         const {rect, world, zoneRect} = context
         this.#world = world
         this.#zoneRect = zoneRect
         this.#distanceGrid = Grid.fromRect(rect, () => 0)
         this.#erosionGrid = Grid.fromRect(rect, () => null)
-        this.#erosionMaskGrid = new DirectionBitMaskGrid(rect)
-        this.#basinGrid = buildBasinGrid({
+        this.#midpointGrid = buildMidpointGrid(context)
+        this.#directionBitmask = new DirectionBitMaskGrid(rect)
+        this.#basinGrid = buildBasinModel({
             ...context,
             typeMap: this.#typeMap,
             erosionGrid: this.#erosionGrid,
             distanceGrid: this.#distanceGrid,
-            erosionMaskGrid: this.#erosionMaskGrid,
+            directionBitmask: this.#directionBitmask,
         })
     }
 
@@ -53,35 +59,38 @@ export class BasinLayer {
     }
 
     get(point) {
-        if (! this.has(point)) return null
         const id = this.#basinGrid.get(point)
         const typeId = this.#typeMap.get(id)
         const directionId = this.#erosionGrid.get(point)
+        const midpointIndex = this.#midpointGrid.get(point)
         return {
             id,
-            type: Basin.parse(typeId),
-            distance: this.#distanceGrid.get(point),
+            type: Basin.parse(typeId) || WaterBasin,
+            distance: this.#distanceGrid.get(point) || 0,
+            midpoint: this.#zoneRect.indexToPoint(midpointIndex),
             erosion: Direction.fromId(directionId),
         }
     }
 
     canCreateRiver(point) {
-        if (! this.has(point))
-            return false
         const id = this.#basinGrid.get(point)
         const typeId = this.#typeMap.get(id)
         const basinType = Basin.parse(typeId)
-        const isDivide = this.#erosionMaskGrid.get(point).length === 1
+        if (! basinType) {
+            console.log(point);
+
+            return false
+        }
+        const isDivide = this.#directionBitmask.get(point).length === 1
         return basinType.hasRivers && isDivide
     }
 
     getText(point) {
-        if (! this.has(point)) return ''
         const basin = this.get(point)
         const attrs = [
             `id=${basin.id}`,
             `type=${basin.type ? basin.type.name : ''}`,
-            `erosion=${basin.erosion.name}`,
+            `erosion=${basin.erosion ? basin.erosion.name : 'NADA'}`,
             `distance=${basin.distance}`,
         ].join(',')
         return `Basin(${attrs})`
@@ -94,14 +103,19 @@ export class BasinLayer {
         if (this.#world.surface.isLand(tilePoint)) {
             color = basin ? basin.type.color : DiffuseLandBasin.color
         } else {
-            color = WaterBasin.color
+            color =  WaterBasin.color
         }
         canvas.rect(canvasPoint, tileSize, color.toHex())
         if (basin && params.get('showErosion')) {
-            const text = basin.erosion.symbol
-            const textColor = color.invert().toHex()
-            canvas.text(canvasPoint, tileSize, text, textColor)
-            // this.#drawErosionLines(props, basin)
+            if (basin.erosion) {
+                const text = basin.erosion.symbol
+                const textColor = color.invert().toHex()
+                canvas.text(canvasPoint, tileSize, text, textColor)
+            } else {
+                console.log(tilePoint);
+
+            }
+            this.#drawErosionLines(props, basin)
         }
     }
 
@@ -111,16 +125,11 @@ export class BasinLayer {
         const lineWidth = Math.round(props.tileSize / 20)
         // calc midpoint point on canvas
         const pixelsPerZonePoint = tileSize / this.#zoneRect.width
-        const zoneSize = this.#zoneRect.width
-        const midpoint = [
-            Math.floor(zoneSize / 2),
-            Math.floor(zoneSize / 2),
-        ]
-        const canvasMidpoint = Point.multiplyScalar(midpoint, pixelsPerZonePoint)
+        const canvasMidpoint = Point.multiplyScalar(basin.midpoint, pixelsPerZonePoint)
         const meanderPoint = Point.plus(canvasPoint, canvasMidpoint)
 
         // draw line for each neighbor with a basin connection
-        const directions = this.#erosionMaskGrid.get(tilePoint)
+        const directions = this.#directionBitmask.get(tilePoint)
         for(let direction of directions) {
             // map each axis coordinate to random value in zone's rect edge
             // summing values from origin [0, 0] bottom-right oriented

src/model/tilemap/worldmap/world/basin/model.js

@@ -1,5 +1,7 @@
 import { ConcurrentFill } from '/src/lib/floodfill/concurrent'
 import { Grid } from '/src/lib/grid'
+import { Direction } from '/src/lib/direction'
+import { Random } from '/src/lib/random'
 import { Point } from '/src/lib/geometry/point'
 
 import {
@@ -9,54 +11,62 @@ import {
     DiffuseLandBasin,
     Basin,
     EMPTY,
+    WaterBasin,
 } from './type'
 
 
 const FILL_CHANCE = .1  // chance of fill growing
 const FILL_GROWTH = 4  // make fill basins grow bigger than others
+const MIDPOINT_RATE = .6
 
 
-export function buildBasinGrid(baseContext) {
+export function buildMidpointGrid({rect, zoneRect}) {
+    const centerIndex = Math.floor(zoneRect.width / 2)
+    // 60% around center point
+    const offset = Math.floor(centerIndex * MIDPOINT_RATE)
+
+    return Grid.fromRect(rect, () => {
+        const x = centerIndex + Random.int(-offset, offset)
+        const y = centerIndex + Random.int(-offset, offset)
+        return zoneRect.pointToIndex([x, y])
+    })
+}
+
+
+export function buildBasinModel(baseContext) {
     const {rect, world, typeMap} = baseContext
     // init basin id counter
     let basinId = 0
     // get surface border points and setup basin types and fill
-    const fillMap = new Map()
+    const landFillMap = new Map()
+    const waterFillMap = new Map()
     const surveyMap = new Map()
     const basinGrid = Grid.fromRect(rect, point => {
         // reuse the process of basinGrid creation to determine river mouths
         // is this point an erosion path (possible river mouth)?
-        const survey = surveyNeighbors(baseContext, point)
-        if (world.surface.isLand(point)) {
-            if (world.surface.isBorder(point)) {
-                // set type on init
+        if (world.surface.isBorder(point)) {
+            if (world.surface.isLand(point)) {
+                const survey = surveyNeighbors(baseContext, point)
+                surveyMap.set(basinId, survey)
                 const type = buildBasinType(world, survey)
                 typeMap.set(basinId, type.id)
-                surveyMap.set(basinId, survey)
-                fillMap.set(basinId, {origin: point})
-                basinId++
+                landFillMap.set(basinId, {origin: point})
+            } else {
+                typeMap.set(basinId, WaterBasin.id)
+                waterFillMap.set(basinId, {origin: point})
             }
+            basinId++
         }
         return EMPTY
     })
     const context = {...baseContext, basinGrid, surveyMap}
-    // returns a grid storing basin ids
-    // ocean and lake/sea borders must grow at same time
-    // but lakes/seas are delayed to grow less
-    new BasinGridFill(fillMap, context).complete()
+    new LandBasinFill(landFillMap, context).complete()
+    new WaterBasinFill(waterFillMap, context).complete()
     return basinGrid
 }
 
 
-class BasinGridFill extends ConcurrentFill {
-    onInitFill(fill, fillPoint) {
-        const {surveyMap} = fill.context
-        const survey = surveyMap.get(fill.id)
-        // the basin opposite border is the parentPoint
-        // update erosion path
-        this._fillBasin(fill, fillPoint, survey.oppositeBorder)
-    }
-
+class LandBasinFill extends ConcurrentFill {
     getChance(fill) { return FILL_CHANCE }
 
     getGrowth(fill) {
@@ -65,31 +75,29 @@ class BasinGridFill extends ConcurrentFill {
         return basin.isEndorheic ? 1 : FILL_GROWTH
     }
 
+    onInitFill(fill, fillPoint) {
+        const {surveyMap} = fill.context
+        const survey = surveyMap.get(fill.id)
+        // the basin opposite border is the parentPoint
+        // update erosion path
+        this._fillBasin(fill, fillPoint, survey.oppositeBorder)
+    }
+
     onFill(fill, fillPoint, parentPoint) {
-        const {distanceGrid, erosionMaskGrid} = fill.context
+        const {distanceGrid, directionBitmask} = fill.context
         // distance to source by point
-        const currentDistance = distanceGrid.wrapGet(parentPoint)
+        const currentDistance = distanceGrid.get(parentPoint)
         distanceGrid.wrapSet(fillPoint, currentDistance + 1)
         // update parent point erosion path
         const upstream = Point.directionBetween(parentPoint, fillPoint)
-        erosionMaskGrid.add(parentPoint, upstream)
+        directionBitmask.add(parentPoint, upstream)
         this._fillBasin(fill, fillPoint, parentPoint)
     }
 
     getNeighbors(fill, parentPoint) {
         return Point.around(parentPoint)
     }
 
-    _fillBasin(fill, fillPoint, parentPoint) {
-        const {erosionGrid, erosionMaskGrid, basinGrid} = fill.context
-        // basin id is the same as fill id
-        basinGrid.set(fillPoint, fill.id)
-        // set erosion flow to parent
-        const direction = Point.directionBetween(fillPoint, parentPoint)
-        erosionGrid.wrapSet(fillPoint, direction.id)
-        erosionMaskGrid.add(fillPoint, direction)
-    }
-
     isEmpty(fill, fillPoint, parentPoint) {
         const {world, basinGrid, typeMap} = fill.context
         const basin = Basin.parse(typeMap.get(fill.id))
@@ -102,6 +110,16 @@ class BasinGridFill extends ConcurrentFill {
         // avoid fill if different types
         return target.isWater == parent.isWater
     }
+
+    _fillBasin(fill, fillPoint, parentPoint) {
+        const {erosionGrid, directionBitmask, basinGrid} = fill.context
+        // basin id is the same as fill id
+        basinGrid.set(fillPoint, fill.id)
+        // set erosion flow to parent
+        const direction = Point.directionBetween(fillPoint, parentPoint)
+        erosionGrid.wrapSet(fillPoint, direction.id)
+        directionBitmask.add(fillPoint, direction)
+    }
 }
 
 
@@ -139,3 +157,52 @@ function buildBasinType(world, survey) {
     }
     return DiffuseLandBasin
 }
+
+
+class WaterBasinFill extends ConcurrentFill {
+    getChance(fill) { return FILL_CHANCE }
+    getGrowth(fill) { return FILL_GROWTH }
+
+    getNeighbors(fill, parentPoint) {
+        return Point.around(parentPoint)
+    }
+
+    onInitFill(fill, fillPoint) {
+        const { world, erosionGrid, directionBitmask, basinGrid, typeMap } = fill.context
+        // basin id is the same as fill id
+        let riverDirection
+        basinGrid.set(fillPoint, fill.id)
+        Point.adjacents(fillPoint, (sidePoint, direction) => {
+            if (world.surface.isLand(sidePoint)) {
+                const sideId = basinGrid.get(sidePoint)
+                const sideType = Basin.parse(typeMap.get(sideId))
+                if (sideType && sideType.hasRivers) {
+                    riverDirection = Point.directionBetween(sidePoint, fillPoint)
+                    directionBitmask.add(fillPoint, direction)
+                }
+            } else {
+                directionBitmask.add(fillPoint, direction)
+            }
+        })
+        const erosionDirection = riverDirection || Direction.randomCardinal()
+        erosionGrid.set(fillPoint, erosionDirection.id)
+    }
+
+    isEmpty(fill, point) {
+        const {world, basinGrid} = fill.context
+        const basinIsEmpty = basinGrid.get(point) === EMPTY
+        const isWater = world.surface.isWater(point)
+        return isWater && basinIsEmpty
+    }
+
+    onFill(fill, fillPoint, parentPoint) {
+        const {basinGrid, erosionGrid, directionBitmask} = fill.context
+        // update parent point erosion path
+        const upstream = Point.directionBetween(fillPoint, parentPoint)
+        const downstream = Point.directionBetween(parentPoint, fillPoint)
+        directionBitmask.add(fillPoint, upstream)
+        directionBitmask.add(parentPoint, downstream)
+        erosionGrid.set(fillPoint, upstream.id)
+        basinGrid.set(fillPoint, fill.id)
+    }
+}

src/model/tilemap/worldmap/world/river/index.js

@@ -25,25 +25,19 @@ export class RiverLayer {
     #midpointGrid
     // map a river point to its river type
     #stretchMap
-    #riverMouths
-    #estuaryPointSet
 
     constructor(context) {
         const {rect, world, zoneRect} = context
         this.#zoneRect = zoneRect
         this.world = world
         this.#midpointGrid = buildMidpointGrid(context)
         this.#directionMaskGrid = new DirectionBitMaskGrid(rect)
-        this.#riverMouths = new PointSet(rect)
-        this.#estuaryPointSet = new PointSet(rect)
         this.#stretchMap = new PointMap(rect)
         const _context = {
             ...context,
             riverNames: this.#riverNames,
-            riverMouths: this.#riverMouths,
-            estuaryPointSet: this.#estuaryPointSet,
             directionMaskGrid: this.#directionMaskGrid,
-            stretchMap: this.#stretchMap,
+            stretchMap: this.#stretchMap
         }
         this.#riverPointGrid = buildRiverModel(_context)
     }
@@ -83,8 +77,8 @@ export class RiverLayer {
             return ''
         const river = this.get(point)
         const attrs = [
-             `${river.id}`,
-             `${river.name}${river.mouth ? ' mouth' : ''}`,
+             `id=${river.id}`,
+             `name=${river.name}`,
              `stretch=${river.stretch.name}`,
              `midpoint=${river.midpoint}`,
         ].filter(x=>x).join(',')