Particles

Port of Vincent Garreau' particles.js written in Dart with added features.

Instalation

$ pub get particles

Usage

The particle class takes 2 optional named arguments: id of type String, and config of type Map<String, dynamic>.

Particles particles = new Particles(id: 'id', config: {/*configuration map*/}).start();

Configuration

The default config Map looks something like this

Map<String, dynamic> settings = {
  'particles': {
    'number': {
      'value': 100,
      'density': {
        'enable': true,
        'value_area': 800
      }
    },
    'color': {
      'value': '#fff'
    },
    'shape': {
      'type': 'circle',
      'stroke': {
        'width': 0,
        'color': '#FFFFFF'
      },
      'polygon': {
        'nb_sides': 5
      },
      'character': {
        'value': 'P',
        'font': 'arial',
        'style': 'normal',
        'weight': 'normal',
      },
      'image': {
        'src': '',
        'width': 100,
        'height': 100
      }
    },
    'opacity': {
      'value': 1,
      'random': false,
      'anim': {
        'enable': false,
        'speed': 2,
        'opacity_min': 0,
        'sync': false
      }
    },
    'size': {
      'value': 10,
      'random': false,
      'anim': {
        'enable': false,
        'speed': 20,
        'size_min': 0,
        'sync': false
      }
    },
    'line_linked': {
      'enable': true,
      'distance': 100,
      'color': '#FFFFFF',
      'opacity': 1,
      'width': 1
    },
    'move': {
      'enable': true,
      'speed': 6,
      'direction': 'none',
      'random': false,
      'straight': false,
      'out_mode': 'out',
      'bounce': false,
      'parallax': false,
      'attract': {
        'enable': false,
        'rotateX': 3000,
        'rotateY': 3000
      }
    }
  },
  'interactivity': {
    'detect_on': 'canvas',
    'events': {
      'onhover': {
        'enable': true,
        'mode': 'grab'
      },
      'onclick': {
        'enable': true,
        'mode': 'push'
      },
      'resize': true
    },
    'modes': {
      'grab':{
        'distance': 100,
        'line_linked':{
          'opacity': 1
        },
        'outer_shape': {
          'enable': false,
          'type': 'inherit',
          'size': 20,
          'stroke': {
            'width': 'inherit',
            'color': 'inherit'
          },
        }
      },
      'bubble':{
        'distance': 100,
        'size': 40,
        'duration': 0.4,
        'opacity': 8,
        'speed': 3
      },
      'repulse':{
        'distance': 200,
        'strength': 100,
        'duration': 0.4
      },
      'push':{
        'particles_nb': 4
      },
      'remove':{
        'particles_nb': 2
      }
    }
  },
  'retina_detect': false
};

