How to code Particles

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:

particles moving around the screen

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.

particles moving around the screen connected by a line when they're within a set distance

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:

particles drawing even bigger lines to each other

You could get silly with it:

ridiculous particles connecting to each other

Leave a Reply