Timer: Min Radius: Max Radius:

Using the HTML5 canvas tag and the processing.js particles are spawned on the canvas from the cursor position. This example was adapted from Daniel Shiffman's Simple Particle example on Processing.org for use in processing.js.


View Source
Back to IM2490 Week 6
[ Processing.js Experiments ]

// Adapted from Daniel Shiffman's Simple Particle example
// for Processing.js by John Keston
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles 
class ParticleSystem {
  ArrayList particles;    // An arraylist for all the particles
  PVector origin;         // An origin point for where particles are born

  ParticleSystem(int num, PVector v) {
    particles = new ArrayList();              // Initialize the arraylist
    origin = v.get();                         // Store the origin point
    for (int i = 0; i < num; i++) {
      particles.add(new Particle(origin));    // Add "num" amount of particles to the arraylist
    }
  }
  void run() {
    // Cycle through the ArrayList backwards b/c we are deleting
    for (int i = particles.size()-1; i >= 0; i--) {
      Particle p = (Particle) particles.get(i);
      p.run();
      if (p.dead()) {
        particles.remove(i);
      }
    }
  }
  void addParticle(float x, float y) {
    particles.add(new Particle(new PVector(x,y)));
  }
  // A method to test if the particle system still has particles
  boolean dead() {
    if (particles.isEmpty()) {
      return true;
    } 
    else {
      return false;
    }
  }
}

// A simple Particle class
class Particle {
  PVector loc;
  PVector vel;
  PVector acc;
  float r;
  float timer;
  // Another constructor (the one we are using here)
  Particle(PVector l) {
    acc = new PVector(0,0.05,0);
    vel = new PVector(random(-1,1),random(-2,0),0);
    loc = l.get();
    r = rad;
    timer = 160.0;
  }
  void run() {
    update();
    render();
  }
  // Method to update location
  void update() {
    vel.add(acc);
    loc.add(vel);
    timer -= 1.0;
  }
  // Method to display
  void render() {
    ellipseMode(CENTER);
    stroke(255,timer);
    noFill();
    ellipse(loc.x,loc.y,r,r);
  }
  // Is the particle still useful?
  boolean dead() {
    if (timer <= 0.0) {
      return true;
    } 
    else {
      return false;
    }
  }
}

ParticleSystem ps;
float rad = 5.0;
float dir = 1.0;

void setup() {
  frameRate(30);
  background(0);
  size(800, 360);
  colorMode(RGB, 255, 255, 255, 100);
  ps = new ParticleSystem(1, new PVector(width/2,height/2,0));
  smooth();
}

void draw() {
  fill(0,5);
  rect(0,0,width,height);
  rad += dir;
  if (rad > 40 || rad < 5) {
  	dir *= -1;	
  }
  ps.run();
  ps.addParticle(mouseX,mouseY);
} 

[top]