key	type	default	notes
`particles > number > value`	`num`	`100`
`particles > number > density > enable`	`bool`	`true`
`particles > number > density > value_area`	`num`	`800`
`particles > color > value`	`String`: Hex or `"random"` `List<String>`: Hex `Map<String, int>`: RGB or HSL	`#FFFFFF`	Examples: `"#b61924"` `["#b61924", "#333333", "999999"]` `{r:182, g:25, b:36}` `{h:356, s:76, l:41}` `"random"`
`particles > shape > type`	`String` `List<String>`	`"circle"`	Possible values: `"circle"` `"edge"` `"square"` `"triangle"` `"polygon"` `"star"` `"heart"` `"character"` `"char"` `"image"`
`particles > shape > stroke > width`	`num`	`0`
`particles > shape > stroke > color`	`String`	`"#FF0000"`
`particles > shape > polygon > nb_slides`	`num`	`5`
`particles > shape > character > value`	`String` `List<String>`	`"P"`
`particles > shape > character > font`	`String`	`"arial"`
`particles > shape > character > style`	`String`	`"normal"`	Possible values are the same as in the CSS font-style property
`particles > shape > character > weight`	`String`	`"normal"`	Possible values are the same as in the CSS font-weight property
`particles > shape > image > src`	`String`	`"particle.png"`
`particles > shape > image > width`	`num`	`100`
`particles > shape > image > height`	`num`	`100`
`particles > opacity > value`	`num`	`1`	0 to 1
`particles > opacity > random`	`bool`	`false`
`particles > opacity > anim > enable`	`bool`	`false`
`particles > opacity > anim > speed`	`num`	`2`
`particles > opacity > anim > opacity_min`	`num`	`0`	0 to 1
`particles > opacity > anim > sync`	`bool`	`false`
`particles > size > value`	`num`	`10`
`particles > size > random`	`bool`	`false`
`particles > size > anim > enable`	`bool`	`false`
`particles > size > anim > speed`	`num`	`20`
`particles > size > anim > size_min`	`num`	`0`
`particles > size > anim > sync`	`bool`	`false`
`particles > line_linked > enable`	`bool`	`true`
`particles > line_linked > distance`	`num`	`100`
`particles > line_linked > color`	`String`	`#FFFFFF`
`particles > line_linked > opacity`	`num`	`1`	0 to 1
`particles > line_linked > width`	`num`	`1`
`particles > move > enable`	`bool`	`true`
`particles > move > speed`	`num`	`6`
`particles > move > direction`	`String`	`"none"`	Possible values: `"none"` `"top"` `"top-right"` `"right"` `"bottom-right"` `"bottom"` `"bottom-left"` `"left"` `"top-left"`
`particles > move > random`	`bool`	`false`
`particles > move > straight`	`bool`	`false`
`particles > move > out_mode`	`String`	`"out"`	Possible values: `"out"` `"bounce"`
`particles > move > parallax`	`bool`	`false`
`particles > move > bounce`	`bool`	`false`	Bounce between particles
`particles > move > attract > enable`	`bool`	`false`
`particles > move > attract > rotateX`	`num`	`3000`
`particles > move > attract > rotateY`	`num`	`3000`
`interactivity > detect_on`	`String`	`"canvas"`	Possible values: `"canvas"` `"window"`
`interactivity > events > onhover > enable`	`bool`	`true`
`interactivity > events > onhover > mode`	`String` `List<String>`	`"grab"`	Possible values: `"grab"` `"bubble"` `"repulse"`
`interactivity > events > onclick > enable`	`bool`	`true`
`interactivity > events > onclick > mode`	`String` `List<String>`	`"push"`	Possible values: `"push"` `"remove"` `"bubble"` `"repulse"`
`interactivity > events > resize`	`bool`	`true`
`interactivity > events > modes > grab > distance`	`num`	`100`
`interactivity > events > modes > grab > line_linked > opacity`	`num`	`0.75`	0 to 1
`interactivity > events > modes > grab > outer_shape > enable`	`bool`	`false`
`interactivity > events > modes > grab > outer_shape > type`	`String`	`"inherit"`	`"inherit"` will use `particles > line_linked` values Possible values: `"inherit"` `"circle"` `"edge"` `"square"` `"triangle"` `"polygon"` `"star"` `"heart"` `"character"` `"char"`
`interactivity > events > modes > grab > outer_shape > size`	`num`	`20`	Added to the particles' size
`interactivity > events > modes > grab > outer_shape > stroke > width`	`String` `num`	`"inherit"`	`"inherit"` will use `particles > line_linked` values
`interactivity > events > modes > grab > outer_shape > stroke > color`	`String`	`"inherit"`	`"inherit"` will use `particles > line_linked` values
`interactivity > events > modes > bubble > distance`	`num`	`100`
`interactivity > events > modes > bubble > size`	`num`	`40`
`interactivity > events > modes > bubble > duration`	`num`	`0.4`	in seconds
`interactivity > events > modes > repulse > strength`	`num`	`100`
`interactivity > events > modes > repulse > distance`	`num`	`200`
`interactivity > events > modes > repulse > duration`	`num`	`0.4`	in seconds
`interactivity > events > modes > push > particles_nb`	`num`	`4`
`interactivity > events > modes > push > particles_nb`	`num`	`2`
`retina_detect`	`bool`	`false`

luaVolk/particles

Particles

Instalation

Usage

Configuration