GuruBlog

Particle effects look very fancy but are actually very easy to implement in processing. This is a small tutoral that shows how. The particle effect implemented here is 2-Dimentional but the same principles can be applied to a 3D version.

The first thing we need are arrays to store the position and the velocity of the particles we are creating and the number of particles we want to create.

int NUM = 40;
PVector[] pos;
PVector[] vel;

we also need an array to store the age of a particle to make it dissapear after some time (fireworks particle that fade, water that drops back in the fountain, fume particles that slide up into the air, ...)

int[] ttl;

Now comes the usual setup method where we initialize the size of our sketch-window and fill our arrays.

void setup() {
    size(300,300);
    frameRate(25);

    pos = new PVector[NUM];
    vel = new PVector[NUM];
    ttl = new int[NUM];
    for( int i = 0; i < NUM; i++) {
        pos[i] = new PVector(0,0);
        if (i < NUM/2) {
            vel[i] = new PVector(random(-2,2), random(-10,-5));
            ttl[i] = int(random(50,100));
        } else {
            vel[i] = new PVector(0,0);
            ttl[i] = int(random(0,50));
        }
    }
}

We place all particles at the origin and make them go upward. For the first halve of the particles we define a velocity that points upward, the rest stays at the origin for now. we also set the ttl value for every particle to a random value between 50 and 100. We do this to prevent all particles we define to move away from the origin in an big burst at the start of our sketch.

next thing we need is our draw method. Here we will draw our particle and update the position. We also decrease the ttl value for every particle. If the ttl falls below zero we recreate the particle at the origin and assign it a new velocity and ttl. To update the position of the current particle we simply add it's velocity. Maybe you vagually remember the s = s0 + t * v stuff your math- or physics-Teacher tried you to remember - this is exactly what we are doing here)

void draw() {
    background(0);
    stroke(255);
    strokeWeight(2);

    for( int i = 0; i < NUM; i++) {
        point( pos[i].x + width/2, pos[i].y + height );
    }

    for( int i = 0; i < NUM; i++) {
        pos[i].add( vel[i] );
        ttl[i]--;
        if (ttl[i] < 0) {
            vel[i] = new PVector(random(-2,2), random(-10,-5));
            pos[i] = new PVector(0,0);
            ttl[i] = int(random(50,100));
        }
    }
}

We now have a simple particle fountain that throws particles up into the air. Which dissapear after some time.

What could be done next is to add gravity by adding the vector PVector(0,10) to the velocity or replace the little white dot we draw for every particle by something more fancy.

also try to play around with the parameters of the initial velocity or try to change the color and size of particles depending on the current ttl value