particles 0.0.3

  • Readme
  • Changelog
  • Installing
  • 47

Particles Pub

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
};
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"
"square"
"triangle"
"polygon"
"star"
"heart"
"character"
"char"
"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"
"square"
"triangle"
"polygon"
"star"
"heart"
"character"
"char"
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 > strengthnum100
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

0.0.3 - January 3, 2019 #

  • Allow multiple onclick modes
  • Added heart shape
  • Added repulse strength option
  • Make pushParticles and removeParticles public
  • Type safety improvements

0.0.2 - January 3, 2019 #

  • Added outer_shape to grab mode
  • Added everyFrame field to Particles class
  • Fixed move: false bug
  • Improved character particles performance
  • Improved character particles positioning
  • Add default image src

0.0.1 - January 2, 2019 #

  • First Release

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  particles: ^0.0.3

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:particles/particles.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
10
Health:
Code health derived from static analysis. [more]
87
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
47
Learn more about scoring.

We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.12.21

Platforms

Detected platforms: web

Primary library: package:particles/particles.dart with components: html.

Health suggestions

Fix lib/src/particles.dart. (-7.71 points)

Analysis of lib/src/particles.dart reported 16 hints, including:

line 25 col 17: Unnecessary new keyword.

line 169 col 14: Don't type annotate initializing formals.

line 169 col 28: Use = to separate a named parameter from its default value.

line 169 col 43: Don't type annotate initializing formals.

line 224 col 9: Use isNotEmpty instead of length

Fix lib/src/particle.dart. (-4.41 points)

Analysis of lib/src/particle.dart reported 9 hints, including:

line 36 col 17: Unnecessary new keyword.

line 39 col 33: Don't type annotate initializing formals.

line 40 col 5: Don't type annotate initializing formals.

line 41 col 6: Don't type annotate initializing formals.

line 65 col 7: DO use curly braces for all flow control structures.

Fix lib/src/util.dart. (-1 points)

Analysis of lib/src/util.dart reported 2 hints:

line 28 col 27: Unnecessary new keyword.

line 32 col 18: Unnecessary new keyword.

Format lib/particles.dart.

Run dartfmt to format lib/particles.dart.

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and particles.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
Dev dependencies
build_runner >=0.8.10 <2.0.0
build_web_compilers >=0.3.6 <2.0.0
sass_builder ^2.1.2