JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<canvas id="canvas"></canvas>

CSS

body {
  padding: 0;
  margin: 0;
  background-color: #282828;
  overflow: hidden;
}

JavaScript

int totalParticles = 100;

void setup() {
  size(window.innerWidth, 800);
  background(0);
  cursor= new PVector(window.innerWidth/2, window.innerHeight/2);
  particles = new ArrayList<Particle>();
  for(int i= 0; i < totalParticles; i++){
    particles.add(new Particle(new PVector(random(width),random(height))));
  }
}
 
void draw() {
  fill(0,20);
  rect(0,0,width,height);
  cursor.x = mouseX;
  cursor.y = mouseY;
  for (int i = 0; i< particles.size(); i++) {
    Particle c = particles.get(i);
    c.draw();
  }
}

class Particle {
  PVector velocity;
  PVector acceleration;
  PVector position;
  float radius;
  int limit = 20;
  float r, g, b;
  
  Particle(PVector v) {
    position = v.get();
    radius = random(5, 10);
    velocity = new PVector(random(-1, 1),random(-1, 1));
  }
 
  void draw() {
    update();
    fill(r,g,b);
    ellipse(position.x, position.y, radius, radius);
  }
  
  void update() {
    PVector acceleration = PVector.sub(cursor, position);
    acceleration.setMag(0.75);
    velocity.add(acceleration);
    velocity.limit(limit);
    position.add(velocity);
    r = abs(velocity.x) * 255 / limit;
    g = abs(velocity.y) * 255 / limit;
    b = (velocity.x + velocity.y)/2;
  }
}