There are 3 certainties in life: death, taxes and somebody you know has a website that uses particles.js as the background.

I’ve got an hour to spare so I thought I’d have a crack at coding something similar.

Below is an example of particles.js stolen from here.

It looks relatively simple, some dots are floating about with varying sizes and as they pass each other they create a temporary connection when they’re within a specified range. That’s my observation, there may be more to it, let’s find out.

Let’s start by creating some dots that move around:

That was simple enough, I’ve also made the dots wrap, so if they go off the screen they’ll appear on the other side (like Snake).

I’ve kept the code in one file for simplicity:

const DOT_COUNT = 50;
let dots = [];

function setup() {
  createCanvas(720, 500);
  
  for (let i = 0; i < DOT_COUNT; i++) {
    dots.push(new Dot())
  }
}

function draw() {
  background('#51929c');
  noStroke();
  
  for (let dot of dots) {
    dot.update();
    dot.draw();
  }
}


class Dot {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.r = random(3, 8);
    this.xSpeed = random(-2, 2);
    this.ySpeed = random(-2, 2);
  }
  
  update() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;

    this.wrap();
    
  }
  
  wrap() {
    if (this.x > width) this.x = 0;
    if (this.y > height) this.y = 0;
    if (this.x < 0) this.x = width;
    if (this.y < 0) this.y = height;
  }
  
  draw() {
    circle(this.x, this.y, this.r);
  }
}

Next, let’s join the dots up when they’re within a certain distance. This should be as simple as given a certain dot compare said dot against all other dots by calculating the distance, this won’t be efficient but It doesn’t need to be.

And the final code looks like this:

const DOT_COUNT = 50;
let dots = [];

function setup() {
  createCanvas(720, 500);
  
  for (let i = 0; i < DOT_COUNT; i++) {
    dots.push(new Dot())
  }
}

function draw() {
  background('#51929c');
  noStroke();
  
  for (let dot of dots) {
    dot.update();
    dot.draw();
    dot.drawLines(dots);
  }
}


class Dot {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.r = random(3, 8);
    this.xSpeed = random(-2, 2);
    this.ySpeed = random(-2, 2);
  }
  
  update() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;

    this.wrap();
    
  }
  
  wrap() {
    if (this.x > width) this.x = 0;
    if (this.y > height) this.y = 0;
    if (this.x < 0) this.x = width;
    if (this.y < 0) this.y = height;
  }
  
  draw() {
    circle(this.x, this.y, this.r);
  }
  
  drawLines(dots) {
    for (let dot of dots) {
      if (dist(this.x, this.y, dot.x, dot.y) < 50) {
        stroke('rgba(255,255,255,0.2)');
        line(this.x, this.y, dot.x, dot.y);
      }
    }
  }
}

Well, there was even less to it than I’d originally thought. All the code can be found here, I’ve added a few more bits that can be configured.

For instance, if you twice the distance it’ll look like this:

You could get silly with it: