JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

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

CSS

html, body{
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

canvas{
  filter: blur(8px);
  opacity: 0.5;
}

JavaScript

/* Credit goes to: Johan Karlsson and his Post about Particles in Flowfields:
https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field */

let canvas, ctx, field, w, h, fieldSize, columns, rows, noiseZ, particles, hue;
(noiseZ = 0);
particleCount = 2000;
particleSize = 0.9;
fieldSize = 70;
fieldForce = 0.15;
noiseSpeed = 0.003;
sORp = true;
trailLength = 0.15;
hueBase = 10;
hueRange = 5;
maxSpeed = 2.5;
enableGUI = true;

var ui = new function() {
  this.particleCount = particleCount;
  this.particleSize = particleSize;
  this.fieldSize = fieldSize;
  this.fieldForce = fieldForce;
  this.noiseSpeed = noiseSpeed;
  this.simplexOrPerlin = sORp;
  this.trailLength = trailLength;
  this.maxSpeed = maxSpeed;
  this.hueBase = hueBase;
  this.hueRange = hueRange;

  this.change = function() {
    particleSize = ui.particleSize;
    fieldSize = ui.fieldSize;
    fieldForce = ui.fieldForce;
    noiseSpeed = ui.noiseSpeed;
    maxSpeed = ui.maxSpeed;
    hueBase = ui.hueBase;
    hueRange = ui.hueRange;
    fieldColor = ui.fieldColor;
    ui.simplexOrPerlin?sORp=1:sORp=0;
  }
  
  this.reset = function() {
    particleCount = ui.particleCount;
    reset();
  }
  
  this.bgColor = function(){
    trailLength = ui.trailLength;
  }
}();

if(enableGUI){
  var gui = new dat.GUI();
  f1 = gui.addFolder("Color");
  f2 = gui.addFolder("Particle");
  f3 = gui.addFolder("Flowfield");
  f1.add(ui, "hueBase", 0, 360).onChange(ui.change);
  f1.add(ui, "hueRange", 0, 40).onChange(ui.change);
  f2.add(ui, "particleCount", 1000, 10000).step(100).onChange(ui.reset);
  f2.add(ui, "particleSize", 0.1, 3).onChange(ui.change);
  f2.add(ui, "trailLength", 0.05, 0.60).onChange(ui.bgColor);
  f2.add(ui, "maxSpeed", 1.0, 4.0).onChange(ui.change);
  f3.add(ui, "fieldSize", 10, 150).step(1).onChange(ui.change);
  f3.add(ui, "fieldForce", 0.05, 1).onChange(ui.change);
  f3.add(ui, "noiseSpeed", 0.001, 0.005).onChange(ui.change);
  f3.add(ui,...