const seedPoints = 5;

const gap = 20;

​

function setup() {

  createCanvas(600, 600);

  for(let i = 0; i < seedPoints; i ++) {

    points.push(new Point(random(width), random(height), i));

  }

  colorMode(HSB);

  noStroke();

  background(220);

}

​

function draw() {

  points = points.flatMap((p, i) => {

    p.update();

    p.draw();

    for(let j = i + 1; j < points.length; j ++) {

      const op = points[j];

      if(p.type !== op.type && dist(p.x, p.y, op.x, op.y) < gap) {

        p.alive = false;

        op.alive = false;

      }

    }

    if(p.alive && random() < 0.01) {

      p.alive = false;

      return [new Point(p.x, p.y, p.type), new Point(p.x, p.y, p.type)];

    }

    return p;

  });

}

​

class Point {

  constructor(x, y, type) {

    this.x = x;

    this.y = y;

    this.a = random(TAU);

    this.type = type;

    this.alive = true;

  }

  update() {

    if(!this.alive) {

      return;

    }

    const spd = 0.5;

    this.a += random(-0.1, 0.1);

    this.x += cos(this.a) * spd;

    this.y += sin(this.a) * spd;

  }

  draw() {

    fill(this.type * 255/seedPoints, 255, 255);

    circle(this.x, this.y, 10);

  }

}