SOURCE

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  for (var i = 0; i < 99; i++) {
    var p = new Particle(40);
    particles.push(p);
  }
  var checkbox = createCheckbox("Draw Emoji", true);
  checkbox.changed(() => drawEmoji = !drawEmoji);

  erraticnessSlider = createSlider(1, 200, 50, 1);
  erraticnessSlider.position(10, 30);
  erraticnessSlider.style('width', '80px');

  speedSlider = createSlider(1, 100, 10, 1);
  speedSlider.position(10, 50);
  speedSlider.style('width', '80px');

  radiusSlider = createSlider(5, 100, 40, 1);
  radiusSlider.position(10, 70);
  radiusSlider.style('width', '80px');
}

var counter = 0;
var particles = [];
var drawEmoji = true;
var erraticnessSlider;
var speedSlider;
var radiusSlider;

function draw() {
  clear();

  particles.forEach((p, i) => {
    p.r = radiusSlider.value();
    p.move(counter + 10 * i);
    p.draw(i, drawEmoji);
    counter += erraticnessSlider.value() / 500000;
  });
}

function Particle(r) {
  this.pos = createVector(windowWidth / 2, windowHeight / 2);
  this.color = "hsla(" + round(random(360)) + ", 100%, 50%, 0.4)";
  this.r = r;
}

Particle.prototype.wrap = function() {
  if (this.pos.x < -this.r) {
    this.pos.x = windowWidth + this.r;
  }
  if (this.pos.x > windowWidth + this.r) {
    this.pos.x = -this.r;
  }
  if (this.pos.y < -this.r) {
    this.pos.y = windowHeight + this.r;
  }
  if (this.pos.y > windowHeight + this.r) {
    this.pos.y = -this.r;
  }
}

Particle.prototype.move = function(offset) {
  var angle = map(noise(offset), 0, 1, 0, 720);
  this.pos.x += cos(angle) * speedSlider.value() / 10;
  this.pos.y += sin(angle) * speedSlider.value() / 10;
  this.wrap();
}

Particle.prototype.draw = function(index, drawEmoji) {
  fill(this.color);
  ellipse(this.pos.x, this.pos.y, this.r);
  if (drawEmoji) {
    var map = ["����", "����", "��", "☃️", "��"];
    var t = map[index % map.length];
    fill(0);
    var w = textWidth(t);
    var size = this.r * 0.7;
    textSize(size);
    var startX = this.pos.x - w / 2;
    var startY = this.pos.y + size * 0.4;
    text(t, startX, startY);
  }
}

body, html {
  margin: 0;
  position: relative;
  background: linear-gradient(to left top, #111, #666);
}

div {
  position: absolute;
  left: 0;
  top: 0;
  margin: 10px;
}