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
};
keytypedefaultnotes
particles > number > valuenum100
particles > number > density > enablebooltrue
particles > number > density > value_areanum800
particles > color > valueString: Hex or "random"
List<String>: Hex
Map<String, int>: RGB or HSL
#FFFFFFExamples:
"#b61924"
["#b61924", "#333333", "999999"]
{r:182, g:25, b:36}
{h:356, s:76, l:41}
"random"
particles > shape > typeString
List<String>
"circle"Possible values:
"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
particles > shape > stroke > widthnum0
particles > shape > stroke > colorString"#FF0000"
particles > shape > polygon > nb_slidesnum5
particles > shape > character > valueString
List<String>
"P"
particles > shape > character > fontString"arial"
particles > shape > character > styleString"normal"Possible values are the same as in the CSS font-style property
particles > shape > character > weightString"normal"Possible values are the same as in the CSS font-weight property
particles > shape > image > srcString"particle.png"
particles > shape > image > widthnum100
particles > shape > image > heightnum100
particles > opacity > valuenum10 to 1
particles > opacity > randomboolfalse
particles > opacity > anim > enableboolfalse
particles > opacity > anim > speednum2
particles > opacity > anim > opacity_minnum00 to 1
particles > opacity > anim > syncboolfalse
particles > size > valuenum10
particles > size > randomboolfalse
particles > size > anim > enableboolfalse
particles > size > anim > speednum20
particles > size > anim > size_minnum0
particles > size > anim > syncboolfalse
particles > line_linked > enablebooltrue
particles > line_linked > distancenum100
particles > line_linked > colorString#FFFFFF
particles > line_linked > opacitynum10 to 1
particles > line_linked > widthnum1
particles > move > enablebooltrue
particles > move > speednum6
particles > move > directionString"none"Possible values:
"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles > move > randomboolfalse
particles > move > straightboolfalse
particles > move > out_modeString"out"Possible values:
"out"
"bounce"
particles > move > parallaxboolfalse
particles > move > bounceboolfalseBounce between particles
particles > move > attract > enableboolfalse
particles > move > attract > rotateXnum3000
particles > move > attract > rotateYnum3000
interactivity > detect_onString"canvas"Possible values:
"canvas"
"window"
interactivity > events > onhover > enablebooltrue
interactivity > events > onhover > modeString
List<String>
"grab"Possible values:
"grab"
"bubble"
"repulse"
interactivity > events > onclick > enablebooltrue
interactivity > events > onclick > modeString
List<String>
"push"Possible values:
"push"
"remove"
"bubble"
"repulse"
interactivity > events > resizebooltrue
interactivity > events > modes > grab > distancenum100
interactivity > events > modes > grab > line_linked > opacitynum0.750 to 1
interactivity > events > modes > grab > outer_shape > enableboolfalse
interactivity > events > modes > grab > outer_shape > typeString"inherit""inherit" will use particles > line_linked
values
Possible values:
"inherit"
"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
interactivity > events > modes > grab > outer_shape > sizenum20Added to the particles' size
interactivity > events > modes > grab > outer_shape > stroke > widthString
num
"inherit""inherit" will use particles > line_linked values
interactivity > events > modes > grab > outer_shape > stroke > colorString"inherit""inherit" will use particles > line_linked values
interactivity > events > modes > bubble > distancenum100
interactivity > events > modes > bubble > sizenum40
interactivity > events > modes > bubble > durationnum0.4in seconds
interactivity > events > modes > repulse > distancenum200
interactivity > events > modes > repulse > durationnum0.4in seconds
interactivity > events > modes > push > particles_nbnum4
interactivity > events > modes > push > particles_nbnum2
retina_detectboolfalse

Libraries

particles
particles is a highly configurable library to draw particles in the browsers' canvas