init

VincentGarreau · May 9, 2015 · 2196b1a · 2196b1a
1 parent ef05b2e
commit 2196b1a
Show file tree

Hide file tree

Showing 12 changed files with 477 additions and 1,768 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +0,0 @@
-particles.min.js

diff --git a/LICENSE.md b/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.
diff --git a/README.md b/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="https://dl.dropboxusercontent.com/u/19580440/particlesjs-assets/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,203 +15,82 @@ Load particles.js and configure the particles:
 
 **app.js**
 ```javascript
-/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
-particlesJS.load('particles-js', 'assets/particles.json', function() {
-  console.log('callback - particles.js config loaded');
-});
-```
-
-**particles.json**
-```javascript
-{
-  "particles": {
-    "number": {
-      "value": 80,
-      "density": {
-        "enable": true,
-        "value_area": 800
+/* 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] */
+
+/* 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
       }
     },
-    "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: 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
       }
     },
-    "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
-      }
+    anim: {
+      enable: true,
+      speed: 1
     }
   },
-  "interactivity": {
-    "detect_on": "canvas",
-    "events": {
-      "onhover": {
-        "enable": false,
-        "mode": "repulse"
-      },
-      "onclick": {
-        "enable": true,
-        "mode": "push"
-      },
-      "resize": true
+  interactivity: {
+    enable: true,
+    mouse: {
+      distance: 300
     },
-    "modes": {
-      "grab": {
-        "distance": 800,
-        "line_linked": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 800,
-        "size": 80,
-        "duration": 2,
-        "opacity": 8,
-        "speed": 3
-      },
-      "repulse": {
-        "distance": 400,
-        "duration": 0.4
-      },
-      "push": {
-        "particles_nb": 4
+    detect_on: 'canvas', // "canvas" or "window"
+    mode: 'grab',
+    line_linked: {
+      opacity: .5
+    },
+    events: {
+      onclick: {
+        enable: true,
+        mode: 'push', // "push" or "remove"
+        nb: 4
       },
-      "remove": {
-        "particles_nb": 2
+      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_detect": true
-}
+  /* Retina Display Support */
+  retina_detect: true
+});
 ```
-
 -------------------------------
+### ***Live Demo***
+<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen 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.number.density.value_area` | number | `800`
-`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`
+<a href="http://htmlpreview.github.io/?https://github.com/VincentGarreau/particles.js/blob/master/demo/index.html" target="_blank">GitHub demo</a>
 
 -------------------------------
 
-### `Packages install`
-
-##### ***npm***
-```
-npm install particles.js
-```
-
-##### ***Bower***
+##### ***Install with Bower***
 ```
 bower install particles.js --save
 ```
-
-##### ***Rails Assets***
-```
-gem 'rails-assets-particles.js'
-```
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "particles.js",
   "main": "particles.js",
-  "version": "2.0.0",
+  "version": "1.0.4",
   "homepage": "https://github.com/VincentGarreau/particles.js",
   "authors": [
     "Vincent Garreau <[email protected]>"

diff --git a/demo/css/style.css b/demo/css/style.css
@@ -22,75 +22,19 @@ li{list-style:none}
    My CSS
    ========================================================================== */
 
-/* ---- base ---- */
-
 html,body{ 
 	width:100%;
 	height:100%;
 	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;
-}
-
-
-/* ---- 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;
+	display:block;
+	vertical-align:bottom;
 }
 
-#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;
-}
+	width:100%;
+	height:100%;
+}