JSFiddle - React, Tailwind, and code Playground

Acid system (p5.js)

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
	overflow: hidden;
}

JavaScript

// Acid particles p5
var system;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  system = new ParticleSyst(createVector(width / 2, height / 2));
}

function draw() {
  background(10);
  system.origin = createVector(mouseX, mouseY);
  system.addParticle();
  system.run();
}

// Particle class
var Particle = function(pos) {
  this.pos = pos.copy();
  this.vel = createVector(random(-1, 1), random(-1, 0));
  this.rad = random(10, 30);
};

Particle.prototype.run = function() {
  this.update();
  this.display();
}

Particle.prototype.update = function() {
  this.pos.add(this.vel);
  this.rad -= 0.25;
};

Particle.prototype.display = function() {
  noStroke();
  colorMode(HSB, 360, 100, 100);
  fill(random(255, 300) / this.rad * 5, 80, 80);
  ellipse(this.pos.x, this.pos.y, this.rad, this.rad);
};

Particle.prototype.isDead = function() {
  if (this.rad < 0) {
    return true;
  } else {
    return false;
  }
};


var ParticleSyst = function(pos) {
  this.origin = pos.copy();
  this.particles = [];
};

ParticleSyst.prototype.addParticle = function() {
  this.particles.push(new Particle(this.origin));
};

ParticleSyst.prototype.run = function() {
  for (var i = this.particles.length - 1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};