From 67839bd385cb50716d95c236decdf8d3d171c649 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 01:28:19 +0100 Subject: [PATCH 01/13] add version number --- particles.js | 1 + particles.min.js | 1 + 2 files changed, 2 insertions(+) diff --git a/particles.js b/particles.js index e0d205c8..4466feb2 100644 --- a/particles.js +++ b/particles.js @@ -3,6 +3,7 @@ /* MIT license: http://opensource.org/licenses/MIT /* GitHub : https://github.com/VincentGarreau/particles.js /* How to use? : Check the GitHub README +/* v1.0.1 /* ----------------------------------------------- */ function launchParticlesJS(tag_id, params){ diff --git a/particles.min.js b/particles.min.js index dd173bfe..ce73aa42 100644 --- a/particles.min.js +++ b/particles.min.js @@ -3,5 +3,6 @@ /* MIT license: http://opensource.org/licenses/MIT /* GitHub : https://github.com/VincentGarreau/particles.js /* How to use? : Check the GitHub README +/* v1.0.1 /* ----------------------------------------------- */ function launchParticlesJS(e,d){var c=document.querySelector("#"+e+" > canvas");pJS={canvas:{el:c,w:c.offsetWidth,h:c.offsetHeight},particles:{color:"#fff",shape:"circle",opacity:1,size:2.5,size_random:true,nb:200,line_linked:{enable_auto:true,distance:100,color:"#fff",opacity:1,width:1,condensed_mode:{enable:true,rotateX:65000,rotateY:65000}},anim:{enable:true,speed:1},array:[]},interactivity:{enable:true,mouse:{distance:100},detect_on:"canvas",mode:"grab",line_linked:{opacity:1},events:{onclick:{push_particles:{enable:true,nb:1}}}},retina_detect:false,fn:{vendors:{interactivity:{}}}};if(d){if(d.particles){if(d.particles.color){pJS.particles.color=d.particles.color}if(d.particles.shape){pJS.particles.shape=d.particles.shape}if(d.particles.opacity){pJS.particles.opacity=d.particles.opacity}if(d.particles.size){pJS.particles.size=d.particles.size}if(d.particles.size_random==false){pJS.particles.size_random=d.particles.size_random}if(d.particles.nb){pJS.particles.nb=d.particles.nb}if(d.particles.line_linked){if(d.particles.line_linked.enable_auto==false){pJS.particles.line_linked.enable_auto=d.particles.line_linked.enable_auto}if(d.particles.line_linked.distance){pJS.particles.line_linked.distance=d.particles.line_linked.distance}if(d.particles.line_linked.color){pJS.particles.line_linked.color=d.particles.line_linked.color}if(d.particles.line_linked.opacity){pJS.particles.line_linked.opacity=d.particles.line_linked.opacity}if(d.particles.line_linked.width){pJS.particles.line_linked.width=d.particles.line_linked.width}if(d.particles.line_linked.condensed_mode){if(d.particles.line_linked.condensed_mode.enable==false){pJS.particles.line_linked.condensed_mode.enable=d.particles.line_linked.condensed_mode.enable}if(d.particles.line_linked.condensed_mode.rotateX){pJS.particles.line_linked.condensed_mode.rotateX=d.particles.line_linked.condensed_mode.rotateX}if(d.particles.line_linked.condensed_mode.rotateY){pJS.particles.line_linked.condensed_mode.rotateY=d.particles.line_linked.condensed_mode.rotateY}}}if(d.particles.anim){if(d.particles.anim.enable==false){pJS.particles.anim.enable=d.particles.anim.enable}if(d.particles.anim.speed){pJS.particles.anim.speed=d.particles.anim.speed}}}if(d.interactivity){if(d.interactivity.enable==false){pJS.interactivity.enable=d.interactivity.enable}if(d.interactivity.mouse){if(d.interactivity.mouse.distance){pJS.interactivity.mouse.distance=d.interactivity.mouse.distance}}if(d.interactivity.detect_on){pJS.interactivity.detect_on=d.interactivity.detect_on}if(d.interactivity.mode){pJS.interactivity.mode=d.interactivity.mode}if(d.interactivity.line_linked){if(d.interactivity.line_linked.opacity){pJS.interactivity.line_linked.opacity=d.interactivity.line_linked.opacity}}if(d.interactivity.events){if(d.interactivity.events.onclick){if(d.interactivity.events.onclick.push_particles){if(d.interactivity.events.onclick.push_particles.enable==false){pJS.interactivity.events.onclick.push_particles.enable=d.interactivity.events.onclick.push_particles.enable}if(d.interactivity.events.onclick.push_particles.nb){pJS.interactivity.events.onclick.push_particles.nb=d.interactivity.events.onclick.push_particles.nb}}}}}pJS.retina_detect=d.retina_detect}pJS.particles.color_rgb=hexToRgb(pJS.particles.color);pJS.particles.line_linked.color_rgb_line=hexToRgb(pJS.particles.line_linked.color);if(pJS.retina_detect&&window.devicePixelRatio>1){pJS.retina=true;pJS.canvas.w=pJS.canvas.el.offsetWidth*2;pJS.canvas.h=pJS.canvas.el.offsetHeight*2;pJS.particles.anim.speed=pJS.particles.anim.speed*2;pJS.particles.line_linked.distance=pJS.particles.line_linked.distance*2;pJS.particles.line_linked.width=pJS.particles.line_linked.width*2;pJS.interactivity.mouse.distance=pJS.interactivity.mouse.distance*2}pJS.fn.canvasInit=function(){pJS.canvas.ctx=pJS.canvas.el.getContext("2d")};pJS.fn.canvasSize=function(){pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;window.onresize=function(){pJS.canvas.w=pJS.canvas.el.offsetWidth;pJS.canvas.h=pJS.canvas.el.offsetHeight;if(pJS.retina){pJS.canvas.w*=2;pJS.canvas.h*=2}pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;pJS.fn.canvasPaint();if(!pJS.particles.anim.enable){pJS.fn.particlesRemove();pJS.fn.canvasRemove();a()}}};pJS.fn.canvasPaint=function(){pJS.canvas.ctx.fillRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.canvasRemove=function(){pJS.canvas.ctx.clearRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.particle=function(g,h,f){this.x=f?f.x:Math.random()*pJS.canvas.w;this.y=f?f.y:Math.random()*pJS.canvas.h;this.radius=(pJS.particles.size_random?Math.random():1)*pJS.particles.size;if(pJS.retina){this.radius*=2}this.color=g;this.opacity=h;this.vx=-0.5+Math.random();this.vy=-0.5+Math.random();this.draw=function(){pJS.canvas.ctx.fillStyle="rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.opacity+")";pJS.canvas.ctx.beginPath();switch(pJS.particles.shape){case"circle":pJS.canvas.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);break;case"edge":pJS.canvas.ctx.rect(this.x,this.y,this.radius*2,this.radius*2);break;case"triangle":pJS.canvas.ctx.moveTo(this.x,this.y);pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius*2);pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius*2);pJS.canvas.ctx.closePath();break}pJS.canvas.ctx.fill()}};pJS.fn.particlesCreate=function(){for(var f=0;fpJS.canvas.w){k.x=k.radius}else{if(k.x+k.radius<0){k.x=pJS.canvas.w+k.radius}}if(k.y-k.radius>pJS.canvas.h){k.y=k.radius}else{if(k.y+k.radius<0){k.y=pJS.canvas.h+k.radius}}for(var f=g+1;f Date: Sun, 16 Nov 2014 01:50:22 +0100 Subject: [PATCH 02/13] update demo + readme --- README.md | 86 ++++++++++++++++++++++++++++++-------------------- demo/js/app.js | 26 +++++++-------- 2 files changed, 65 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 8c63879d..dd015555 100644 --- a/README.md +++ b/README.md @@ -17,41 +17,59 @@ Load particles.js and configure the particles: /* @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: 0.5, - size: 2, - size_random: true, - nb: 200, - line_linked: { - enable_auto: true, - distance: 250, - color: '#fff', - opacity: 0.5, - width: 1, - condensed_mode: { - enable: true, - rotateX: 600, - rotateY: 600 - } - }, - anim: { - enable: true, - speed: 2 - } - }, - interactivity: { - enable: false, - mouse: { - distance: 250 - }, - detect_on: 'canvas', // "canvas" or "window" - mode: 'grab' - }, - /* Retina Display Support */ - retina_detect: false + 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: { + push_particles: { + enable: true, + nb: 4 + } + } + } + }, + /* Retina Display Support */ + retina_detect: true }); ``` diff --git a/demo/js/app.js b/demo/js/app.js index 14a87b6b..cb2d34e7 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -9,10 +9,10 @@ particlesJS('particles-js', { particles: { color: '#fff', shape: 'circle', // "circle", "edge" or "triangle" - opacity: .5, - size: 2, + opacity: 1, + size: 4, size_random: true, - nb: 100, + nb: 150, line_linked: { enable_auto: true, distance: 100, @@ -27,28 +27,28 @@ particlesJS('particles-js', { }, anim: { enable: true, - speed: 2 + speed: 1 } }, interactivity: { enable: true, mouse: { - distance: 250 + distance: 300 }, detect_on: 'canvas', // "canvas" or "window" mode: 'grab', line_linked: { - opacity: .5 + opacity: .5 }, events: { - onclick: { - push_particles: { - enable: true, - nb: 4 - } - } + onclick: { + push_particles: { + enable: true, + nb: 4 + } + } } }, /* Retina Display Support */ retina_detect: true -}); +}); \ No newline at end of file From df1d2a6a02d14bc44ef4c709db4e11459ab3c673 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 01:55:21 +0100 Subject: [PATCH 03/13] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 71dedfe2..678db0d3 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "particles.js", "main": "particles.js", - "version": "1.0.0", + "version": "1.0.1", "homepage": "https://github.com/VincentGarreau/particles.js", "authors": [ "Vincent Garreau " From 25185e8b32cdb752f62a95c15fa119c69b27c16f Mon Sep 17 00:00:00 2001 From: thechunsik Date: Sun, 16 Nov 2014 20:23:48 +0900 Subject: [PATCH 04/13] added an event for removing particles - added an option for onclick event - push or remove(i thought that it needs controllers but if that, it might not lightweight library anymore) - created variables for multiple comparisons when getting params(you dont have to adopt it if it doesnt need those variables) --- demo/js/app.js | 9 ++- particles.js | 157 +++++++++++++++++++++++++++---------------------- 2 files changed, 90 insertions(+), 76 deletions(-) diff --git a/demo/js/app.js b/demo/js/app.js index cb2d34e7..661d9420 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -42,13 +42,12 @@ particlesJS('particles-js', { }, events: { onclick: { - push_particles: { - enable: true, - nb: 4 - } + enable: true, + mode: 'push', // "push" or "remove" + nb: 4 } } }, /* Retina Display Support */ retina_detect: true -}); \ No newline at end of file +}); diff --git a/particles.js b/particles.js index 4466feb2..8198d457 100644 --- a/particles.js +++ b/particles.js @@ -1,5 +1,5 @@ /* ----------------------------------------------- -/* Author : Vincent Garreau - vincentgarreau.com +/* Author : Vincent Garreau - vincentgarreau.com /* MIT license: http://opensource.org/licenses/MIT /* GitHub : https://github.com/VincentGarreau/particles.js /* How to use? : Check the GitHub README @@ -54,10 +54,9 @@ function launchParticlesJS(tag_id, params){ }, events: { onclick: { - push_particles: { - enable: true, - nb: 1 - } + enable: true, + mode: 'push', + nb: 4 } } }, @@ -72,45 +71,51 @@ function launchParticlesJS(tag_id, params){ /* params settings */ if(params){ if(params.particles){ - if(params.particles.color) pJS.particles.color = params.particles.color; - if(params.particles.shape) pJS.particles.shape = params.particles.shape; - if(params.particles.opacity) pJS.particles.opacity = params.particles.opacity; - if(params.particles.size) pJS.particles.size = params.particles.size; - if(params.particles.size_random == false) pJS.particles.size_random = params.particles.size_random; - if(params.particles.nb) pJS.particles.nb = params.particles.nb; - if(params.particles.line_linked){ - if(params.particles.line_linked.enable_auto == false) pJS.particles.line_linked.enable_auto = params.particles.line_linked.enable_auto; - if(params.particles.line_linked.distance) pJS.particles.line_linked.distance = params.particles.line_linked.distance; - if(params.particles.line_linked.color) pJS.particles.line_linked.color = params.particles.line_linked.color; - if(params.particles.line_linked.opacity) pJS.particles.line_linked.opacity = params.particles.line_linked.opacity; - if(params.particles.line_linked.width) pJS.particles.line_linked.width = params.particles.line_linked.width; - if(params.particles.line_linked.condensed_mode){ - if(params.particles.line_linked.condensed_mode.enable == false) pJS.particles.line_linked.condensed_mode.enable = params.particles.line_linked.condensed_mode.enable; - if(params.particles.line_linked.condensed_mode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = params.particles.line_linked.condensed_mode.rotateX; - if(params.particles.line_linked.condensed_mode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = params.particles.line_linked.condensed_mode.rotateY; + var paramsForParticles = params.particles; + if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color; + if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape; + if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity; + if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size; + if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random; + if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb; + if(paramsForParticles.line_linked){ + var paramsForLineLinked = paramsForParticles.line_linked; + if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto; + if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance; + if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color; + if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity; + if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width; + if(paramsForLineLinked.condensed_mode){ + var paramsForCondensedMode = paramsForLineLinked.condensed_mode; + if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable; + if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX; + if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY; } } - if(params.particles.anim){ - if(params.particles.anim.enable == false) pJS.particles.anim.enable = params.particles.anim.enable; - if(params.particles.anim.speed) pJS.particles.anim.speed = params.particles.anim.speed; + if(paramsForParticles.anim){ + var paramsForAnim = paramsForParticles.anim; + if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable; + if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed; } } if(params.interactivity){ - if(params.interactivity.enable == false) pJS.interactivity.enable = params.interactivity.enable; - if(params.interactivity.mouse){ - if(params.interactivity.mouse.distance) pJS.interactivity.mouse.distance = params.interactivity.mouse.distance; + var paramsForInteractivity = params.interactivity; + if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable; + if(paramsForInteractivity.mouse){ + if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance; } - if(params.interactivity.detect_on) pJS.interactivity.detect_on = params.interactivity.detect_on; - if(params.interactivity.mode) pJS.interactivity.mode = params.interactivity.mode; - if(params.interactivity.line_linked){ - if(params.interactivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = params.interactivity.line_linked.opacity; + if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on; + if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode; + if(paramsForInteractivity.line_linked){ + if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity; } - if(params.interactivity.events){ - if(params.interactivity.events.onclick){ - if(params.interactivity.events.onclick.push_particles){ - if(params.interactivity.events.onclick.push_particles.enable == false) pJS.interactivity.events.onclick.push_particles.enable = params.interactivity.events.onclick.push_particles.enable; - if(params.interactivity.events.onclick.push_particles.nb) pJS.interactivity.events.onclick.push_particles.nb = params.interactivity.events.onclick.push_particles.nb; - } + if(paramsForInteractivity.events){ + var paramsForEvents = paramsForInteractivity.events; + if(paramsForEvents.onclick){ + var paramsForOnclick = paramsForEvents.onclick; + if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false; + if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode; + if(typeof paramsForOnclick.nb === 'number') pJS.interactivity.events.onclick.nb = paramsForOnclick.nb; } } } @@ -126,15 +131,15 @@ function launchParticlesJS(tag_id, params){ pJS.retina = true; pJS.canvas.w = pJS.canvas.el.offsetWidth*2; pJS.canvas.h = pJS.canvas.el.offsetHeight*2; - pJS.particles.anim.speed = pJS.particles.anim.speed*2; + pJS.particles.anim.speed = pJS.particles.anim.speed*2; pJS.particles.line_linked.distance = pJS.particles.line_linked.distance*2; pJS.particles.line_linked.width = pJS.particles.line_linked.width*2; - pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance*2; + pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance*2; } /* ---------- CANVAS functions ------------ */ - + pJS.fn.canvasInit = function(){ pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); }; @@ -186,7 +191,7 @@ function launchParticlesJS(tag_id, params){ /* size */ this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size; if (pJS.retina) this.radius *= 2; - + /* color */ this.color = color; @@ -218,7 +223,7 @@ function launchParticlesJS(tag_id, params){ pJS.canvas.ctx.closePath(); break; } - + pJS.canvas.ctx.fill(); } @@ -265,7 +270,7 @@ function launchParticlesJS(tag_id, params){ } } - + } } @@ -283,7 +288,7 @@ function launchParticlesJS(tag_id, params){ var p = pJS.particles.array[i]; p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')'); } - + }; pJS.fn.particlesRemove = function(){ @@ -298,10 +303,10 @@ function launchParticlesJS(tag_id, params){ var dx = p1.x - p2.x, dy = p1.y - p2.y, dist = Math.sqrt(dx*dx + dy*dy); - + /* Check distance between particle and mouse mos */ if(dist <= pJS.particles.line_linked.distance) { - + /* draw the line */ var color_line = pJS.particles.line_linked.color_rgb_line; pJS.canvas.ctx.beginPath(); @@ -319,7 +324,7 @@ function launchParticlesJS(tag_id, params){ ax = dx/(pJS.particles.line_linked.condensed_mode.rotateX*1000), ay = dy/(pJS.particles.line_linked.condensed_mode.rotateY*1000); p2.vx += ax; - p2.vy += ay; + p2.vy += ay; } } @@ -331,7 +336,7 @@ function launchParticlesJS(tag_id, params){ }else{ var detect_el = pJS.canvas.el } - + detect_el.onmousemove = function(e){ pJS.interactivity.mouse.pos_x = e.pageX; pJS.interactivity.mouse.pos_y = e.pageY; @@ -350,21 +355,31 @@ function launchParticlesJS(tag_id, params){ pJS.interactivity.status = 'mouseleave'; }; - if(pJS.interactivity.events.onclick.push_particles.enable){ - detect_el.onclick = function(e){ - for(var i = 0; i < pJS.interactivity.events.onclick.push_particles.nb; i++){ - pJS.particles.array.push( - new pJS.fn.particle( - pJS.particles.color_rgb, - pJS.particles.opacity, - { - 'x': pJS.interactivity.mouse.pos_x, - 'y': pJS.interactivity.mouse.pos_y - } - ) - ) - } - }; + if(pJS.interactivity.events.onclick.enable){ + switch(pJS.interactivity.events.onclick.mode){ + case 'push': + detect_el.onclick = function(e){ + for(var i = 0; i < pJS.interactivity.events.onclick.nb; i++){ + pJS.particles.array.push( + new pJS.fn.particle( + pJS.particles.color_rgb, + pJS.particles.opacity, + { + 'x': pJS.interactivity.mouse.pos_x, + 'y': pJS.interactivity.mouse.pos_y + } + ) + ) + }; + } + break; + + case 'remove': + detect_el.onclick = function(e){ + pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb); + } + break; + } } }; @@ -416,7 +431,7 @@ function launchParticlesJS(tag_id, params){ pJS.fn.requestAnimFrame = requestAnimFrame(launchAnimation); }; - + launchParticles(); if(pJS.particles.anim.enable){ @@ -433,11 +448,11 @@ function launchParticlesJS(tag_id, params){ /* --- VENDORS --- */ window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; @@ -482,7 +497,7 @@ window.particlesJS = function(tag_id, params){ if(!tag_id){ tag_id = 'particles-js'; } - + /* create canvas element */ var canvas_el = document.createElement('canvas'); @@ -498,4 +513,4 @@ window.particlesJS = function(tag_id, params){ launchParticlesJS(tag_id, params); } -}; \ No newline at end of file +}; From dff20005d14c286c2dbbb5ffc173bc97db653516 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 13:31:54 +0100 Subject: [PATCH 05/13] Delete particles.min.js --- particles.min.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 particles.min.js diff --git a/particles.min.js b/particles.min.js deleted file mode 100644 index ce73aa42..00000000 --- a/particles.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/* ----------------------------------------------- -/* Author : Vincent Garreau - vincentgarreau.com -/* MIT license: http://opensource.org/licenses/MIT -/* GitHub : https://github.com/VincentGarreau/particles.js -/* How to use? : Check the GitHub README -/* v1.0.1 -/* ----------------------------------------------- */ -function launchParticlesJS(e,d){var c=document.querySelector("#"+e+" > canvas");pJS={canvas:{el:c,w:c.offsetWidth,h:c.offsetHeight},particles:{color:"#fff",shape:"circle",opacity:1,size:2.5,size_random:true,nb:200,line_linked:{enable_auto:true,distance:100,color:"#fff",opacity:1,width:1,condensed_mode:{enable:true,rotateX:65000,rotateY:65000}},anim:{enable:true,speed:1},array:[]},interactivity:{enable:true,mouse:{distance:100},detect_on:"canvas",mode:"grab",line_linked:{opacity:1},events:{onclick:{push_particles:{enable:true,nb:1}}}},retina_detect:false,fn:{vendors:{interactivity:{}}}};if(d){if(d.particles){if(d.particles.color){pJS.particles.color=d.particles.color}if(d.particles.shape){pJS.particles.shape=d.particles.shape}if(d.particles.opacity){pJS.particles.opacity=d.particles.opacity}if(d.particles.size){pJS.particles.size=d.particles.size}if(d.particles.size_random==false){pJS.particles.size_random=d.particles.size_random}if(d.particles.nb){pJS.particles.nb=d.particles.nb}if(d.particles.line_linked){if(d.particles.line_linked.enable_auto==false){pJS.particles.line_linked.enable_auto=d.particles.line_linked.enable_auto}if(d.particles.line_linked.distance){pJS.particles.line_linked.distance=d.particles.line_linked.distance}if(d.particles.line_linked.color){pJS.particles.line_linked.color=d.particles.line_linked.color}if(d.particles.line_linked.opacity){pJS.particles.line_linked.opacity=d.particles.line_linked.opacity}if(d.particles.line_linked.width){pJS.particles.line_linked.width=d.particles.line_linked.width}if(d.particles.line_linked.condensed_mode){if(d.particles.line_linked.condensed_mode.enable==false){pJS.particles.line_linked.condensed_mode.enable=d.particles.line_linked.condensed_mode.enable}if(d.particles.line_linked.condensed_mode.rotateX){pJS.particles.line_linked.condensed_mode.rotateX=d.particles.line_linked.condensed_mode.rotateX}if(d.particles.line_linked.condensed_mode.rotateY){pJS.particles.line_linked.condensed_mode.rotateY=d.particles.line_linked.condensed_mode.rotateY}}}if(d.particles.anim){if(d.particles.anim.enable==false){pJS.particles.anim.enable=d.particles.anim.enable}if(d.particles.anim.speed){pJS.particles.anim.speed=d.particles.anim.speed}}}if(d.interactivity){if(d.interactivity.enable==false){pJS.interactivity.enable=d.interactivity.enable}if(d.interactivity.mouse){if(d.interactivity.mouse.distance){pJS.interactivity.mouse.distance=d.interactivity.mouse.distance}}if(d.interactivity.detect_on){pJS.interactivity.detect_on=d.interactivity.detect_on}if(d.interactivity.mode){pJS.interactivity.mode=d.interactivity.mode}if(d.interactivity.line_linked){if(d.interactivity.line_linked.opacity){pJS.interactivity.line_linked.opacity=d.interactivity.line_linked.opacity}}if(d.interactivity.events){if(d.interactivity.events.onclick){if(d.interactivity.events.onclick.push_particles){if(d.interactivity.events.onclick.push_particles.enable==false){pJS.interactivity.events.onclick.push_particles.enable=d.interactivity.events.onclick.push_particles.enable}if(d.interactivity.events.onclick.push_particles.nb){pJS.interactivity.events.onclick.push_particles.nb=d.interactivity.events.onclick.push_particles.nb}}}}}pJS.retina_detect=d.retina_detect}pJS.particles.color_rgb=hexToRgb(pJS.particles.color);pJS.particles.line_linked.color_rgb_line=hexToRgb(pJS.particles.line_linked.color);if(pJS.retina_detect&&window.devicePixelRatio>1){pJS.retina=true;pJS.canvas.w=pJS.canvas.el.offsetWidth*2;pJS.canvas.h=pJS.canvas.el.offsetHeight*2;pJS.particles.anim.speed=pJS.particles.anim.speed*2;pJS.particles.line_linked.distance=pJS.particles.line_linked.distance*2;pJS.particles.line_linked.width=pJS.particles.line_linked.width*2;pJS.interactivity.mouse.distance=pJS.interactivity.mouse.distance*2}pJS.fn.canvasInit=function(){pJS.canvas.ctx=pJS.canvas.el.getContext("2d")};pJS.fn.canvasSize=function(){pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;window.onresize=function(){pJS.canvas.w=pJS.canvas.el.offsetWidth;pJS.canvas.h=pJS.canvas.el.offsetHeight;if(pJS.retina){pJS.canvas.w*=2;pJS.canvas.h*=2}pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;pJS.fn.canvasPaint();if(!pJS.particles.anim.enable){pJS.fn.particlesRemove();pJS.fn.canvasRemove();a()}}};pJS.fn.canvasPaint=function(){pJS.canvas.ctx.fillRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.canvasRemove=function(){pJS.canvas.ctx.clearRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.particle=function(g,h,f){this.x=f?f.x:Math.random()*pJS.canvas.w;this.y=f?f.y:Math.random()*pJS.canvas.h;this.radius=(pJS.particles.size_random?Math.random():1)*pJS.particles.size;if(pJS.retina){this.radius*=2}this.color=g;this.opacity=h;this.vx=-0.5+Math.random();this.vy=-0.5+Math.random();this.draw=function(){pJS.canvas.ctx.fillStyle="rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.opacity+")";pJS.canvas.ctx.beginPath();switch(pJS.particles.shape){case"circle":pJS.canvas.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);break;case"edge":pJS.canvas.ctx.rect(this.x,this.y,this.radius*2,this.radius*2);break;case"triangle":pJS.canvas.ctx.moveTo(this.x,this.y);pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius*2);pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius*2);pJS.canvas.ctx.closePath();break}pJS.canvas.ctx.fill()}};pJS.fn.particlesCreate=function(){for(var f=0;fpJS.canvas.w){k.x=k.radius}else{if(k.x+k.radius<0){k.x=pJS.canvas.w+k.radius}}if(k.y-k.radius>pJS.canvas.h){k.y=k.radius}else{if(k.y+k.radius<0){k.y=pJS.canvas.h+k.radius}}for(var f=g+1;f Date: Sun, 16 Nov 2014 13:38:26 +0100 Subject: [PATCH 06/13] add comments --- particles.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/particles.js b/particles.js index 8198d457..88e88e0d 100644 --- a/particles.js +++ b/particles.js @@ -331,12 +331,15 @@ function launchParticlesJS(tag_id, params){ }; pJS.fn.vendors.interactivity.listeners = function(){ + + /* init el */ if(pJS.interactivity.detect_on == 'window'){ var detect_el = window }else{ var detect_el = pJS.canvas.el } + /* el on mousemove */ detect_el.onmousemove = function(e){ pJS.interactivity.mouse.pos_x = e.pageX; pJS.interactivity.mouse.pos_y = e.pageY; @@ -349,12 +352,14 @@ function launchParticlesJS(tag_id, params){ pJS.interactivity.status = 'mousemove'; }; + /* el on onmouseleave */ detect_el.onmouseleave = function(e){ pJS.interactivity.mouse.pos_x = 0; pJS.interactivity.mouse.pos_y = 0; pJS.interactivity.status = 'mouseleave'; }; + /* el on onclick */ if(pJS.interactivity.events.onclick.enable){ switch(pJS.interactivity.events.onclick.mode){ case 'push': @@ -381,7 +386,6 @@ function launchParticlesJS(tag_id, params){ break; } } - }; From 9c7500b16fe11f5d87ae1c4c2734b38536b909e3 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 13:42:20 +0100 Subject: [PATCH 07/13] update readme --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index dd015555..1a8862a1 100644 --- a/README.md +++ b/README.md @@ -61,10 +61,9 @@ particlesJS('particles-js', { }, events: { onclick: { - push_particles: { - enable: true, - nb: 4 - } + enable: true, + mode: 'push', // "push" or "remove" + nb: 4 } } }, From f71c3d7c69c567ea9bdddba9f7fb01859f4863f7 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 13:44:29 +0100 Subject: [PATCH 08/13] update version number - 1.0.2 --- bower.json | 2 +- particles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 678db0d3..2a7082f3 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "particles.js", "main": "particles.js", - "version": "1.0.1", + "version": "1.0.2", "homepage": "https://github.com/VincentGarreau/particles.js", "authors": [ "Vincent Garreau " diff --git a/particles.js b/particles.js index 88e88e0d..b18cba8c 100644 --- a/particles.js +++ b/particles.js @@ -3,7 +3,7 @@ /* MIT license: http://opensource.org/licenses/MIT /* GitHub : https://github.com/VincentGarreau/particles.js /* How to use? : Check the GitHub README -/* v1.0.1 +/* v1.0.2 /* ----------------------------------------------- */ function launchParticlesJS(tag_id, params){ From f1ff2956a24f49f82650b51c1c460117b139acb7 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 13:53:14 +0100 Subject: [PATCH 09/13] update condition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit lighter / can set 4 (number) or « 4 » (string) --- particles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/particles.js b/particles.js index b18cba8c..5b15db12 100644 --- a/particles.js +++ b/particles.js @@ -115,7 +115,7 @@ function launchParticlesJS(tag_id, params){ var paramsForOnclick = paramsForEvents.onclick; if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false; if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode; - if(typeof paramsForOnclick.nb === 'number') pJS.interactivity.events.onclick.nb = paramsForOnclick.nb; + if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb; } } } From 340102b22d69aa86817317615256be5dd9d66e05 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 16:33:17 +0100 Subject: [PATCH 10/13] fix bug - replace e.page to e.offset on mousemove --- particles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/particles.js b/particles.js index 5b15db12..3efa81c3 100644 --- a/particles.js +++ b/particles.js @@ -341,8 +341,8 @@ function launchParticlesJS(tag_id, params){ /* el on mousemove */ detect_el.onmousemove = function(e){ - pJS.interactivity.mouse.pos_x = e.pageX; - pJS.interactivity.mouse.pos_y = e.pageY; + pJS.interactivity.mouse.pos_x = e.offsetX; + pJS.interactivity.mouse.pos_y = e.offsetY; if(pJS.retina){ pJS.interactivity.mouse.pos_x *= 2; From 329db9457c25982c1666d1cc204268c2c3c34288 Mon Sep 17 00:00:00 2001 From: Vincent Garreau Date: Sun, 16 Nov 2014 16:44:40 +0100 Subject: [PATCH 11/13] add particles.min.js --- particles.min.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 particles.min.js diff --git a/particles.min.js b/particles.min.js new file mode 100644 index 00000000..2f843d71 --- /dev/null +++ b/particles.min.js @@ -0,0 +1,9 @@ +/* ----------------------------------------------- +/* Author : Vincent Garreau - vincentgarreau.com +/* MIT license: http://opensource.org/licenses/MIT +/* GitHub : https://github.com/VincentGarreau/particles.js +/* How to use? : Check the GitHub README +/* v1.0.2 +/* ----------------------------------------------- */ + +function launchParticlesJS(a,e){var i=document.querySelector("#"+a+" > canvas");pJS={canvas:{el:i,w:i.offsetWidth,h:i.offsetHeight},particles:{color:"#fff",shape:"circle",opacity:1,size:2.5,size_random:true,nb:200,line_linked:{enable_auto:true,distance:100,color:"#fff",opacity:1,width:1,condensed_mode:{enable:true,rotateX:65000,rotateY:65000}},anim:{enable:true,speed:1},array:[]},interactivity:{enable:true,mouse:{distance:100},detect_on:"canvas",mode:"grab",line_linked:{opacity:1},events:{onclick:{enable:true,mode:"push",nb:4}}},retina_detect:false,fn:{vendors:{interactivity:{}}}};if(e){if(e.particles){var b=e.particles;if(b.color){pJS.particles.color=b.color}if(b.shape){pJS.particles.shape=b.shape}if(b.opacity){pJS.particles.opacity=b.opacity}if(b.size){pJS.particles.size=b.size}if(b.size_random==false){pJS.particles.size_random=b.size_random}if(b.nb){pJS.particles.nb=b.nb}if(b.line_linked){var j=b.line_linked;if(j.enable_auto==false){pJS.particles.line_linked.enable_auto=j.enable_auto}if(j.distance){pJS.particles.line_linked.distance=j.distance}if(j.color){pJS.particles.line_linked.color=j.color}if(j.opacity){pJS.particles.line_linked.opacity=j.opacity}if(j.width){pJS.particles.line_linked.width=j.width}if(j.condensed_mode){var g=j.condensed_mode;if(g.enable==false){pJS.particles.line_linked.condensed_mode.enable=g.enable}if(g.rotateX){pJS.particles.line_linked.condensed_mode.rotateX=g.rotateX}if(g.rotateY){pJS.particles.line_linked.condensed_mode.rotateY=g.rotateY}}}if(b.anim){var k=b.anim;if(k.enable==false){pJS.particles.anim.enable=k.enable}if(k.speed){pJS.particles.anim.speed=k.speed}}}if(e.interactivity){var c=e.interactivity;if(c.enable==false){pJS.interactivity.enable=c.enable}if(c.mouse){if(c.mouse.distance){pJS.interactivity.mouse.distance=c.mouse.distance}}if(c.detect_on){pJS.interactivity.detect_on=c.detect_on}if(c.mode){pJS.interactivity.mode=c.mode}if(c.line_linked){if(c.line_linked.opacity){pJS.interactivity.line_linked.opacity=c.line_linked.opacity}}if(c.events){var d=c.events;if(d.onclick){var h=d.onclick;if(h.enable==false){pJS.interactivity.events.onclick.enable=false}if(h.mode!="push"){pJS.interactivity.events.onclick.mode=h.mode}if(h.nb){pJS.interactivity.events.onclick.nb=h.nb}}}}pJS.retina_detect=e.retina_detect}pJS.particles.color_rgb=hexToRgb(pJS.particles.color);pJS.particles.line_linked.color_rgb_line=hexToRgb(pJS.particles.line_linked.color);if(pJS.retina_detect&&window.devicePixelRatio>1){pJS.retina=true;pJS.canvas.w=pJS.canvas.el.offsetWidth*2;pJS.canvas.h=pJS.canvas.el.offsetHeight*2;pJS.particles.anim.speed=pJS.particles.anim.speed*2;pJS.particles.line_linked.distance=pJS.particles.line_linked.distance*2;pJS.particles.line_linked.width=pJS.particles.line_linked.width*2;pJS.interactivity.mouse.distance=pJS.interactivity.mouse.distance*2}pJS.fn.canvasInit=function(){pJS.canvas.ctx=pJS.canvas.el.getContext("2d")};pJS.fn.canvasSize=function(){pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;window.onresize=function(){pJS.canvas.w=pJS.canvas.el.offsetWidth;pJS.canvas.h=pJS.canvas.el.offsetHeight;if(pJS.retina){pJS.canvas.w*=2;pJS.canvas.h*=2}pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;pJS.fn.canvasPaint();if(!pJS.particles.anim.enable){pJS.fn.particlesRemove();pJS.fn.canvasRemove();f()}}};pJS.fn.canvasPaint=function(){pJS.canvas.ctx.fillRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.canvasRemove=function(){pJS.canvas.ctx.clearRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.particle=function(n,o,m){this.x=m?m.x:Math.random()*pJS.canvas.w;this.y=m?m.y:Math.random()*pJS.canvas.h;this.radius=(pJS.particles.size_random?Math.random():1)*pJS.particles.size;if(pJS.retina){this.radius*=2}this.color=n;this.opacity=o;this.vx=-0.5+Math.random();this.vy=-0.5+Math.random();this.draw=function(){pJS.canvas.ctx.fillStyle="rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.opacity+")";pJS.canvas.ctx.beginPath();switch(pJS.particles.shape){case"circle":pJS.canvas.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);break;case"edge":pJS.canvas.ctx.rect(this.x,this.y,this.radius*2,this.radius*2);break;case"triangle":pJS.canvas.ctx.moveTo(this.x,this.y);pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius*2);pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius*2);pJS.canvas.ctx.closePath();break}pJS.canvas.ctx.fill()}};pJS.fn.particlesCreate=function(){for(var m=0;mpJS.canvas.w){q.x=q.radius}else{if(q.x+q.radius<0){q.x=pJS.canvas.w+q.radius}}if(q.y-q.radius>pJS.canvas.h){q.y=q.radius}else{if(q.y+q.radius<0){q.y=pJS.canvas.h+q.radius}}for(var m=n+1;m Date: Sun, 16 Nov 2014 16:45:39 +0100 Subject: [PATCH 12/13] remove break space --- particles.min.js | 1 - 1 file changed, 1 deletion(-) diff --git a/particles.min.js b/particles.min.js index 2f843d71..881f99ca 100644 --- a/particles.min.js +++ b/particles.min.js @@ -5,5 +5,4 @@ /* How to use? : Check the GitHub README /* v1.0.2 /* ----------------------------------------------- */ - function launchParticlesJS(a,e){var i=document.querySelector("#"+a+" > canvas");pJS={canvas:{el:i,w:i.offsetWidth,h:i.offsetHeight},particles:{color:"#fff",shape:"circle",opacity:1,size:2.5,size_random:true,nb:200,line_linked:{enable_auto:true,distance:100,color:"#fff",opacity:1,width:1,condensed_mode:{enable:true,rotateX:65000,rotateY:65000}},anim:{enable:true,speed:1},array:[]},interactivity:{enable:true,mouse:{distance:100},detect_on:"canvas",mode:"grab",line_linked:{opacity:1},events:{onclick:{enable:true,mode:"push",nb:4}}},retina_detect:false,fn:{vendors:{interactivity:{}}}};if(e){if(e.particles){var b=e.particles;if(b.color){pJS.particles.color=b.color}if(b.shape){pJS.particles.shape=b.shape}if(b.opacity){pJS.particles.opacity=b.opacity}if(b.size){pJS.particles.size=b.size}if(b.size_random==false){pJS.particles.size_random=b.size_random}if(b.nb){pJS.particles.nb=b.nb}if(b.line_linked){var j=b.line_linked;if(j.enable_auto==false){pJS.particles.line_linked.enable_auto=j.enable_auto}if(j.distance){pJS.particles.line_linked.distance=j.distance}if(j.color){pJS.particles.line_linked.color=j.color}if(j.opacity){pJS.particles.line_linked.opacity=j.opacity}if(j.width){pJS.particles.line_linked.width=j.width}if(j.condensed_mode){var g=j.condensed_mode;if(g.enable==false){pJS.particles.line_linked.condensed_mode.enable=g.enable}if(g.rotateX){pJS.particles.line_linked.condensed_mode.rotateX=g.rotateX}if(g.rotateY){pJS.particles.line_linked.condensed_mode.rotateY=g.rotateY}}}if(b.anim){var k=b.anim;if(k.enable==false){pJS.particles.anim.enable=k.enable}if(k.speed){pJS.particles.anim.speed=k.speed}}}if(e.interactivity){var c=e.interactivity;if(c.enable==false){pJS.interactivity.enable=c.enable}if(c.mouse){if(c.mouse.distance){pJS.interactivity.mouse.distance=c.mouse.distance}}if(c.detect_on){pJS.interactivity.detect_on=c.detect_on}if(c.mode){pJS.interactivity.mode=c.mode}if(c.line_linked){if(c.line_linked.opacity){pJS.interactivity.line_linked.opacity=c.line_linked.opacity}}if(c.events){var d=c.events;if(d.onclick){var h=d.onclick;if(h.enable==false){pJS.interactivity.events.onclick.enable=false}if(h.mode!="push"){pJS.interactivity.events.onclick.mode=h.mode}if(h.nb){pJS.interactivity.events.onclick.nb=h.nb}}}}pJS.retina_detect=e.retina_detect}pJS.particles.color_rgb=hexToRgb(pJS.particles.color);pJS.particles.line_linked.color_rgb_line=hexToRgb(pJS.particles.line_linked.color);if(pJS.retina_detect&&window.devicePixelRatio>1){pJS.retina=true;pJS.canvas.w=pJS.canvas.el.offsetWidth*2;pJS.canvas.h=pJS.canvas.el.offsetHeight*2;pJS.particles.anim.speed=pJS.particles.anim.speed*2;pJS.particles.line_linked.distance=pJS.particles.line_linked.distance*2;pJS.particles.line_linked.width=pJS.particles.line_linked.width*2;pJS.interactivity.mouse.distance=pJS.interactivity.mouse.distance*2}pJS.fn.canvasInit=function(){pJS.canvas.ctx=pJS.canvas.el.getContext("2d")};pJS.fn.canvasSize=function(){pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;window.onresize=function(){pJS.canvas.w=pJS.canvas.el.offsetWidth;pJS.canvas.h=pJS.canvas.el.offsetHeight;if(pJS.retina){pJS.canvas.w*=2;pJS.canvas.h*=2}pJS.canvas.el.width=pJS.canvas.w;pJS.canvas.el.height=pJS.canvas.h;pJS.fn.canvasPaint();if(!pJS.particles.anim.enable){pJS.fn.particlesRemove();pJS.fn.canvasRemove();f()}}};pJS.fn.canvasPaint=function(){pJS.canvas.ctx.fillRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.canvasRemove=function(){pJS.canvas.ctx.clearRect(0,0,pJS.canvas.w,pJS.canvas.h)};pJS.fn.particle=function(n,o,m){this.x=m?m.x:Math.random()*pJS.canvas.w;this.y=m?m.y:Math.random()*pJS.canvas.h;this.radius=(pJS.particles.size_random?Math.random():1)*pJS.particles.size;if(pJS.retina){this.radius*=2}this.color=n;this.opacity=o;this.vx=-0.5+Math.random();this.vy=-0.5+Math.random();this.draw=function(){pJS.canvas.ctx.fillStyle="rgba("+this.color.r+","+this.color.g+","+this.color.b+","+this.opacity+")";pJS.canvas.ctx.beginPath();switch(pJS.particles.shape){case"circle":pJS.canvas.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);break;case"edge":pJS.canvas.ctx.rect(this.x,this.y,this.radius*2,this.radius*2);break;case"triangle":pJS.canvas.ctx.moveTo(this.x,this.y);pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius*2);pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius*2);pJS.canvas.ctx.closePath();break}pJS.canvas.ctx.fill()}};pJS.fn.particlesCreate=function(){for(var m=0;mpJS.canvas.w){q.x=q.radius}else{if(q.x+q.radius<0){q.x=pJS.canvas.w+q.radius}}if(q.y-q.radius>pJS.canvas.h){q.y=q.radius}else{if(q.y+q.radius<0){q.y=pJS.canvas.h+q.radius}}for(var m=n+1;m Date: Sun, 16 Nov 2014 16:46:49 +0100 Subject: [PATCH 13/13] update readme --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index 1a8862a1..155bbda5 100644 --- a/README.md +++ b/README.md @@ -17,13 +17,6 @@ Load particles.js and configure the particles: /* @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',