Update README.md

Remove duplicate table row from readme

.gitignore

@@ -0,0 +1 @@
+particles.min.js

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014, Vincent Garreau
+Copyright (c) 2015, Vincent Garreau
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,6 +2,20 @@
 
 ### A lightweight JavaScript library for creating particles.
 
+------------------------------
+### `Demo / Generator`
+
+<a href="http://vincentgarreau.com/particles.js/" target="_blank"><img src="http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg" alt="particles.js generator" /></a>
+
+Configure, export, and share your particles.js configuration on CodePen: <br />
+http://vincentgarreau.com/particles.js/
+
+CodePen demo: <br />
+http://codepen.io/VincentGarreau/pen/pnlso
+
+-------------------------------
+### `Usage`
+
 Load particles.js and configure the particles:
 
 **index.html**
@@ -13,82 +27,217 @@ Load particles.js and configure the particles:
 
 **app.js**
 ```javascript
-/* particlesJS('dom-id', params);
-/* @dom-id : set the html tag id [string, optional, default value : particles-js]
-/* @params: set the params [object, optional, default values : check particles.js] */
-
-/* default dom id (particles-js) */
-//particlesJS();
-
-/* config dom id */
-//particlesJS('dom-id');
-
-/* config dom id (optional) + config particles params */
-particlesJS('particles-js', {
-  particles: {
-    color: '#fff',
-    shape: 'circle', // "circle", "edge" or "triangle"
-    opacity: 1,
-    size: 4,
-    size_random: true,
-<<<<<<< HEAD
-    nb: 100,
-=======
-    nb: 150,
->>>>>>> dev
-    line_linked: {
-      enable_auto: true,
-      distance: 100,
-      color: '#fff',
-      opacity: 1,
-      width: 1,
-      condensed_mode: {
-        enable: false,
-        rotateX: 600,
-        rotateY: 600
-      }
-    },
-    anim: {
-      enable: true,
-      speed: 1
-    }
-  },
-  interactivity: {
-    enable: true,
-    mouse: {
-<<<<<<< HEAD
-      distance: 250
-=======
-      distance: 300
->>>>>>> dev
-    },
-    detect_on: 'canvas', // "canvas" or "window"
-    mode: 'grab',
-    line_linked: {
-      opacity: .5
-    },
-    events: {
-      onclick: {
-<<<<<<< HEAD
-    	  push_particles: {
-    		  enable: true,
-    		  nb: 4
-    	  }
-    	}
-=======
-        enable: true,
-        mode: 'push', // "push" or "remove"
-        nb: 4
-      }
->>>>>>> dev
-    }
-  },
-  /* Retina Display Support */
-  retina_detect: true
+/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+particlesJS.load('particles-js', 'assets/particles.json', function() {
+  console.log('callback - particles.js config loaded');
 });
 ```
 
-### ***Live Demo***
-<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen demo</a>
+**particles.json**
+```javascript
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 10,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 80,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 300,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 2
+    },
+    "move": {
+      "enable": true,
+      "speed": 12,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 800,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 800,
+        "size": 80,
+        "duration": 2,
+        "opacity": 0.8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
+```
 
