Simple particle effects

A webgl animation instance library.

How to Start

install by npm:

$ npm install @tarii/particle --save

Prepare an image and use black and white to distinguish and mark the location information of particle convergence (black indicates that particles will be concentrated here)

• Grayscale is allowed, but the effect has not been designed.
• The image size should be a power of 2 to prevent unexpected situations.

The following figure is an example:

Call library:

import { Particle } from '@tarii/particle'

const particle = new Particle({
  // the URL of the prepared image
  // important and necessary!
  target: '/webgl-logo.jpg',

  // number of particles
  amount: 10000,
  // particle size scaling factor
  size: 1,

  // The proportion of space occupied by effective information in the image (0-100%).
  // Setting a reasonable boundary can increase the density of particles in the effective part.
  effectiveWidth: 1,
  effectiveHeight: 1,

  // background
  backgroundColor: '#010203',

  // particle color
  basicColor: '#b3b3b3',
  excitedColor: '#fffd40',
})

// Bind a parent element and start automatically.
particle.mount(document.querySelector('#wrapper'))

// Play the entering animation within the specified time (milliseconds).
particle.enter(2000)

// Play the leaving animation within the specified time (milliseconds).
particle.leave(2000)

// Stop the rerequestAnimationFrame() loop
particle.stop()