Particle Systems in Computer Graphics

Let’s talk about the world of particle systems in computer graphics today! In this blog post, we embark on an enlightening journey to understand the core concepts, applications, and real-world examples that make particle systems a cornerstone in the creation of breathtaking visual experiences.

This blog post is part of the Genuary 2024 series. It has a corresponding Github repository: ao-genuary/01-particles.

What are Particle Systems?

At its essence, a particle system is a dynamic simulation technique used in computer graphics to model and render complex, dynamic visual effects. Instead of treating visuals as static entities, particle systems breathe life into scenes by representing visual elements as individual particles. These particles move, interact, and evolve over time, collectively creating mesmerizing animations.

Key Definitions:

1. Particle: The fundamental unit in a particle system, representing an individual visual element (e.g., raindrop, spark, or snowflake).
2. Emitter: The source from which particles are generated, defining their initial properties.
3. Attributes: Characteristics of particles such as position, velocity, size, color, and lifespan.
4. Forces: Influences that modify particle behavior, including gravity, wind, and turbulence.

Applications of Particle Systems

1. Special Effects in Films:
   • Particle systems are extensively used in the film industry to create realistic and fantastical effects. Examples include explosions, fire, smoke, and magical spells.
2. Video Games:
   • Gaming environments come to life through particle systems. From simulating raindrops and explosions to dynamic weather effects, particles enhance the immersive quality of games.
3. Simulations and Scientific Visualization:
   • Particle systems play a crucial role in scientific simulations, allowing researchers to visualize complex phenomena such as fluid dynamics, molecular interactions, and weather patterns.
4. User Interfaces and Interactive Design:
   • UI designers leverage particle systems for interactive elements, enhancing user experience with dynamic transitions, hover effects, and feedback animations.
5. Architectural Visualization:
   • Architects and designers use particle systems to simulate environmental elements like foliage, water droplets, and atmospheric effects, creating realistic virtual representations.

Creating Particle Systems With Processing

Let’s implement these key definitions of particle systems in computer graphics mentioned above and create a first simple example using Processing. (You can copy & paste this concept for any other programming language providing an interface to image creation and manipulation – Python & Cairo works just as well, for example). There’s very good example code for getting started with particle systems using Processing.

According to our key definitions above, we first need an object (or a data type) for the prototype for a particle. Using an object oriented approach, this would be a class named particle. A particle is the fundamental object of any particle system and has certain properties (for example position, shape, size, and color). An emitter would then create particles at a specific rate (for example, one particle per frame or second) and assign them specific attributes during emission (initial position, velocity, acceleration, color, lifetime, and shape for instance). These attributes are updated stepwise (per frame, per step, per time unit) by taking into account forces that modify particle behavior (acceleration, for example). The sum of all particles is our particle system. This particle system gets its own class ParticleSystem. 

Let’s give it a try and start with the example for one particle system provided on the Processing website, the Simple Particle System and adapt it to our needs and play with it to learn more about particle systems in computer graphics.

We need to define what’s a particle first. As outlined above, we’re using an object oriented approach and define a particle class for this purpose. Particles need to have certain attributes: for example position, velocity, acceleration, lifetime, color, shape and so on. In our first example each particle has an initial position, velocity, acceleration, and lifespan.[1][2]

class Particle {
PVector pos; // position
PVector v; // velocity
PVector a; // acceleration
int life; // lifespan (generations)
}

Each instance of the particle object has to be constructed (emitted):

Particle(PVector p0) {
this.pos = p0.copy();
this.a = new PVector(random(-0.05, 0.05), random(-0.05, 0.05));
this.v = new PVector(random(-0.1, 0.01), random(-0.1, 0.1));
this.life = 255;
this.col = color(random(0,255), random(0,255), random(0,255));
}

The particle class has run, update and a display methods.

void run() {
update();
display();
}

void update () {
this.v.add(this.a);
this.pos.add(this.v);
this.life -= 2;
}

void display() {
stroke(col);
fill(this.col, this.life);
ellipse(this.pos.x, this.pos.y, this.life/4, this.life/4);
}

Both size and alpha (transparency) are dependent on the current lifetime and decrease from their start value towards zero. Particles are eliminated from the particle system (and the corresponding ArrayList, in this example) when its lifetime is smaller or equal to zero.

We create a particle system (let’s call it ps) and assign a starting position for its first particle to be added. The example mentioned above (the Simple Particle System) uses a dynamic array list (called ArrayList in Processing [2]) for storing the particles, which means you can add and remove particles on the fly and do not need to know how many particles there are going to be in the end. You could also use a basic array of particle objects (instances of our class Particle) instead, but then you’d need to know how many particles will be in your particle system at once, or limit the number of particles in one particle system to a fixed number (ten or hundred or a thousand, for instance).

class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;

}

The ParticleSystem class has a constructor too:

ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
println(particles.size());
}

It also has methods for adding particles to the system, and a run() method including a check if a specific particle is still alive or not.

void addParticle(PVector pos) {
particles.add(new Particle(pos));
}

void run() {
for (int i = particles.size()-1; i >= 0; i–) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}

First run: particles emitted at the center of the picture, with random starting velocities, all with the same color and size attributes.

Secon run: same as above, but with added transparency according to each particle’s lifetime.

Added particle size, decreasing with lifetime.

Added some color.

 

 

[1] Double slashes (“//”) indicate comments in our code.

[2] We use Processing’s PVector data type to store three dimensional vectors, specifically Euclidean (also known as geometric) vectors.

[3] Not all programming languages provide variable length arrays. There are workarounds like using hashes, for example in Perl and Python. Eventually consult the reference of the programming language you’re using for further information on this topic.

 

Examples of Particle Systems in Action

1. Explosions in Movies:
   • In action-packed films, particle systems simulate explosive events with detailed fiery plumes, smoke, and debris, heightening the intensity of the scene.
2. Fireworks Displays in Games:
   • Video games often utilize particle systems to recreate stunning fireworks displays, complete with vibrant bursts of color and sparkling trails.
3. Interactive Web Design:
   • Websites with dynamic backgrounds and interactive elements, such as hovering particles responding to user movements, showcase the versatility of particle systems in web design.
4. Weather Simulations:
   • Scientific visualizations use particle systems to model and simulate weather conditions, providing insightful representations of atmospheric phenomena.
5. Magical Effects in Animation:
   • Animated films employ particle systems to bring magical elements to life, like enchanting sparkles, swirling vortexes, and mystical auras.

As we wrap up this exploration, the incredible versatility and impact of particle systems in computer graphics become abundantly clear. From enhancing entertainment to facilitating scientific discovery, these dynamic simulations continue to push the boundaries of what is visually achievable, captivating audiences across various industries. The magic lies not just in the particles themselves, but in the limitless possibilities they unlock for creative minds in the ever-evolving landscape of computer graphics.

« Happy Accidents: Surprises & Generative PencilsGenerating Tartan Patterns »