init

.gitignore

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

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015, Vincent Garreau
+Copyright (c) 2014, 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
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

README.md

@@ -2,19 +2,7 @@
 
 ### 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:
 
@@ -27,217 +15,82 @@ Load particles.js and configure the particles:
 
 **app.js**
 ```javascript
-/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+/* particlesJS('dom-id', params);
-particlesJS.load('particles-js', 'assets/particles.json', function() {
+/* @dom-id : set the html tag id [string, optional, default value : particles-js]
-  console.log('callback - particles.js config loaded');
+/* @params: set the params [object, optional, default values : check particles.js] */
+
+/* config dom id (optional) + config particles params */
+particlesJS('particles-js', {
+  particles: {
+    color: '#fff',
+    color_random: false,
+    shape: 'circle', // "circle", "edge" or "triangle"
+    opacity: {
+      opacity: 1,
+      anim: {
+        enable: true,
+        speed: 1.5,
+        opacity_min: 0,
+        sync: false
+      }
+    },
+    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
+      },
+      onresize: {
+        enable: true,
+        mode: 'out', // "out" or "bounce"
+        density_auto: false,
+        density_area: 800 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
+      }
+    }
+  },
+  /* Retina Display Support */
+  retina_detect: true
 });
 ```
+-------------------------------
+### ***Live Demo***
+<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen demo</a>
 
-**particles.json**
+<a href="http://htmlpreview.github.io/?https://github.com/VincentGarreau/particles.js/blob/master/demo/index.html" target="_blank">GitHub demo</a>
-```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
-}
-```
 
 -------------------------------
 
-### `Options`
+##### ***Install with Bower***
-
-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,6 +1,7 @@
 {
   "name": "particles.js",
   "main": "particles.js",
+  "version": "1.0.4",
   "homepage": "https://github.com/VincentGarreau/particles.js",
   "authors": [
     "Vincent Garreau <vin.garreau@gmail.com>"

demo/css/style.css

@@ -22,75 +22,19 @@ li{list-style:none}
    My CSS
    ========================================================================== */
 
-/* ---- base ---- */
-
 html,body{ 
 	width:100%;
 	height:100%;
 	background:#111;
 }
 
-html{
+/* remove canvas default margin */
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body{
-  font:normal 75% Arial, Helvetica, sans-serif;
-}
-
 canvas{
-  display:block;
+	display:block;
-  vertical-align:bottom;
+	vertical-align:bottom;
 }
 
-
-/* ---- 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%;
+	width:100%;
-  height: 100%;
+	height:100%;
-  background-color: #b61924;
+}
-  background-image: url('');
-  background-size: cover;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-}

demo/index.html

@@ -1,44 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
+<meta charset="utf-8">
-  <title>particles.js</title>
+<title>particles.js</title>
-  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
+<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
-  <meta name="author" content="Vincent Garreau" />
+<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">
+<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">
+<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;
+  var stats = new Stats();
-  stats = new Stats;
+  stats.setMode(0); // 0: fps, 1: ms
-  stats.setMode(0);
   stats.domElement.style.position = 'absolute';
   stats.domElement.style.left = '0px';
   stats.domElement.style.top = '0px';
-  document.body.appendChild(stats.domElement);
+  document.body.appendChild( stats.domElement );
-  count_particles = document.querySelector('.js-count-particles');
+  var update = function (){
-  update = function() {
     stats.begin();
+    // monitored code goes here
     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);

demo/js/app.js

@@ -1,133 +1,68 @@
-/* -----------------------------------------------
+/* default dom id (particles-js) */
-/* How to use? : Check the GitHub README
+//particlesJS();
-/* ----------------------------------------------- */
 
-/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/* config dom id */
-/*
+//particlesJS('dom-id');
-particlesJS.load('particles-js', 'particles.json', function() {
-  console.log('particles.js loaded - callback');
-});
-*/
 
-/* Otherwise just put the config content (json): */
+/* config dom id (optional) + config particles params */
-
+particlesJS('particles-js', {
-particlesJS('particles-js',
+  particles: {
-  
+    color: '#fff',
-  {
+    color_random: false,
-    "particles": {
+    shape: 'circle', // "circle", "edge" or "triangle"
-      "number": {
+    opacity: {
-        "value": 80,
+      opacity: 1,
-        "density": {
+      anim: {
-          "enable": true,
+        enable: true,
-          "value_area": 800
+        speed: 1.5,
-        }
+        opacity_min: 0,
-      },
+        sync: false
-      "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": {
+    size: 4,
-      "detect_on": "canvas",
+    size_random: true,
-      "events": {
+    nb: 150,
-        "onhover": {
+    line_linked: {
-          "enable": true,
+      enable_auto: true,
-          "mode": "repulse"
+      distance: 100,
-        },
+      color: '#fff',
-        "onclick": {
+      opacity: 1,
-          "enable": true,
+      width: 1,
-          "mode": "push"
+      condensed_mode: {
-        },
+        enable: false,
-        "resize": true
+        rotateX: 600,
-      },
+        rotateY: 600
-      "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,
+    anim: {
-    "config_demo": {
+      enable: true,
-      "hide_card": false,
+      speed: 1
-      "background_color": "#b61924",
-      "background_image": "",
-      "background_position": "50% 50%",
-      "background_repeat": "no-repeat",
-      "background_size": "cover"
     }
-  }
+  },
-
+  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
+      },
+      onresize: {
+        enable: true,
+        mode: 'out', // "out" or "bounce"
+        density_auto: false,
+        density_area: 800 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
+      }
+    }
+  },
+  /* Retina Display Support */
+  retina_detect: true
+});

demo/particles.json

@@ -1,116 +0,0 @@
-{
-  "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

@@ -1,28 +0,0 @@
-{
-  "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"
-}