PixiJS Particle Emitter - Move Path

As a geek, I find Move Path super fun one to play with. It allows generation of each particle’s y-position mathematically via the particle’s x-position.

Parameters

• path: string or function – you can supply any arbitrary function here. It needs to take an x value as the argument, and return a y value.

  This behavior can also parse a string into a function. Most mathematical methods are supported, and it needs to include x in the string – ie “sin(x / 10)”

• speed: List{value: number, time: number} - speed values over time
• minMult: number – a random value between minMult and 1 is multiplied with each speed value to randomize particle speed.

Move Path Behavior Examples:

Move Path behavior configuration (including all three emitters here)

// First
{
  type: "movePath",
  config: {
    path: x => -10 * Math.floor(x / 100),
    speed: {
      list: [{value: 10, time: 0}, {value: 100, time: 0.25}, {value: 450, time: 1}],
    },
    minMult: 0.1
  },
}

// Second
{
  type: "movePath",
  config: {
    path: "cos(x/100) * 30.0 + 10.0 * random()",
    speed: {
      list: [{value: 10, time: 0}, {value: 100, time: 0.25}, {value: 450, time: 1}],
    },
    minMult: 0.1
  },
},

// Third
{
  type: "movePath",
  config: {
    path: "sin(x/10) * x / 15 + 5.0 * random()",
    speed: {
      list: [{value: 10, time: 0}, {value: 100, time: 0.25}, {value: 450, time: 1}],
    },
    minMult: 0.1
  },
},

PixiJS Particle Emitter: The Unauthorized Manual