github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/web/r/cms/www/default/plugins/particles/particles.js (about) 1 /* ----------------------------------------------- 2 /* Author : Vincent Garreau - vincentgarreau.com 3 /* MIT license: http://opensource.org/licenses/MIT 4 /* GitHub : https://github.com/VincentGarreau/particles.js 5 /* How to use? : Check the GitHub README 6 /* v1.0.3 7 /* ----------------------------------------------- */ 8 9 function launchParticlesJS(tag_id, params){ 10 11 var canvas_el = document.querySelector('#'+tag_id+' > canvas'); 12 13 /* particles.js variables with default values */ 14 pJS = { 15 canvas: { 16 el: canvas_el, 17 w: canvas_el.offsetWidth, 18 h: canvas_el.offsetHeight 19 }, 20 particles: { 21 color: '#69a591', 22 shape: 'circle', 23 opacity: 1, 24 size: 2.5, 25 size_random: true, 26 nb: 200, 27 line_linked: { 28 enable_auto: true, 29 distance: 100, 30 color: '#5a9480', 31 opacity: 1, 32 width: 1, 33 condensed_mode: { 34 enable: true, 35 rotateX: 65000, 36 rotateY: 65000 37 } 38 }, 39 anim: { 40 enable: true, 41 speed: 1 42 }, 43 array: [] 44 }, 45 interactivity: { 46 enable: true, 47 mouse: { 48 distance: 100 49 }, 50 detect_on: 'canvas', 51 mode: 'grab', 52 line_linked: { 53 opacity: 1 54 }, 55 events: { 56 onclick: { 57 enable: true, 58 mode: 'push', 59 nb: 4 60 } 61 } 62 }, 63 retina_detect: false, 64 fn: { 65 vendors:{ 66 interactivity: {} 67 } 68 } 69 }; 70 71 /* params settings */ 72 if(params){ 73 if(params.particles){ 74 var paramsForParticles = params.particles; 75 if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color; 76 if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape; 77 if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity; 78 if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size; 79 if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random; 80 if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb; 81 if(paramsForParticles.line_linked){ 82 var paramsForLineLinked = paramsForParticles.line_linked; 83 if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto; 84 if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance; 85 if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color; 86 if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity; 87 if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width; 88 if(paramsForLineLinked.condensed_mode){ 89 var paramsForCondensedMode = paramsForLineLinked.condensed_mode; 90 if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable; 91 if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX; 92 if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY; 93 } 94 } 95 if(paramsForParticles.anim){ 96 var paramsForAnim = paramsForParticles.anim; 97 if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable; 98 if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed; 99 } 100 } 101 if(params.interactivity){ 102 var paramsForInteractivity = params.interactivity; 103 if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable; 104 if(paramsForInteractivity.mouse){ 105 if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance; 106 } 107 if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on; 108 if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode; 109 if(paramsForInteractivity.line_linked){ 110 if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity; 111 } 112 if(paramsForInteractivity.events){ 113 var paramsForEvents = paramsForInteractivity.events; 114 if(paramsForEvents.onclick){ 115 var paramsForOnclick = paramsForEvents.onclick; 116 if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false; 117 if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode; 118 if(paramsForOnclick.nb) pJS.interactivity.events.onclick.nb = paramsForOnclick.nb; 119 } 120 } 121 } 122 pJS.retina_detect = params.retina_detect; 123 } 124 125 /* convert hex colors to rgb */ 126 pJS.particles.color_rgb = hexToRgb(pJS.particles.color); 127 pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color); 128 129 /* detect retina */ 130 if(pJS.retina_detect && window.devicePixelRatio > 1){ 131 pJS.retina = true; 132 133 pJS.canvas.pxratio = window.devicePixelRatio 134 pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio; 135 pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio; 136 pJS.particles.anim.speed = pJS.particles.anim.speed * pJS.canvas.pxratio; 137 pJS.particles.line_linked.distance = pJS.particles.line_linked.distance * pJS.canvas.pxratio; 138 pJS.particles.line_linked.width = pJS.particles.line_linked.width * pJS.canvas.pxratio; 139 pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance * pJS.canvas.pxratio; 140 } 141 142 143 /* ---------- CANVAS functions ------------ */ 144 145 pJS.fn.canvasInit = function(){ 146 pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); 147 }; 148 149 pJS.fn.canvasSize = function(){ 150 pJS.canvas.el.width = pJS.canvas.w; 151 pJS.canvas.el.height = pJS.canvas.h; 152 153 window.onresize = function(){ 154 if(pJS){ 155 pJS.canvas.w = pJS.canvas.el.offsetWidth; 156 pJS.canvas.h = pJS.canvas.el.offsetHeight; 157 158 /* resize canvas */ 159 if(pJS.retina){ 160 pJS.canvas.w *= pJS.canvas.pxratio; 161 pJS.canvas.h *= pJS.canvas.pxratio; 162 } 163 164 pJS.canvas.el.width = pJS.canvas.w; 165 pJS.canvas.el.height = pJS.canvas.h; 166 167 /* repaint canvas */ 168 pJS.fn.canvasPaint(); 169 if(!pJS.particles.anim.enable){ 170 pJS.fn.particlesRemove(); 171 pJS.fn.canvasRemove(); 172 launchParticles(); 173 } 174 } 175 } 176 }; 177 178 pJS.fn.canvasPaint = function(){ 179 pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h); 180 }; 181 182 pJS.fn.canvasRemove = function(){ 183 pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); 184 } 185 186 187 /* --------- PARTICLES functions ----------- */ 188 189 pJS.fn.particle = function(color, opacity, position,type){ 190 191 /* position */ 192 this.x = position ? position.x : Math.random() * pJS.canvas.w; 193 this.y = position ? position.y : Math.random() * pJS.canvas.h; 194 195 /* size */ 196 this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size; 197 if (pJS.retina) this.radius *= pJS.canvas.pxratio; 198 199 /* color */ 200 this.color = color; 201 202 /* opacity */ 203 this.opacity = opacity; 204 205 /* animation - velocity for speed */ 206 this.vx = -.5 + Math.random(); 207 this.vy = -.5 + Math.random(); 208 209 /* draw function */ 210 this.draw = function(){ 211 pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')'; 212 pJS.canvas.ctx.beginPath(); 213 214 switch(type){ 215 case 'circle': 216 pJS.canvas.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 217 break; 218 219 case 'edge': 220 pJS.canvas.ctx.rect(this.x, this.y, this.radius*2, this.radius*2); 221 break; 222 223 case 'triangle': 224 pJS.canvas.ctx.moveTo(this.x,this.y-this.radius); 225 pJS.canvas.ctx.lineTo(this.x+this.radius,this.y+this.radius); 226 pJS.canvas.ctx.lineTo(this.x-this.radius,this.y+this.radius); 227 pJS.canvas.ctx.closePath(); 228 break; 229 } 230 231 pJS.canvas.ctx.fill(); 232 } 233 234 }; 235 236 237 238 pJS.fn.particlesCreate = function(){ 239 for(var i = 0; i < pJS.particles.nb; i++) { 240 var shapeArr = ["circle","circle","circle","circle"]; 241 var colorArr = ["#000000","#69a591","#69a591","#69a591"]; 242 var m = Math.floor(Math.random()*3+1); 243 //console.log(m); 244 var cor = hexToRgb(colorArr[m]); 245 pJS.particles.array.push(new pJS.fn.particle(cor, pJS.particles.opacity,null,shapeArr[m])); 246 } 247 }; 248 249 pJS.fn.particlesAnimate = function(){ 250 for(var i = 0; i < pJS.particles.array.length; i++){ 251 /* the particle */ 252 var p = pJS.particles.array[i]; 253 254 /* move the particle */ 255 p.x += p.vx * (pJS.particles.anim.speed/2); 256 p.y += p.vy * (pJS.particles.anim.speed/2); 257 258 /* change particle position if it is out of canvas */ 259 if(p.x - p.radius > pJS.canvas.w) p.x = p.radius; 260 else if(p.x + p.radius < 0) p.x = pJS.canvas.w + p.radius; 261 if(p.y - p.radius > pJS.canvas.h) p.y = p.radius; 262 else if(p.y + p.radius < 0) p.y = pJS.canvas.h + p.radius; 263 264 /* Check distance between each particle and mouse position */ 265 for(var j = i + 1; j < pJS.particles.array.length; j++){ 266 var p2 = pJS.particles.array[j]; 267 268 /* link particles if enable */ 269 if(pJS.particles.line_linked.enable_auto){ 270 pJS.fn.vendors.distanceParticles(p,p2); 271 } 272 273 /* set interactivity if enable */ 274 if(pJS.interactivity.enable){ 275 276 /* interactivity mode */ 277 switch(pJS.interactivity.mode){ 278 case 'grab': 279 pJS.fn.vendors.interactivity.grabParticles(p,p2); 280 break; 281 } 282 283 } 284 285 286 } 287 } 288 }; 289 290 pJS.fn.particlesDraw = function(){ 291 /* clear canvas */ 292 pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); 293 294 /* move particles */ 295 pJS.fn.particlesAnimate(); 296 297 /* draw each particle */ 298 for(var i = 0; i < pJS.particles.array.length; i++){ 299 var p = pJS.particles.array[i]; 300 p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')'); 301 } 302 303 }; 304 305 pJS.fn.particlesRemove = function(){ 306 pJS.particles.array = []; 307 }; 308 309 310 /* ---------- VENDORS functions ------------ */ 311 312 pJS.fn.vendors.distanceParticles = function(p1, p2){ 313 314 var dx = p1.x - p2.x, 315 dy = p1.y - p2.y, 316 dist = Math.sqrt(dx*dx + dy*dy); 317 318 /* Check distance between particle and mouse mos */ 319 if(dist <= pJS.particles.line_linked.distance) { 320 321 /* draw the line */ 322 var color_line = pJS.particles.line_linked.color_rgb_line; 323 pJS.canvas.ctx.beginPath(); 324 pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.particles.line_linked.opacity-dist/pJS.particles.line_linked.distance) +')'; 325 pJS.canvas.ctx.moveTo(p1.x, p1.y); 326 pJS.canvas.ctx.lineTo(p2.x, p2.y); 327 pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; 328 pJS.canvas.ctx.stroke(); 329 pJS.canvas.ctx.closePath(); 330 331 /* condensed particles */ 332 if(pJS.particles.line_linked.condensed_mode.enable){ 333 var dx = p1.x - p2.x, 334 dy = p1.y - p2.y, 335 ax = dx/(pJS.particles.line_linked.condensed_mode.rotateX*1000), 336 ay = dy/(pJS.particles.line_linked.condensed_mode.rotateY*1000); 337 p2.vx += ax; 338 p2.vy += ay; 339 } 340 341 } 342 }; 343 344 pJS.fn.vendors.interactivity.listeners = function(){ 345 346 /* init el */ 347 if(pJS.interactivity.detect_on == 'window'){ 348 var detect_el = window; 349 }else{ 350 var detect_el = pJS.canvas.el; 351 } 352 353 /* el on mousemove */ 354 detect_el.onmousemove = function(e){ 355 356 if(detect_el == window){ 357 var pos_x = e.clientX, 358 pos_y = e.clientY; 359 } 360 else{ 361 var pos_x = e.offsetX||e.clientX, 362 pos_y = e.offsetY||e.clientY; 363 } 364 365 if(pJS){ 366 367 pJS.interactivity.mouse.pos_x = pos_x; 368 pJS.interactivity.mouse.pos_y = pos_y; 369 370 if(pJS.retina){ 371 pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio; 372 pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio; 373 } 374 375 pJS.interactivity.status = 'mousemove'; 376 } 377 378 }; 379 380 /* el on onmouseleave */ 381 detect_el.onmouseleave = function(e){ 382 383 if(pJS){ 384 pJS.interactivity.mouse.pos_x = 0; 385 pJS.interactivity.mouse.pos_y = 0; 386 pJS.interactivity.status = 'mouseleave'; 387 } 388 389 }; 390 391 /* el on onclick */ 392 if(pJS.interactivity.events.onclick.enable){ 393 switch(pJS.interactivity.events.onclick.mode){ 394 case 'push': 395 detect_el.onclick = function(e){ 396 if(pJS){ 397 for(var i = 0; i < pJS.interactivity.events.onclick.nb; i++){ 398 pJS.particles.array.push( 399 new pJS.fn.particle( 400 pJS.particles.color_rgb, 401 pJS.particles.opacity, 402 { 403 'x': pJS.interactivity.mouse.pos_x, 404 'y': pJS.interactivity.mouse.pos_y 405 } 406 ) 407 ) 408 } 409 } 410 } 411 break; 412 413 case 'remove': 414 detect_el.onclick = function(e){ 415 pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb); 416 } 417 break; 418 } 419 } 420 }; 421 422 423 pJS.fn.vendors.interactivity.grabParticles = function(p1, p2){ 424 var dx = p1.x - p2.x, 425 dy = p1.y - p2.y, 426 dist = Math.sqrt(dx*dx + dy*dy); 427 428 var dx_mouse = p1.x - pJS.interactivity.mouse.pos_x, 429 dy_mouse = p1.y - pJS.interactivity.mouse.pos_y, 430 dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); 431 432 /* Check distance between 2 particles + Check distance between 1 particle and mouse position */ 433 if(dist <= pJS.particles.line_linked.distance && dist_mouse <= pJS.interactivity.mouse.distance && pJS.interactivity.status == 'mousemove'){ 434 /* Draw the line */ 435 var color_line = pJS.particles.line_linked.color_rgb_line; 436 pJS.canvas.ctx.beginPath(); 437 pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.interactivity.line_linked.opacity-dist_mouse/pJS.interactivity.mouse.distance) +')'; 438 pJS.canvas.ctx.moveTo(p1.x, p1.y); 439 pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y); 440 pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; 441 pJS.canvas.ctx.stroke(); 442 pJS.canvas.ctx.closePath(); 443 } 444 }; 445 446 pJS.fn.vendors.destroy = function(){ 447 cancelAnimationFrame(pJS.fn.requestAnimFrame); 448 canvas_el.remove(); 449 delete pJS; 450 }; 451 452 453 /* --------- LAUNCH ----------- */ 454 455 function launchParticles(){ 456 pJS.fn.canvasInit(); 457 pJS.fn.canvasSize(); 458 pJS.fn.canvasPaint(); 459 pJS.fn.particlesCreate(); 460 pJS.fn.particlesDraw(); 461 }; 462 463 464 function launchAnimation(){ 465 pJS.fn.particlesDraw(); 466 pJS.fn.requestAnimFrame = requestAnimFrame(launchAnimation); 467 }; 468 469 470 launchParticles(); 471 472 if(pJS.particles.anim.enable){ 473 launchAnimation(); 474 } 475 476 if(pJS.interactivity.enable){ 477 pJS.fn.vendors.interactivity.listeners(); 478 } 479 480 481 }; 482 483 /* --- VENDORS --- */ 484 485 window.requestAnimFrame = (function(){ 486 return window.requestAnimationFrame || 487 window.webkitRequestAnimationFrame || 488 window.mozRequestAnimationFrame || 489 window.oRequestAnimationFrame || 490 window.msRequestAnimationFrame || 491 function(callback){ 492 window.setTimeout(callback, 1000 / 60); 493 }; 494 })(); 495 496 window.cancelRequestAnimFrame = ( function() { 497 return window.cancelAnimationFrame || 498 window.webkitCancelRequestAnimationFrame || 499 window.mozCancelRequestAnimationFrame || 500 window.oCancelRequestAnimationFrame || 501 window.msCancelRequestAnimationFrame || 502 clearTimeout 503 } )(); 504 505 function hexToRgb(hex){ 506 // By Tim Down - http://stackoverflow.com/a/5624139/3493650 507 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 508 var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; 509 hex = hex.replace(shorthandRegex, function(m, r, g, b) { 510 return r + r + g + g + b + b; 511 }); 512 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 513 return result ? { 514 r: parseInt(result[1], 16), 515 g: parseInt(result[2], 16), 516 b: parseInt(result[3], 16) 517 } : null; 518 }; 519 520 521 /* --- LAUNCH --- */ 522 523 window.particlesJS = function(tag_id, params){ 524 525 /* no string id? so it's object params, and set the id with default id */ 526 if(typeof(tag_id) != 'string'){ 527 params = tag_id; 528 tag_id = 'particles-js'; 529 } 530 531 /* no id? set the id to default id */ 532 if(!tag_id){ 533 tag_id = 'particles-js'; 534 } 535 536 /* create canvas element */ 537 var canvas_el = document.createElement('canvas'); 538 539 /* set size canvas */ 540 canvas_el.style.width = "100%"; 541 canvas_el.style.height = "100%"; 542 543 /* append canvas */ 544 var canvas = document.getElementById(tag_id).appendChild(canvas_el); 545 546 /* launch particle.js */ 547 if(canvas != null){ 548 launchParticlesJS(tag_id, params); 549 } 550 551 };