ParticleInit

Describes the values that will be assigned to a particle when it’s spawned.

Every field is a Sampler: either a fixed value, or a function that’s called once for each particle when it spawns, so that particles can differ in appearance. The results become the particle’s initial state (see Particle). After that, behaviors and the simulation steps take over.

The values position, velocity, orientation and angularVelocity are optional, and default to values producing a particle that starts at the origin, does not move or spin and faces the viewer.

Example

createEffect({
    origin: { x: 200, y: 300 },
    schedule: { bursts: [{ count: 30 }] },
    particleInit: {
        position: emitFrom({ type: "disk", radius: 20 }),
        velocity: cone(90, 30, range(200, 400)),
        orientation: randomOrientation(),
        angularVelocity: randomSpin(90, 270),
        size: range(8, 14),
        color: pick(["#ff5a5f", "#ffb400", "#00a699"]),
        shape: { type: "circle" },
        lifetime: range(2, 3),
    },
});

Properties

angularVelocityoptionalSampler<Vec3>default{ x: 0, y: 0, z: 0 }

How fast the particle spins initially: the direction is the rotation axis (following the right-hand rule) and the length is the speed in degrees per second. Use randomSpin() for a random axis and speed.

colorSampler<string | Color>

The initial color of the particle: a CSS color string or a Color. Strings are converted with color() when the particle spawns, so an invalid color throws at that point rather than when the effect is created.

lifetimeSampler<number>

How long the particle lives, in seconds.

orientationoptionalSampler<Quat>default{ x: 0, y: 0, z: 0, w: 1 }

The particle’s initial rotation. Use randomOrientation() for a random one.

positionoptionalSampler<Vec3>default{ x: 0, y: 0, z: 0 }

Where the particle spawns, in pixels from the effect’s origin, in particle space so +y points upwards. Use emitFrom() to spawn particles from an area.

shapeSampler<ParticleShape>

The shape the particle is drawn as. Use pick() to mix several shapes in the effect.

sizeSampler<number>

The particle’s initial size, in pixels.

velocityoptionalSampler<Vec3>default{ x: 0, y: 0, z: 0 }

The particle’s starting velocity, in px/s. Use cone() to emit particles in a direction with some spread.