From d27a682fbb75002f0ab631377ef65b5947c3324f Mon Sep 17 00:00:00 2001 From: Matteo Bruni Date: Thu, 20 Feb 2020 12:26:27 +0100 Subject: [PATCH 1/2] moved to tsparticles --- README.md | 2 +- index.html | 2 +- package.json | 3 +- src/vue-particles/particles-data.js | 238 +++++++++++++------------ src/vue-particles/vue-particles.vue | 261 ++++++++++++++++------------ 5 files changed, 283 insertions(+), 223 deletions(-) diff --git a/README.md b/README.md index 0ec9f401..0d9ecd3b 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ### SSR compatible - Tested with Nuxt.js ------------------------------ -particles.js generator +tsParticles generator ## Demo and Usage http://vue-particles.netlify.com/ diff --git a/index.html b/index.html index 7631718e..e45907fb 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Vue-Particles - Vue.js and particles.js component + Vue-Particles - Vue.js and tsParticles component diff --git a/package.json b/package.json index 8646dfd1..36a85133 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "vue-component", "particles.js", "particles", + "tsparticles", "vue-particles" ], "scripts": { @@ -27,7 +28,7 @@ "main": "src/vue-particles/index.js", "dependencies": { "vue": "^2.2.6", - "particles.js": "^2.0.0" + "tsparticles": "^1.5.6" }, "devDependencies": { "autoprefixer": "^6.7.2", diff --git a/src/vue-particles/particles-data.js b/src/vue-particles/particles-data.js index 3d8ed9f8..ad37a69d 100644 --- a/src/vue-particles/particles-data.js +++ b/src/vue-particles/particles-data.js @@ -1,123 +1,135 @@ const particlesData = { - "particles": { - "number": { - "value": 80, - "density": { - "enable": true, - "value_area": 800 - } - }, - "color": { - "value": "#9E9E9E" - }, - "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": 3, - "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": 2, - "direction": "none", - "random": false, - "straight": false, - "out_mode": "out", - "attract": { - "enable": false, - "rotateX": 600, - "rotateY": 1200 - } + fps_limit: 60, + interactivity: { + detect_on: 'canvas', + events: { + onclick: { + enable: true, + mode: 'push' + }, + onhover: { + enable: true, + mode: 'grab', + parallax: { + enable: false, + force: 2, + smooth: 10 } + }, + resize: true }, - "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 - } - }, - "bubble": { - "distance": 400, - "size": 40, - "duration": 2, - "opacity": 8, - "speed": 3 - }, - "repulse": { - "distance": 200 - }, - "push": { - "particles_nb": 4 - }, - "remove": { - "particles_nb": 2 - } + modes: { + bubble: { + distance: 200, + duration: 0.4, + opacity: 1, + size: 80 + }, + grab: { + distance: 100, + line_linked: { + opacity: 1 } + }, + push: { + particles_nb: 4 + }, + remove: { + particles_nb: 2 + }, + repulse: { + distance: 200, + duration: 0.4 + } + } + }, + particles: { + color: { + value: '#fff' }, - - "retina_detect": true, - "config_demo": { - "hide_card": false, - "background_color": "#b61924", - "background_image": "", - "background_position": "50% 50%", - "background_repeat": "no-repeat", - "background_size": "cover" + line_linked: { + color: '#fff', + distance: 100, + enable: true, + opacity: 1, + width: 1 + }, + move: { + attract: { + enable: false, + rotateX: 3000, + rotateY: 3000 + }, + bounce: false, + direction: 'none', + enable: true, + out_mode: 'out', + random: false, + speed: 2, + straight: false + }, + number: { + density: { + enable: true, + value_area: 800 + }, + value: 400 + }, + opacity: { + anim: { + enable: false, + opacity_min: 0, + speed: 2, + sync: false + }, + random: false, + value: 1 + }, + shape: { + character: { + fill: false, + font: 'Verdana', + style: '', + value: '*', + weight: '400' + }, + image: { + height: 100, + replace_color: true, + src: '', + width: 100 + }, + polygon: { + nb_sides: 5 + }, + stroke: { + color: '#ff0000', + width: 0 + }, + type: 'circle' + }, + size: { + anim: { + enable: false, + size_min: 0, + speed: 20, + sync: false + }, + random: false, + value: 20 } + }, + retina_detect: false, + config_demo: { + hide_card: false, + background_color: '#b61924', + background_image: '', + background_position: '50% 50%', + background_repeat: 'no-repeat', + background_size: 'cover' + } } - export { particlesData -} \ No newline at end of file +} diff --git a/src/vue-particles/vue-particles.vue b/src/vue-particles/vue-particles.vue index aa54ea15..2f5e1caf 100644 --- a/src/vue-particles/vue-particles.vue +++ b/src/vue-particles/vue-particles.vue @@ -91,10 +91,10 @@ } }, mounted () { - // import particle.js only on client-side - require('particles.js') + // import tsParticles only on client-side + require('tsparticles'); this.$nextTick(() => { - this.initParticleJS( + this.initTsParticles( this.color, this.particleOpacity, this.particlesNumber, @@ -131,118 +131,165 @@ clickEffect, clickMode ) { - particlesJS(this.id, { - "particles": { - "number": { - "value": particlesNumber, - "density": { - "enable": true, - "value_area": 800 - } - }, - "color": { - "value": color - }, - "shape": { - // circle, edge, triangle, polygon, star, image - "type": shapeType, - "stroke": { - "width": 0, - "color": "#192231" + this.initTsParticles( + color, + particleOpacity, + particlesNumber, + shapeType, + particleSize, + linesColor, + linesWidth, + lineLinked, + lineOpacity, + linesDistance, + moveSpeed, + hoverEffect, + hoverMode, + clickEffect, + clickMode + ); + }, + initTsParticles: function ( + color, + particleOpacity, + particlesNumber, + shapeType, + particleSize, + linesColor, + linesWidth, + lineLinked, + lineOpacity, + linesDistance, + moveSpeed, + hoverEffect, + hoverMode, + clickEffect, + clickMode + ) { + tsParticles.load(this.id, { + fps_limit: 60, + interactivity: { + detect_on: InteractivityDetect.canvas, + events: { + onclick: { + enable: clickEffect, + mode: clickMode, + }, + onhover: { + enable: hoverEffect, + mode: hoverMode, + parallax: { + enable: false, + force: 2, + smooth: 10, + }, + }, + resize: true, + }, + modes: { + bubble: { + distance: 200, + duration: 0.4, + opacity: 1, + size: 80, + }, + grab: { + distance: 100, + line_linked: { + opacity: 1, + }, + }, + push: { + particles_nb: 4, + }, + remove: { + particles_nb: 2, + }, + repulse: { + distance: 200, + duration: 0.4, + }, }, - "polygon": { - "nb_sides": 5 - } - }, - "opacity": { - "value": particleOpacity, - "random": false, - "anim": { - "enable": false, - "speed": 1, - "opacity_min": 0.1, - "sync": false - } - }, - "size": { - "value": particleSize, - "random": true, - "anim": { - "enable": false, - "speed": 40, - "size_min": 0.1, - "sync": false - } - }, - "line_linked": { - "enable": lineLinked, - "distance": linesDistance, - "color": linesColor, - "opacity": lineOpacity, - "width": linesWidth }, - "move": { - "enable": true, - "speed": moveSpeed, - "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": hoverEffect, - "mode": hoverMode + particles: { + color: { + value: color, }, - "onclick": { - "enable": clickEffect, - "mode": clickMode + line_linked: { + enable: lineLinked, + distance: linesDistance, + color: linesColor, + opacity: lineOpacity, + width: linesWidth }, - "onresize": { - - "enable": true, - "density_auto": true, - "density_area": 400 - - } - }, - "modes": { - "grab": { - "distance": 140, - "line_linked": { - "opacity": 1 - } + move: { + attract: { + enable: false, + rotateX: 3000, + rotateY: 3000, + }, + bounce: false, + direction: MoveDirection.none, + enable: true, + out_mode: OutMode.out, + random: false, + speed: moveSpeed, + straight: false, + }, + number: { + density: { + enable: true, + value_area: 800, + }, + value: particlesNumber, }, - "bubble": { - "distance": 400, - "size": 40, - "duration": 2, - "opacity": 8, - "speed": 3 + opacity: { + anim: { + enable: false, + opacity_min: 0.1, + speed: 1, + sync: false, + }, + random: false, + value: particleOpacity, }, - "repulse": { - "distance": 200, - "duration": 0.4 + shape: { + character: { + fill: false, + font: "Verdana", + style: "", + value: "*", + weight: "400", + }, + image: { + height: 100, + replace_color: true, + src: "", + width: 100, + }, + polygon: { + nb_sides: 5, + }, + stroke: { + color: "#ff0000", + width: 0, + }, + type: shapeType, }, - "push": { - "particles_nb": 4 + size: { + anim: { + enable: false, + size_min: 0.1, + speed: 40, + sync: false, + }, + random: true, + value: particleSize, }, - "remove": { - "particles_nb": 2 - } - } - }, - "retina_detect": true - }); + }, + retina_detect: false, + } + ); } } From 9c8c51dab842ddb83e5f949abbcecf989e0a7241 Mon Sep 17 00:00:00 2001 From: Matteo Bruni Date: Thu, 20 Feb 2020 12:35:33 +0100 Subject: [PATCH 2/2] Update vue-particles.vue --- src/vue-particles/vue-particles.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vue-particles/vue-particles.vue b/src/vue-particles/vue-particles.vue index 2f5e1caf..52c235ab 100644 --- a/src/vue-particles/vue-particles.vue +++ b/src/vue-particles/vue-particles.vue @@ -169,7 +169,7 @@ tsParticles.load(this.id, { fps_limit: 60, interactivity: { - detect_on: InteractivityDetect.canvas, + detect_on: 'canvas', events: { onclick: { enable: clickEffect, @@ -229,9 +229,9 @@ rotateY: 3000, }, bounce: false, - direction: MoveDirection.none, + direction: 'none', enable: true, - out_mode: OutMode.out, + out_mode: 'out', random: false, speed: moveSpeed, straight: false,