A simple 2D JavaScript flood fill.
JavaScript
Switch branches/tags
Nothing to show
Latest commit d8baa46 Jun 29, 2013 @hughsk 0.1.1
Permalink
Failed to load latest commit information.
README.md Update README.md and eyeball.js Jun 28, 2013
example.gif first commit Jun 28, 2013
eyeball.js Update README.md and eyeball.js Jun 28, 2013
index.js Use .get and .set for ndarray elements. Jun 29, 2013
package.json 0.1.1 Jun 29, 2013

README.md

flood-fill

A simple 2D flood fill for use with ndarrays.

You could use this to re-implement Microsoft Paint's bucket fill in JavaScript, or in procedural dungeon generation to identify disconnected rooms.

flood fill

Installation

npm install flood-fill

Usage

require('flood-fill')(ndarray, x, y, fillValue)

Fills the array with fillValue, starting from the position at (x, y).

This will also return an object with some very basic metrics for you to use:

  • area: the total amount of cells filled.
  • hi: the highest x/y positions filled.
  • lo: the lowest x/y positions filled.

Note that hi and lo may not have been filled themselves.

var fill = require('flood-fill')
var zero = require('zeros')

var grid = zero([50, 50])
var height = grid.shape[1]
var width = grid.shape[0]

for (var x = 0; x < 50; x += 1) grid.set(x, 10, 1)
for (var x = 0; x < 50; x += 1) grid.set(x, 21, 1)
for (var y = 0; y < 50; y += 1) grid.set(10, y, 1)
for (var y = 0; y < 50; y += 1) grid.set(22, y, 1)

fill(grid, 30, 19, 2)

for (var y = 0; y < height; y += 1) {
  for (var x = 0; x < width; x += 1) {
    process.stdout.write(grid.get(x, y) ? '#' : ' ')
  }
  console.log()
}