mirror of
https://github.com/VincentGarreau/particles.js.git
synced 2025-08-16 00:04:20 -04:00
Compare commits
No commits in common. "master" and "1.0.2" have entirely different histories.
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
particles.min.js
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
The MIT License (MIT)
|
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
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
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
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
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
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
THE SOFTWARE.
|
THE SOFTWARE.
|
||||||
299
README.md
299
README.md
@ -2,20 +2,6 @@
|
|||||||
|
|
||||||
### A lightweight JavaScript library for creating particles.
|
### 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:
|
Load particles.js and configure the particles:
|
||||||
|
|
||||||
**index.html**
|
**index.html**
|
||||||
@ -27,217 +13,82 @@ Load particles.js and configure the particles:
|
|||||||
|
|
||||||
**app.js**
|
**app.js**
|
||||||
```javascript
|
```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] */
|
||||||
|
|
||||||
|
/* 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
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
**particles.json**
|
### ***Live Demo***
|
||||||
```javascript
|
<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen demo</a>
|
||||||
{
|
|
||||||
"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
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "particles.js",
|
"name": "particles.js",
|
||||||
"main": "particles.js",
|
"main": "particles.js",
|
||||||
|
"version": "1.0.2",
|
||||||
"homepage": "https://github.com/VincentGarreau/particles.js",
|
"homepage": "https://github.com/VincentGarreau/particles.js",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Vincent Garreau <vin.garreau@gmail.com>"
|
"Vincent Garreau <vin.garreau@gmail.com>"
|
||||||
|
|||||||
@ -22,75 +22,19 @@ li{list-style:none}
|
|||||||
My CSS
|
My CSS
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/* ---- base ---- */
|
|
||||||
|
|
||||||
html,body{
|
html,body{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
background:#111;
|
background:#000;
|
||||||
}
|
|
||||||
|
|
||||||
html{
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
font:normal 75% Arial, Helvetica, sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* remove canvas default margin */
|
||||||
canvas{
|
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{
|
#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;
|
|
||||||
}
|
|
||||||
@ -1,48 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- count particles -->
|
|
||||||
<div class="count-particles">
|
|
||||||
<span class="js-count-particles">--</span> particles
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- particles.js container -->
|
|
||||||
<div id="particles-js"></div>
|
<div id="particles-js"></div>
|
||||||
|
|
||||||
<!-- scripts -->
|
|
||||||
<script src="../particles.js"></script>
|
<script src="../particles.js"></script>
|
||||||
<script src="js/app.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
176
demo/js/app.js
176
demo/js/app.js
@ -1,133 +1,53 @@
|
|||||||
/* -----------------------------------------------
|
/* 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',
|
||||||
{
|
shape: 'circle', // "circle", "edge" or "triangle"
|
||||||
"particles": {
|
opacity: 1,
|
||||||
"number": {
|
size: 4,
|
||||||
"value": 80,
|
size_random: true,
|
||||||
"density": {
|
nb: 150,
|
||||||
"enable": true,
|
line_linked: {
|
||||||
"value_area": 800
|
enable_auto: true,
|
||||||
}
|
distance: 100,
|
||||||
},
|
color: '#fff',
|
||||||
"color": {
|
opacity: 1,
|
||||||
"value": "#ffffff"
|
width: 1,
|
||||||
},
|
condensed_mode: {
|
||||||
"shape": {
|
enable: false,
|
||||||
"type": "circle",
|
rotateX: 600,
|
||||||
"stroke": {
|
rotateY: 600
|
||||||
"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": {
|
anim: {
|
||||||
"detect_on": "canvas",
|
enable: true,
|
||||||
"events": {
|
speed: 1
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
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
|
||||||
|
});
|
||||||
@ -1,149 +0,0 @@
|
|||||||
/**
|
|
||||||
* @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;
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
28
package.json
28
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"
|
|
||||||
}
|
|
||||||
1625
particles.js
1625
particles.js
File diff suppressed because it is too large
Load Diff
7
particles.min.js
vendored
7
particles.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user