The Art of Particles

Particle systems first appeared in 1982. A special effect artist, Bill Reeves, used them in Star Trek II: The Wrath of Kahn for a scene called the “genesis effect.”

In essence a particle system is just an algorithm controlling particle creation and interaction. In practice this normally consists of an emitter, usually invisible, positioned somewhere in the world and tiny graphic elements (particles) the emitter spits out from its hidden position, all at once or in intervals.

By varying how, when and where of particle creation and what forces act upon them, we can simulate a variety of real-world effects like fire, smoke and rain. In theory any physical phenomenon could be simulated by a particle system since all matter is basically made up of particles (atoms.) However, the computational cost of juggling even a few thousand particles rapidly becomes a bottleneck. But with a modest number of particles, and clever coding, one can still produce cool effects, even in a lowly web browser.

For code geeks, particle systems are great projects to make from scratch, but this post is focused on their use in generative art. We will leverage Phaser, an engine used to create HTML5 games, primarily because it comes with a built in particle system and physics engine (useful for applying forces to the particles, like gravity and acceleration.) You could also experiment with these systems in Processing and Daniel Shiffman has some great tutorials on a simple prototype.

Here’s a self-contained Phaser scaffold to kick off experiments:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="initial-scale=1 maximum-scale=1 user-scalable=0"
    />
    <title>Phaser Scaffold</title>
    <style>
      body {
      background-color: #000000;
      border: 0;
      margin: 0;
      overflow: hidden:
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
    <script type="text/javascript">
      var game = new Phaser.Game("100%", "100%", Phaser.AUTO, "scratchpad", {
        preload: preload,
        create: create,
      });

      function preload() {}

      function create() {}
    </script>
  </body>
</html>

Phaser looks for function names to call at specific times. The function preload() is called for loading images and assets, create() is then called after all assets are loaded. After that, if update() and render() are defined, they are called in the standard game loop pattern at the maximum browser framerate.

Creating particles with this scaffold is easy. We’ll just load a small image to serve as the particle and define an emitter with some parameters to shoot copies onto the scene:

var emitter;
var maxParticles = 1000;
var explode = false;
var lifespan = 5000;
var frequency = 5;
var quantity = 0; // if 0 and explode false then continuous

function preload() {
  game.load.image("particle", "p1.png");
}

function create() {
  emitter = game.add.emitter(
    game.world.centerX,
    game.world.centerY,
    maxParticles
  );
  emitter.makeParticles("particle");
  emitter.start(explode, lifespan, frequency, quantity);
}

Particles will either explode from the emitter all at once, like a firework, in which case:

explode = true
lifespan = how long the particles “live” in milliseconds, after which they dissappear from screen
frequency has no effect if explode = true
quantity is how many particles are created during the explosion, up to amount in maxParticles

For stream from the emitter in a continuous flow of particles:

explode = false
frequency = interval in milliseconds between firing particles
quantity = 0 means keep firing particles indefinitely at the frequency specified, if maxParticles are reached, wait until one dies before firing another to take its place; if quantity = n just fire n particles total and then stop

Emitters have many additional properties to tweak besides what’s set in the start parameter. For example:

minParticleScale, maxParticleScale sets the range between the particle is randomly scaled when created
setAlpha(0.1, 0.9); as an example, sets the range of the transparency applied to the particle
width and height set the the area in which particles emerge, by default this is a single point, like a cannon, but it can be expanded to any size and the particle will emerge from a random location within this area
minParticleSpeed, maxParticleSpeed control a range of velocities each particle is assigned

Here’s a quick technique for masking images in Phaser:

var mask = game.add.graphics(0, 0);
mask.beginFill(0xffffff);
mask.drawCircle(game.world.centerX, game.world.centerY, 645);

Which creates a mask that be applied to any image, essentially “clipping” what’s displayed of the image to just the size and shape of the mask. That’s all the elements needed to create the following project:

See the Pen Triangle Spirals by Kentskyo (@kentskyo) on CodePen.

26 Jul 2016 phaser particles Generative Art