Breakdowns/Emerge 2

  • 08emergeNewFree
  • 08singularityNew
  • 05penumbraNew
  • 08nebulaNew
  • 21genuary26
  • 07bands
  • 05slate
  • 10gravity
  • 05warp
  • 05abiogenic
  • 10cascade
  • 08shift
  • 07formation
  • 02mesh
  • 08imaginary
  • 06arcs
  • 05dawnFree
  • 05eidolon
  • 09flareFree
  • 29genuary2025

Join waitlist ↵
165

Emerge 2

A diamond window into a stranger cellular automaton.

Loading...
←→

emerge7

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
Works171
Writing31

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Loading...

2025 Phobon

phobon.ioShadercraft

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.

Implementation

This sketch refuses to be a single rule. Inside a Manhattan diamond carved out of the grid, the top band mostly copies what happened one row north; the apex row carries a single lit pixel; everything between plays a parity game on the full neighbor count. Dead boundaries and an apex-top seed hook into the component's initializer so the first frame already agrees with the geometry. It feels less like "Life" and more like a little ritual unfolding in a gem-shaped viewport.

Breakdown

The fun is entirely in how space is partitioned: outside the diamond is forced dead, inside the diamond the update depends on which horizontal band you're in. There are 3 key components:

Diamond mask

Manhattan distance from the center must stay within radius R; otherwise the cell is cleared. That gives a rotated-square silhouette that reads crisp against the black margin.

Diamond mask and band routing
const man = abs(cellX.sub(float(cx))).add(abs(cellY.sub(float(cy))))
If(man.greaterThan(float(R)), () => next.assign(0)).Else(() => {
  If(cellY.greaterThan(float(ySplit)), () => next.assign(north))
    .ElseIf(cellY.equal(float(ySeed)), () => {
      /* single apex cell */
    })
    .Else(() => next.assign(mod(neighborActiveCount, float(2))))
})

North-copy band

Above ySplit, the cell simply takes the north neighbor's value from the read buffer—so information tends to drift downward through that band like a stacked elementary CA.

Parity interior

In the remaining interior rows, the next state is neighborActiveCount mod 2, which is brutally simple but produces noisy, checkerboard-leaning texture against the smoother stripes above.

boundary: 'dead' means out-of-range neighbors read as zero, so the diamond edge is a real cliff, not a wrap—very different mood from Emerge 1's torus.

Emerge 1

Emerge 1

Free
Emerge 3

Emerge 3

Free
Emerge 4

Emerge 4

Free
Emerge 5

Emerge 5

Free
Emerge 6

Emerge 6

Free
Emerge 7

Emerge 7

Free
Emerge 8

Emerge 8

Free

Be the first to know what's next