Bokeh Particles

by schrodingers

HTML

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

CSS

</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: Bokeh Particles
 date: 2015-12-12
 */
ArrayList<Particle> pts = new ArrayList<Particle>();
int num = random(100);
void setup() {

  size(800, 600);
  colorMode(HSB, 360, 100, 100, 100);
  for (int i = 0; i < num; i++) {
    pts.add(new Particle());
  } 

}

void draw() {
  background(210, 45, 20);  
  blendMode(ADD);         
  for (int i = 0; i < pts.size(); i++) {
    pts.get(i).update();
    pts.get(i).display();
  }
}

class Particle {
  PVector loc;
  PVector vel;

  float size;   
  color c;

  Particle() {
    size = random(30, 130);
    loc = new PVector(random(size, width-size), random(size, height-size));
    vel = new PVector(random(-2, 2), random(-2, 2));
    c = color(random(180, 280), 80, random(10, 60));
  }

  void display() {
    fill(c);
    noStroke();
    ellipse(loc.x, loc.y, size, size);
  }

  void update() {
    loc.add(vel);

    if (loc.x <= this.size/2 || loc.x >= width-size/2) {
      vel.x *= -0.95;
    }
    if (loc.y <= this.size/2 || loc.y >= height-size/2) {
      vel.y *= -1;
    }
  }
}
// Utilities functions
void keyPressed() {
  if (key == 's' || key == 'S') {
    saveFrame("out/frame-###.png");
    println("Picture saved as frame-" + frameCount + ".png");
  }
}