Particle system Yellow ACID

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;
}

</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: Explosion (Particle system)
Yellow ACID
 date: 2017-n
 */
ArrayList < Particle > pts;
void setup() {
  size(800, 600);
  pts = new ArrayList();
  for (int i = 0; i < 15; i++) {
    //   pts.add(new Particle(0, 0));
  }
}

void draw() {
  background(44);
  if (mousePressed) {
    pts.add(new Particle(mouseX, mouseY));
  } else if (!mousePressed) {
    pts.add(new Particle(width / 2, height - 50));
  }
  for (int i = pts.size() - 1; i > 0; i--) {
    Particle p = pts.get(i);
    p.update();
    p.display();
    if (p.isDead()) {
      pts.remove(p);
    }
  }
}


class Particle {
  PVector loc;
  PVector vel;
  float rad;
  float angle;

  Particle(float x, float y) {
    loc = new PVector(x, y);
    vel = new PVector(random(-1, 1), random(-1, 1));
    rad = random(10, 30);
    angle = random(TWO_PI);
  }



  void update() {
    vel.x = cos((angle * TWO_PI));
    vel.y = sin((angle * TWO_PI));
    loc.add(vel);
    rad -= 0.25;

  }


  void display() {
    colorMode(HSB, 360, 100, 100);
    fill((int) random(255, 300) / rad * 5, 80, 80);


    noStroke();

    //(320 / rad, 80, 80);
    ellipse(loc.x, loc.y, rad, rad);
  }

  boolean isDead() {
    if (rad <= 1) {

      return true;
    }
  }
}