Game of Society

Press play, or click a cell to inspect it

Game of Society

What happens when a simple rule is repeated thousands of times?

A few lines of code can produce a spreading wave, a stable ecosystem, a strange machine or sudden chaos. No cell sees the whole grid. No one plans the final pattern. Yet something unexpected appears.

Game of Society takes this old mathematical pleasure and gives it a social twist. Instead of being merely alive or dead, cells may have an age, wealth, profession, opinion, identity or level of happiness. They can imitate their neighbours, compete with them, cooperate, move, reproduce or disappear.

You write the rules.

Then you press play.

The goal is not to predict real societies or design better public policy. Human beings are far too complicated for that, and a colourful grid is not a miniature country. The game is closer to a box of mathematical toys: a place to invent strange worlds, watch them unfold and discover that your rules rarely behave exactly as expected.

Perhaps young cells move while older ones accumulate influence. Perhaps rich cells attract others but become increasingly isolated. Perhaps peaceful cells survive only when surrounded by aggressive ones. Perhaps everyone copies the most successful neighbour, until the entire population converges on a strategy that suddenly stops working.

The rules may be sensible, absurd or deliberately unfair. Their consequences are the entertainment.

This is the magic of cellular automata. Each cell follows a tiny set of instructions, but the grid can produce patterns that feel far more elaborate than the code behind them. A rule that fits comfortably on a screen may create cycles, borders, migrations, generations and collapses.

The code is simple. The spectacle is not.

That tension also makes the game satisfying to program. Writing a rule is a little like inventing the laws of an alien civilization. What can its inhabitants perceive? What do they desire? When do they change? Do they remember the past? Do they become more stubborn with age? Does success encourage generosity, reproduction or greed?

Every variable opens another possibility.

History and sociology provide an endless supply of inspiration, but they do not need to be treated solemnly. You might create a world of merchants, monarchs and rebels, then discover that the rebels endlessly chase the monarchs around the grid. You might attempt equality and produce aristocracy—or begin with ruthless competition and somehow end with cooperation.

These outcomes are not historical claims. They are stories generated by rules.

Some worlds may resemble familiar ideas: segregation emerging without a central planner, cooperation surviving among selfish agents, populations expanding until resources disappear. Others may look like nothing humanity has ever experienced. Both are interesting. One invites recognition; the other invites imagination.

Start with a few simple rules, even if they feel incomplete or uncertain. Let the grid run and see what appears. If something surprises you, change it. If nothing happens, change it anyway. The smallest adjustment can be enough to open a different world.

Basics

Pick a built-in world from the dropdown, or keep the current one.
Use Inspect to click a cell and read its dimensions, or Paint to edit values by hand.
Randomize for a fresh seed, or First values to reset every cell to its starting value.
Press Play to run generations, Step to advance once, or Reset to return to the seed.
Adjust speed with the slider; use Back for previous generations and Undo for paint edits.
Keyboard: Space play/pause, arrows step back/forward, I inspect, P paint.

Dimensions

Every cell is a JavaScript object whose keys are the dimensions you define. Dimensions are the properties of each member of the society—age, wealth, tribe, opinion, and so on. You configure them under World in this menu.

Each dimension needs a unique name and a type:

Choice — a fixed set of allowed values, such as A, B, true, or false. The first value is used when you clear the grid; Randomize picks among them.
Integer — whole numbers with optional min/max bounds, an initial value for “First values,” and a random range for seeding.
Number — floating-point values with min/max, a step size, an initial value, and a random range.

Changing dimensions reshapes every cell, so the grid is reseeded. After you add or edit dimensions, update your transition and display functions so they read and return the same keys.

Rules

Open Rules in this menu to edit two JavaScript functions. Validate, then Apply. The code must stay self-contained: no imports, DOM access, or async work.

Transition — update(cell, neighbors)

Runs once for every cell each generation. All results are applied simultaneously, so every cell sees the previous generation’s neighbours.

cell is an object of the current dimension values (for example { state: "A", active: true }).
neighbors is an array of the eight surrounding cells in order NW, N, NE, W, E, SW, S, SE. With wrap topology the grid is a torus; with fixed edges, off-board neighbours are null.
Return one complete cell object with every dimension key. Choice values must be from the declared set; numerical values must stay in range.

Display — display(cell)

Turns a cell into a CSS color string for the grid. Prefer theme variables so colours adapt across styles: var(--cell-a), var(--cell-b), var(--cell-c), var(--cell-d), var(--cell-e), or var(--grid-empty).

A minimal transition that keeps a cell unchanged:

function update(cell, neighbors) {
  return cell;
}

A classic Conway-style life step (with an alive choice dimension):

function update(cell, neighbors) {
  const living = neighbors.filter(n => n && n.alive).length;
  return {
    alive: cell.alive
      ? living === 2 || living === 3
      : living === 3
  };
}

World settings (grid size and topology) live under World. Save configurations in the browser or copy a share URL under Save & share.