JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(204, 204, 204);
}

canvas {
  border: 1em solid rgba(204, 204, 204);
}

</style> <script type="text/javascript"> window.addEventListener('load', function() {
  var scripts=document.body.getElementsByTagName('script');
  var canvases=document.body.getElementsByTagName('canvas');
  new Processing(canvases[0], scripts[0].text);
}

, false);
// Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
title: Vector fields forever (Particle system)
 date: 2016-01-26
 */

ArrayList < Particle > pts;

void setup() {
  size(800, 600);
  pts = new ArrayList();

}


void draw() {
 fill(0, 10);
  rect(0, 0, width, height);
  
  pts.add(new Particle(pmouseX, pmouseY));
  
  for (int i =  pts.size() - 1; i>=0; i--) {
    Particle p = pts.get(i);
    p.update();
    p.display();
    if (p.isDead()){
    pts.remove(i);
    }
  }

}
class Particle {
  float x;
  float y;
  float rad;
  float velX;
  float velY;
  float vecFieldX;
  float vecFieldY;
  float life;
  
  
  Particle(float _x, float _y) {
    x = _x;
    y = _y;
    rad = random(7);
    life = random(255, 360);
  }


  void update() {
		float t = noise(x * 0.001, y * 0.001, frameCount * 0.001);
    vecFieldX = cos((t * TWO_PI) * 10);
    vecFieldY = sin((t * TWO_PI) * 10);
    velX+=vecFieldX;
    velY+=vecFieldY;
    x += velX;
    y += velY;
   life -= 1;
	if (velX >= 1 || velY >= 1) {
  
  	velX = 0;
    velY = 0;
    
  }
  }
  void display() {
    colorMode(HSB, 360, 100, 100);
    fill(life, 80, 80);
    float s = map(life, life*1.68, life, rad, 0);
  	strokeWeight(s);
	 ellipse(x, y, rad, rad);
  }
  
  boolean isDead() {
  if (life <= 0) {
  return true;
  }
  else {
  return false;
  }
  }
}