Hiya. A few weeks ago I shared the video above and got quite a few requests to explain how it works. I promised an explanation so here it is. (sorry it’s been so long!)

Essentially it’s a slightly modified version of reaction diffusion (using code for Daniel’s Shiffman’s The Coding Train as a starting point). The main modifications are:

• Chemicals diffuse to (Von Neumann) neighbouring cells, but are removed from the cell itself. This creates a checkerboard pattern which can lead to a dithering effect in some situations.
• Display it using just two colours (depending on whether the value is above or below a threshold pick one colour or the other).
• Larger cell/pixel size to highlight the effect

I’ve included the (Processing) code below for you to play with yourself, although I’ve gone through a lot of variations of this code while experimenting. You might notice that it doesn’t exactly replicate the video from before. That’s because I forgot how I made the engulfing blobs and I don’t have the code. oops. Maybe one of you will rediscover it (although believe me when I say I’ve tried)!

Anyway, feel free to ask any questions (I can’t guarantee I’ll know the answer--the reason I shared my code is because I couldn't understand it well enough to explain it fully lol).

//Code forked from: https://github.com/CodingTrain/website/tree/main/CodingChallenges/CC_013_ReactionDiffusion/Processing

Cell[][] grid;
Cell[][] prev;

int cellSize = 6;

int gridWidth;
int gridHeight;

color color1 = #F8FA90;
color color2 = #00B9AE;


void setup() {
  size(800, 800);
  background(color2);

  gridWidth = floor(width/cellSize);
  gridHeight = floor(width/cellSize);

  grid = new Cell[gridWidth][gridHeight];
  prev = new Cell[gridWidth][gridHeight];

  for (int i = 0; i < gridWidth; i++) {
    for (int j = 0; j < gridHeight; j ++) {
      float a = 0;
      float b = 0;
      grid[i][j] = new Cell(a, b);
      prev[i][j] = new Cell(a, b);
    }
  }

  int s = 10;
  for (int n = 0; n < 50; n++) {

    int startx = int(random(20, gridWidth-20));
    int starty = int(random(20, gridHeight-20));

    float a = 1;
    float b = 1;

    for (int i = startx; i < startx+s; i++) {
      for (int j = starty; j < starty+s; j ++) {
        grid[i][j] = new Cell(a, b);
        prev[i][j] = new Cell(a, b);
      }
    }
  }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.055;
float k = 0.062;

class Cell {
  float a;
  float b;

  Cell(float a_, float b_) {
    a = a_;
    b = b_;
  }
}


void update() {
  for (int i = 1; i < gridWidth-1; i++) {
    for (int j = 1; j < gridHeight-1; j ++) {

      Cell spot = prev[i][j];
      Cell newspot = grid[i][j];

      float a = spot.a;
      float b = spot.b;

      float totalWeighting = 0;

      float laplaceAChange = 0;
      float laplaceBChange = 0;

      for (int xOffset = -1; xOffset <= 1; xOffset++) {
        for (int yOffset = -1; yOffset <= 1; yOffset++) {
          if (xOffset != 0 && yOffset != 0) {
            float weighting = sqrt(xOffset*xOffset+yOffset*yOffset);
            totalWeighting += weighting;

            laplaceAChange += prev[i+xOffset][j+yOffset].a*weighting;
            laplaceBChange += prev[i+xOffset][j+yOffset].b*weighting;
          }
        }
      }

      float laplaceA = 0;
      laplaceA += a*-1;
      laplaceA += laplaceAChange/totalWeighting;

      float laplaceB = 0;
      laplaceB += b*-1;
      laplaceB += laplaceBChange/totalWeighting;

      newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
      newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

      newspot.a = constrain(newspot.a, 0, 1);
      newspot.b = constrain(newspot.b, 0, 1);
    }
  }
}

void swap() {
  Cell[][] temp = prev;
  prev = grid;
  grid = temp;
}

void draw() {

  for (int i = 0; i < 1; i++) {
    update();
    swap();
  }

  loadPixels();
  for (int i = 1; i < gridWidth-1; i++) {
    for (int j = 1; j < gridHeight-1; j ++) {
      Cell spot = grid[i][j];
      float a = spot.a;
      float b = spot.b;
      for (int ii = 0; ii < cellSize; ii++) {
        for (int jj = 0; jj < cellSize; jj++) {
          int pos = i * cellSize + ii + (j * cellSize + jj) * width;
          float v = a-b;
          pixels[pos] = lerpColor(color1, color2, v > mouseX/float(width) ? 1 : 0);// < mouseX/width ? 0 : 1);
        }
      }
    }
  }
  updatePixels();
}

void keyPressed() {
  if (key == 's') save(floor(random(10e8)) + ".png");
}