-<a href="http://htmlpreview.github.io/?https://github.com/VincentGarreau/particles.js/blob/master/demo/index.html" target="_blank">GitHub demo</a>
+-------------------------------
+
+### `Options`
+
+key | option type / notes | example
+----|---------|------
+`particles.number.value` | number | `40`
+`particles.number.density.enable` | boolean | `true` / `false` 
+`particles.number.density.value_area` | number | `800`
+`particles.color.value` | HEX (string) <br /> RGB (object) <br /> HSL (object) <br /> array selection (HEX) <br /> random (string) | `"#b61924"` <br /> `{r:182, g:25, b:36}` <br />  `{h:356, s:76, l:41}` <br /> `["#b61924", "#333333", "999999"]` <br /> `"random"`
+`particles.shape.type` | string <br /> array selection | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["circle", "triangle", "image"]`
+`particles.shape.stroke.width` | number | `2`
+`particles.shape.stroke.color` | HEX (string) | `"#222222"`
+`particles.shape.polygon.nb_slides` | number | `5`
+`particles.shape.image.src` | path link <br /> svg / png / gif / jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
+`particles.shape.image.width` | number <br />(for aspect ratio) | `100`
+`particles.shape.image.height` | number <br />(for aspect ratio) | `100`
+`particles.opacity.value` | number (0 to 1) | `0.75`
+`particles.opacity.random` | boolean | `true` / `false` 
+`particles.opacity.anim.enable` | boolean | `true` / `false` 
+`particles.opacity.anim.speed` | number | `3`
+`particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25`
+`particles.opacity.anim.sync` | boolean | `true` / `false`
+`particles.size.value` | number | `20`
+`particles.size.random` | boolean | `true` / `false` 
+`particles.size.anim.enable` | boolean | `true` / `false` 
+`particles.size.anim.speed` | number | `3`
+`particles.size.anim.size_min` | number | `0.25`
+`particles.size.anim.sync` | boolean | `true` / `false`
+`particles.line_linked.enable` | boolean | `true` / `false`
+`particles.line_linked.distance` | number | `150`
+`particles.line_linked.color` | HEX (string) | `#ffffff`
+`particles.line_linked.opacity` | number (0 to 1) | `0.5`
+`particles.line_linked.width` | number | `1.5`
+`particles.move.enable` | boolean | `true` / `false`
+`particles.move.speed` | number | `4`
+`particles.move.direction` | string | `"none"` <br /> `"top"` <br /> `"top-right"` <br /> `"right"` <br /> `"bottom-right"` <br /> `"bottom"` <br /> `"bottom-left"` <br /> `"left"` <br /> `"top-left"`
+`particles.move.random` | boolean | `true` / `false`
+`particles.move.straight` | boolean | `true` / `false`
+`particles.move.out_mode` | string <br /> (out of canvas) | `"out"` <br /> `"bounce"`
+`particles.move.bounce` | boolean <br /> (between particles) | `true` / `false`
+`particles.move.attract.enable` | boolean | `true` / `false`
+`particles.move.attract.rotateX` | number | `3000`
+`particles.move.attract.rotateY` | number | `1500`
+`interactivity.detect_on` | string | `"canvas", "window"`
+`interactivity.events.onhover.enable` | boolean | `true` / `false`
+`interactivity.events.onhover.mode` | string <br /> array selection | `"grab"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["grab", "bubble"]`
+`interactivity.events.onclick.enable` | boolean | `true` / `false`
+`interactivity.events.onclick.mode` | string <br /> array selection | `"push"` <br /> `"remove"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["push", "repulse"]`
+`interactivity.events.resize` | boolean | `true` / `false`
+`interactivity.events.modes.grab.distance` | number | `100`
+`interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75`
+`interactivity.events.modes.bubble.distance` | number | `100`
+`interactivity.events.modes.bubble.size` | number | `40`
+`interactivity.events.modes.bubble.duration` | number <br /> (second) | `0.4`
+`interactivity.events.modes.repulse.distance` | number | `200`
+`interactivity.events.modes.repulse.duration` | number <br /> (second) | `1.2`
+`interactivity.events.modes.push.particles_nb` | number | `4`
+`interactivity.events.modes.push.particles_nb` | number | `4`
+`retina_detect` | boolean | `true` / `false`
+
+-------------------------------
+
+### `Packages install`
+
+##### ***npm***
+https://www.npmjs.com/package/particles.js
+```
+npm install particles.js
+```
+
+##### ***Bower***
+```
+bower install particles.js --save
+```
+
+##### ***Rails Assets***
+```
+gem 'rails-assets-particles.js'
+```
+
+##### ***Meteor***
+https://atmospherejs.com/newswim/particles
+```
+meteor add newswim:particles
+```
+
+-------------------------------
+
+### `Hosting / CDN`
+
+***Please use this host or your own to load particles.js on your projects***
+
+http://www.jsdelivr.com/#!particles.js

bower.json

