let windowScale;

let numcells,cellsize;

const palette = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

// this class describes the properties of a single particle.

class Particle {

  // setting the co-ordinates, radius and the

  // speed of a particle in both the co-ordinates axes.

  constructor(c1, c2, x, y) {

    this.x = x;//random(0, width);

    this.y = y;//random(0, height);

    this.r = random(1, 8);

    this.xSpeed = random(-2, 2);

    this.ySpeed = random(-1, 1.5);

    this.c1 = c1;

    this.c2 = c2;

    this.timer = random(20,150);

    this.dir = random([0,1,2,3]);

  }

​

  // creation of a particle.

  createParticle() {

    noStroke();

    fill("rgba(200,169,169,0.5)");

    //circle(this.x,this.y,this.r);

  }

​

  // setting the particle in motion.

  moveParticle() {

    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height || this.timer <= 0) 

      this.placeParticle();//this.xSpeed *= -1;

    // if (this.y < 0 || this.y > height) this.placeParticle();//this.ySpeed *= -1;

    if (this.dir == 0) this.x += this.xSpeed;

    if (this.dir == 1) this.x -= this.xSpeed;

    if (this.dir == 2) this.y -= this.ySpeed;

    if (this.dir == 3) this.y += this.ySpeed;

    // this.x += this.xSpeed;

    // this.y += this.ySpeed;

    this.timer--;

  }

  placeParticle() {

    this.x = int(random(0,numcells))*cellsize;

    this.y = int(random(0,numcells))*cellsize;

    // this.x = random(0, width);

    // this.y = random(0, height);

    this.timer = random(20,150);

  }

​

  // this function creates the connections(lines)

  // between particles which are less than a certain distance apart

  joinParticles(particles) {

    particles.forEach((element) => {

      let dis = dist(this.x, this.y, element.x, element.y);

      if (dis < 85 * windowScale) {

        // stroke("rgba(255,255,255,0.04)");

        let c = lerpColor(color(this.c1), color(this.c2), map(dis, 0, 85*windowScale,0.0,1.0))

        c.setAlpha(10);

        stroke(c);

        line(this.x, this.y, element.x, element.y);

      }

    });

  }

}

​

// an array to add multiple particles

let particles = [];

​

let font;

const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

function preload() {

  font = loadFont("NOKIAFC22.TTF");

}

​

function setup() {

  createCanvas(3000, 3000);

  windowScale = width / 1000;

​

  textFont(font);

  let fontSize = 12 * windowScale;

  textSize(fontSize);

  textAlign(CENTER, CENTER);

  let halfFont = fontSize / 2;

​

  // for (let i = 0; i < width / 10; i++) {

  //   particles.push(new Particle(random(palette), random(palette), x, height/2));

  // }

​

  numcells = width / 10;

  cellsize = width / numcells;

  for (let y = 0; y < height+numcells; y += numcells) {

    for (let x = 0; x < width+numcells; x += numcells) {

      particles.push(new Particle(random(palette), random(palette), x, y));

    }

  }

  background("#0f0f0f");

  // background(220);

​

  strokeWeight(windowScale);

  // stroke("rgba(255,255,255,0.04)");

  stroke(color(255, 255, 255, 20));

  noFill();

  for (let y = fontSize; y < height; y += 2 * fontSize) {

    for (let x = fontSize; x < width; x += 2 * fontSize) {

      let idx = int(random(0, chars.length));

      text(

        chars[idx],

        x + random(-halfFont, halfFont),

        y + random(-halfFont, halfFont)

      );

    }

  }

  p5grain.setup();

  // example: custom granulateSimple implementation

  const amount = 8;

  const alpha = true;

  tinkerPixels((index, total) => {

    const grainAmount = Math.floor(random() * (amount * 2 + 1)) - amount;

    pixels[index] = pixels[index] + grainAmount;

    pixels[index + 1] = pixels[index + 1] + grainAmount;

    pixels[index + 2] = pixels[index + 2] + grainAmount;

    if (alpha) {

      pixels[index + 3] = pixels[index + 3] + grainAmount;

    }

  });

  // granulateSimple(42);

}

​

function draw() {

  // push();

  // fill(color(0,0,0,10));

  // noStroke();

  // rect(0,0,width,height);

  // pop();

  // strokeWeight(windowScale);

  for (let i = 0; i < particles.length; i++) {

    particles[i].createParticle();

    particles[i].moveParticle();

    particles[i].joinParticles(particles.slice(i));

  }

  if (frameCount > 250){//} 1500) {

    console.log("done");

    noLoop();

  }

}

​