Celluland

Embed Celluland

Simply copy this into your site to enjoy your own bit of Celluland.

<script data-celluland-viewer data-celluland-id="0" type="module" src="https://ceebox.github.io/celluland/scripts/CreateCellulandViewer.mjs"> </script> <script data-celluland-config data-celluland-id="0" type="application/json">

</script>
<script data-celluland-script data-celluland-id="0" type="application/json">

</script>
<script data-celluland-state data-celluland-id="0" type="application/json">

</script>

Docs

About

Celluland is a little JavaScript toy to meddle around with different Cellular Automata algorithms.

Have a look through some of the presets if you want to get started!

Please note that this API is currently in-progress, it will likely change. If you have any feedback, I'd like to know!

API

Cell

Represents a single cell in the grid, containing its state, position, and utility methods for neighbor interaction.

Properties

cell.state

Type: number

The current state of the cell, typically indicating its color or status (e.g., alive = 1, dead = 0).

cell.x

Type: number

The horizontal (column) index of the cell within the grid.

cell.y

Type: number

The vertical (row) index of the cell within the grid.

cell.phase

Type: number

The current simulation iteration or generation count.

Methods

cell.getNeighbours(state = 1)

Parameters:

  • state (number, optional) — The cell state to match among neighbors. Defaults to 1.

Returns: number — The count of neighboring cells with the specified state.

This method counts all neighbors (up to 8 surrounding cells) that have the given state, ignoring the cell itself.

cell.getCell(direction)

Parameters:

  • direction (number | direction) — The relative direction from the current cell to fetch the neighbor's state (e.g. with direction.LEFT).

Returns: number — The state of the neighboring cell at the specified direction.

Grid edges wrap around (toroidal), so neighbors beyond the boundaries wrap to the opposite side.

Colour

Contains all the possible colours a cell can be.

NOTE: A cell can return either a boolean (black / white), a colour, or a number corresponding to a colour value.

colour.

  • BLACK: 0
  • WHITE: 1
  • GRAY: 2
  • RED: 3
  • GREEN: 4
  • BLUE: 5
  • YELLOW: 6
  • ORANGE: 7
  • PURPLE: 8
  • CYAN: 9
  • PINK: 10
  • BROWN: 11
  • DARK_GREEN: 12
  • NAVY_BLUE: 13

Different colours that can be returned to colour a cell.

Direction

Contains all the possible directions used to locate neighboring cells relative to a given cell.

NOTE: Some directions are aliases to others for convenience (e.g., LEFT == CENTRE_LEFT).

direction.

  • TOP_LEFT: 0
  • TOP_MIDDLE: 1
  • TOP_RIGHT: 2
  • CENTRE_LEFT: 3
  • CENTRE_MIDDLE: 4
  • CENTRE_RIGHT: 5
  • BOTTOM_LEFT: 6
  • BOTTOM_MIDDLE: 7
  • BOTTOM_RIGHT: 8
  • LEFT: 3
  • CENTRE: 4
  • RIGHT: 5
  • ABOVE: 1
  • BELOW: 7