Particle Systems With WebGL

The first of two projects completed for my intermediate computer graphics class. The goal of this project was to simulate and render multiple different kinds of particle systems simultaneously in a navigable 3D environment.

The project consists of a cloth simulation, a Reeve’s particle fire, a boids simulation, and a position-dependent force vector field tornado. Almost all input parameters for the different particle systems are adjustable by the user allowing them to play with different combinations of settings and see how they effect the simulations. These particle systems are implemented using a series of force and constraint applying objects and each of them can be numerically integrated using one of several integration methods.

In particular, the cloth simulation consists of a series of masses connected by simple hooke’s law springs with velocity-dependent dampening with each mass applying forces to all 8 of its neighbors. The cloth interacts with a ball that can be moved around the cloth, causing the cloth to drape over it, stretch around it, etc. The Reeves fire consists of particles that evolve over their lifespans, changing color and size as they get older. They also interact with wind and bounce around the box they are contained within, creating a flare-like effect. The boids particle system exhibits flocking behavior as each particle attempts to match its neighbor’s velocity while simultaneously trying to avoid each other and move toward the center of their neighbors’ positions. They also all evade the ball that is bouncing around in the scene, creating some interesting dynamic movement. They are rendered with velocity-dependent color to emphasize their flocking behavior. Finally, the tornado in the back is created using a position-dependent force vector field that dramatically shows the difference between different integration methods, especially the benefits of using verlet integration for position-dependent forces.

The scene can be navigated using the WASD keys along with Q/E to move vertically up and down. You can click and drag the mouse to orient the camera. The control panel on the right was made using dat.gui and allows the user to adjust almost all the variables for the particle systems.

A complete writeup for the project can be found here, and you can view the project itself here.