particles 0.0.2

A highly configurble Dart library for creating interactive particles in the browser

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': '#ff0000'
      },
      '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',
      'parallax': true,
      '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,
        '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" "triangle" "polygon" "star" "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" "triangle" "polygon" "star" "image"
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 > 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

---