@@ -1,7 +1,6 @@
 {
   "name": "particles.js",
   "main": "particles.js",
-  "version": "1.0.2",
   "homepage": "https://github.com/VincentGarreau/particles.js",
   "authors": [
     "Vincent Garreau <vin.garreau@gmail.com>"

demo/css/style.css

@@ -22,19 +22,75 @@ li{list-style:none}
    My CSS
    ========================================================================== */
 
+/* ---- base ---- */
+
 html,body{ 
 	width:100%;
 	height:100%;
-	background:#000;
+	background:#111;
+}
+
+html{
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body{
+  font:normal 75% Arial, Helvetica, sans-serif;
 }
 
-/* remove canvas default margin */
 canvas{
   display:block;
   vertical-align:bottom;
 }
 
-#particles-js{
-	width:100%;
-	height:100%;
+
+/* ---- stats.js ---- */
+
+.count-particles{
+  background: #000022;
+  position: absolute;
+  top: 48px;
+  left: 0;
+  width: 80px;
+  color: #13E8E9;
+  font-size: .8em;
+  text-align: left;
+  text-indent: 4px;
+  line-height: 14px;
+  padding-bottom: 2px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: bold;
+}
+
+.js-count-particles{
+  font-size: 1.1em;
+}
+
+#stats,
+.count-particles{
+  -webkit-user-select: none;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+#stats{
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+
+.count-particles{
+  border-radius: 0 0 3px 3px;
+}
+
+
+/* ---- particles.js container ---- */
+
+#particles-js{
+  width: 100%;
+  height: 100%;
+  background-color: #b61924;
+  background-image: url('');
+  background-size: cover;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
 }

demo/index.html

@@ -1,18 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<title>particles.js</title>
-<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
-<meta name="author" content="Vincent Garreau" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
-<link rel="stylesheet" media="screen" href="css/style.css">
+  <meta charset="utf-8">
+  <title>particles.js</title>
+  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
+  <meta name="author" content="Vincent Garreau" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" media="screen" href="css/style.css">
 </head>
 <body>
 
+<!-- count particles -->
+<div class="count-particles">
+  <span class="js-count-particles">--</span> particles
+</div>
+
+<!-- particles.js container -->
 <div id="particles-js"></div>
 
+<!-- scripts -->
 <script src="../particles.js"></script>
 <script src="js/app.js"></script>
+
+<!-- stats.js -->
+<script src="js/lib/stats.js"></script>
+<script>
+  var count_particles, stats, update;
+  stats = new Stats;
+  stats.setMode(0);
+  stats.domElement.style.position = 'absolute';
+  stats.domElement.style.left = '0px';
+  stats.domElement.style.top = '0px';
+  document.body.appendChild(stats.domElement);
+  count_particles = document.querySelector('.js-count-particles');
+  update = function() {
+    stats.begin();
+    stats.end();
+    if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
+      count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
+    }
+    requestAnimationFrame(update);
+  };
+  requestAnimationFrame(update);
+</script>
+
 </body>
 </html>

demo/js/app.js

@@ -1,53 +1,133 @@
-/* default dom id (particles-js) */
-//particlesJS();
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
 
-/* config dom id */
-//particlesJS('dom-id');
-
-/* config dom id (optional) + config particles params */
-particlesJS('particles-js', {
-  particles: {
-    color: '#fff',
-    shape: 'circle', // "circle", "edge" or "triangle"
-    opacity: 1,
-    size: 4,
-    size_random: true,
-    nb: 150,
-    line_linked: {
-      enable_auto: true,
-      distance: 100,
-      color: '#fff',
-      opacity: 1,
-      width: 1,
-      condensed_mode: {
-        enable: false,
-        rotateX: 600,
-        rotateY: 600
-      }
-    },
-    anim: {
-      enable: true,
-      speed: 1
-    }
-  },
-  interactivity: {
-    enable: true,
-    mouse: {
-      distance: 300
-    },
-    detect_on: 'canvas', // "canvas" or "window"
-    mode: 'grab',
-    line_linked: {
-      opacity: .5
-    },
-    events: {
-      onclick: {
-        enable: true,
-        mode: 'push', // "push" or "remove"
-        nb: 4
-      }
-    }
-  },
-  /* Retina Display Support */
-  retina_detect: true
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
 });
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+  
+  {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#b61924",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);

demo/js/lib/stats.js

@@ -0,0 +1,149 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Stats = function () {
+
+	var startTime = Date.now(), prevTime = startTime;
+	var ms = 0, msMin = Infinity, msMax = 0;
+	var fps = 0, fpsMin = Infinity, fpsMax = 0;
+	var frames = 0, mode = 0;
+
+	var container = document.createElement( 'div' );
+	container.id = 'stats';
+	container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
+	container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
+
+	var fpsDiv = document.createElement( 'div' );
+	fpsDiv.id = 'fps';
+	fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
+	container.appendChild( fpsDiv );
+
+	var fpsText = document.createElement( 'div' );
+	fpsText.id = 'fpsText';
+	fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+	fpsText.innerHTML = 'FPS';
+	fpsDiv.appendChild( fpsText );
+
+	var fpsGraph = document.createElement( 'div' );
+	fpsGraph.id = 'fpsGraph';
+	fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
+	fpsDiv.appendChild( fpsGraph );
+
+	while ( fpsGraph.children.length < 74 ) {
+
+		var bar = document.createElement( 'span' );
+		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
+		fpsGraph.appendChild( bar );
+
+	}
+
+	var msDiv = document.createElement( 'div' );
+	msDiv.id = 'ms';
+	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
+	container.appendChild( msDiv );
+
+	var msText = document.createElement( 'div' );
+	msText.id = 'msText';
+	msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+	msText.innerHTML = 'MS';
+	msDiv.appendChild( msText );
+
+	var msGraph = document.createElement( 'div' );
+	msGraph.id = 'msGraph';
+	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
+	msDiv.appendChild( msGraph );
+
+	while ( msGraph.children.length < 74 ) {
+
+		var bar = document.createElement( 'span' );
+		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
+		msGraph.appendChild( bar );
+
+	}
+
+	var setMode = function ( value ) {
+
+		mode = value;
+
+		switch ( mode ) {
+
+			case 0:
+				fpsDiv.style.display = 'block';
+				msDiv.style.display = 'none';
+				break;
+			case 1:
+				fpsDiv.style.display = 'none';
+				msDiv.style.display = 'block';
+				break;
+		}
+
+	};
+
+	var updateGraph = function ( dom, value ) {
+
+		var child = dom.appendChild( dom.firstChild );
+		child.style.height = value + 'px';
+
+	};
+
+	return {
+
+		REVISION: 12,
+
+		domElement: container,
+
+		setMode: setMode,
+
+		begin: function () {
+
+			startTime = Date.now();
+
+		},
+
+		end: function () {
+
+			var time = Date.now();
+
+			ms = time - startTime;
+			msMin = Math.min( msMin, ms );
+			msMax = Math.max( msMax, ms );
+
+			msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
+			updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
+
+			frames ++;
+
+			if ( time > prevTime + 1000 ) {
+
+				fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
+				fpsMin = Math.min( fpsMin, fps );
+				fpsMax = Math.max( fpsMax, fps );
+
+				fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
+				updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
+
+				prevTime = time;
+				frames = 0;
+
+			}
+
+			return time;
+
+		},
+
+		update: function () {
+
+			startTime = this.end();
+
+		}
+
+	}
+
+};
+
+if ( typeof module === 'object' ) {
+
+	module.exports = Stats;
+
+}

demo/particles.json

@@ -0,0 +1,116 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true,
+  "config_demo": {
+    "hide_card": false,
+    "background_color": "#b61924",
+    "background_image": "",
+    "background_position": "50% 50%",
+    "background_repeat": "no-repeat",
+    "background_size": "cover"
+  }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "particles.js",
+  "version": "2.0.0",
+  "description": "A lightweight JavaScript library for creating particles",
+  "homepage": "http://vincentgarreau.com/particles.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VincentGarreau/particles.js.git"
+  },
+  "keywords": [
+    "particles",
+    "particle",
+    "canvas"
+  ],
+  "author": "Vincent Garreau",
+  "license": "MIT",
+  "files": [
+    "particles.js",
+    "particles.min.js"
+  ],
+  "bugs": {
+    "url": "https://github.com/VincentGarreau/particles.js/issues"
+  },
+  "homepage": "https://github.com/VincentGarreau/particles.js"
+}