API tools faq
paste
Advertisement
Guest User

code

a guest
Feb 6th, 2018
28
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.25 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. var pJS = function(tag_id, params){
  4.  
  5. var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');
  6.  
  7. /* particles.js variables with default values */
  8. this.pJS = {
  9. canvas: {
  10. el: canvas_el,
  11. w: canvas_el.offsetWidth,
  12. h: canvas_el.offsetHeight
  13. },
  14. particles: {
  15. number: {
  16. value: 400,
  17. density: {
  18. enable: true,
  19. value_area: 800
  20. }
  21. },
  22. color: {
  23. value: '#fff'
  24. },
  25. shape: {
  26. type: 'circle',
  27. stroke: {
  28. width: 0,
  29. color: '#ff0000'
  30. },
  31. polygon: {
  32. nb_sides: 5
  33. },
  34. image: {
  35. src: '',
  36. width: 100,
  37. height: 100
  38. }
  39. },
  40. opacity: {
  41. value: 1,
  42. random: false,
  43. anim: {
  44. enable: false,
  45. speed: 2,
  46. opacity_min: 0,
  47. sync: false
  48. }
  49. },
  50. size: {
  51. value: 20,
  52. random: false,
  53. anim: {
  54. enable: false,
  55. speed: 20,
  56. size_min: 0,
  57. sync: false
  58. }
  59. },
  60. line_linked: {
  61. enable: true,
  62. distance: 100,
  63. color: '#fff',
  64. opacity: 1,
  65. width: 1
  66. },
  67. move: {
  68. enable: true,
  69. speed: 2,
  70. direction: 'none',
  71. random: false,
  72. straight: false,
  73. out_mode: 'out',
  74. bounce: false,
  75. attract: {
  76. enable: false,
  77. rotateX: 3000,
  78. rotateY: 3000
  79. }
  80. },
  81. array: []
  82. },
  83. interactivity: {
  84. detect_on: 'canvas',
  85. events: {
  86. onhover: {
  87. enable: true,
  88. mode: 'grab'
  89. },
  90. onclick: {
  91. enable: true,
  92. mode: 'push'
  93. },
  94. resize: true
  95. },
  96. modes: {
  97. grab:{
  98. distance: 100,
  99. line_linked:{
  100. opacity: 1
  101. }
  102. },
  103. bubble:{
  104. distance: 200,
  105. size: 80,
  106. duration: 0.4
  107. },
  108. repulse:{
  109. distance: 200,
  110. duration: 0.4
  111. },
  112. push:{
  113. particles_nb: 4
  114. },
  115. remove:{
  116. particles_nb: 2
  117. }
  118. },
  119. mouse:{}
  120. },
  121. retina_detect: false,
  122. fn: {
  123. interact: {},
  124. modes: {},
  125. vendors:{}
  126. },
  127. tmp: {}
  128. };
  129.  
  130. var pJS = this.pJS;
  131.  
  132. /* params settings */
  133. if(params){
  134. Object.deepExtend(pJS, params);
  135. }
  136.  
  137. pJS.tmp.obj = {
  138. size_value: pJS.particles.size.value,
  139. size_anim_speed: pJS.particles.size.anim.speed,
  140. move_speed: pJS.particles.move.speed,
  141. line_linked_distance: pJS.particles.line_linked.distance,
  142. line_linked_width: pJS.particles.line_linked.width,
  143. mode_grab_distance: pJS.interactivity.modes.grab.distance,
  144. mode_bubble_distance: pJS.interactivity.modes.bubble.distance,
  145. mode_bubble_size: pJS.interactivity.modes.bubble.size,
  146. mode_repulse_distance: pJS.interactivity.modes.repulse.distance
  147. };
  148.  
  149.  
  150. pJS.fn.retinaInit = function(){
  151.  
  152. if(pJS.retina_detect && window.devicePixelRatio > 1){
  153. pJS.canvas.pxratio = window.devicePixelRatio;
  154. pJS.tmp.retina = true;
  155. }
  156. else{
  157. pJS.canvas.pxratio = 1;
  158. pJS.tmp.retina = false;
  159. }
  160.  
  161. pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
  162. pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
  163.  
  164. pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;
  165. pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;
  166. pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;
  167. pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;
  168. pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;
  169. pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;
  170. pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;
  171. pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;
  172. pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;
  173.  
  174. };
  175.  
  176.  
  177.  
  178. /* ---------- pJS functions - canvas ------------ */
  179.  
  180. pJS.fn.canvasInit = function(){
  181. pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
  182. };
  183.  
  184. pJS.fn.canvasSize = function(){
  185.  
  186. pJS.canvas.el.width = pJS.canvas.w;
  187. pJS.canvas.el.height = pJS.canvas.h;
  188.  
  189. if(pJS && pJS.interactivity.events.resize){
  190.  
  191. window.addEventListener('resize', function(){
  192.  
  193. pJS.canvas.w = pJS.canvas.el.offsetWidth;
  194. pJS.canvas.h = pJS.canvas.el.offsetHeight;
  195.  
  196. /* resize canvas */
  197. if(pJS.tmp.retina){
  198. pJS.canvas.w *= pJS.canvas.pxratio;
  199. pJS.canvas.h *= pJS.canvas.pxratio;
  200. }
  201.  
  202. pJS.canvas.el.width = pJS.canvas.w;
  203. pJS.canvas.el.height = pJS.canvas.h;
  204.  
  205. /* repaint canvas on anim disabled */
  206. if(!pJS.particles.move.enable){
  207. pJS.fn.particlesEmpty();
  208. pJS.fn.particlesCreate();
  209. pJS.fn.particlesDraw();
  210. pJS.fn.vendors.densityAutoParticles();
  211. }
  212.  
  213. /* density particles enabled */
  214. pJS.fn.vendors.densityAutoParticles();
  215.  
  216. });
  217.  
  218. }
  219.  
  220. };
  221.  
  222.  
  223. pJS.fn.canvasPaint = function(){
  224. pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
  225. };
  226.  
  227. pJS.fn.canvasClear = function(){
  228. pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
  229. };
  230.  
  231.  
  232. /* --------- pJS functions - particles ----------- */
  233.  
  234. pJS.fn.particle = function(color, opacity, position){
  235.  
  236. /* size */
  237. this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;
  238. if(pJS.particles.size.anim.enable){
  239. this.size_status = false;
  240. this.vs = pJS.particles.size.anim.speed / 100;
  241. if(!pJS.particles.size.anim.sync){
  242. this.vs = this.vs * Math.random();
  243. }
  244. }
  245.  
  246. /* position */
  247. this.x = position ? position.x : Math.random() * pJS.canvas.w;
  248. this.y = position ? position.y : Math.random() * pJS.canvas.h;
  249.  
  250. /* check position - into the canvas */
  251. if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius;
  252. else if(this.x < this.radius*2) this.x = this.x + this.radius;
  253. if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius;
  254. else if(this.y < this.radius*2) this.y = this.y + this.radius;
  255.  
  256. /* check position - avoid overlap */
  257. if(pJS.particles.move.bounce){
  258. pJS.fn.vendors.checkOverlap(this, position);
  259. }
  260.  
  261. /* color */
  262. this.color = {};
  263. if(typeof(color.value) == 'object'){
  264.  
  265. if(color.value instanceof Array){
  266. var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
  267. this.color.rgb = hexToRgb(color_selected);
  268. }else{
  269. if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){
  270. this.color.rgb = {
  271. r: color.value.r,
  272. g: color.value.g,
  273. b: color.value.b
  274. }
  275. }
  276. if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){
  277. this.color.hsl = {
  278. h: color.value.h,
  279. s: color.value.s,
  280. l: color.value.l
  281. }
  282. }
  283. }
  284.  
  285. }
  286. else if(color.value == 'random'){
  287. this.color.rgb = {
  288. r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
  289. g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
  290. b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
  291. }
  292. }
  293. else if(typeof(color.value) == 'string'){
  294. this.color = color;
  295. this.color.rgb = hexToRgb(this.color.value);
  296. }
  297.  
  298. /* opacity */
  299. this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;
  300. if(pJS.particles.opacity.anim.enable){
  301. this.opacity_status = false;
  302. this.vo = pJS.particles.opacity.anim.speed / 100;
  303. if(!pJS.particles.opacity.anim.sync){
  304. this.vo = this.vo * Math.random();
  305. }
  306. }
  307.  
  308. /* animation - velocity for speed */
  309. var velbase = {}
  310. switch(pJS.particles.move.direction){
  311. case 'top':
  312. velbase = { x:0, y:-1 };
  313. break;
  314. case 'top-right':
  315. velbase = { x:0.5, y:-0.5 };
  316. break;
  317. case 'right':
  318. velbase = { x:1, y:-0 };
  319. break;
  320. case 'bottom-right':
  321. velbase = { x:0.5, y:0.5 };
  322. break;
  323. case 'bottom':
  324. velbase = { x:0, y:1 };
  325. break;
  326. case 'bottom-left':
  327. velbase = { x:-0.5, y:1 };
  328. break;
  329. case 'left':
  330. velbase = { x:-1, y:0 };
  331. break;
  332. case 'top-left':
  333. velbase = { x:-0.5, y:-0.5 };
  334. break;
  335. default:
  336. velbase = { x:0, y:0 };
  337. break;
  338. }
  339.  
  340. if(pJS.particles.move.straight){
  341. this.vx = velbase.x;
  342. this.vy = velbase.y;
  343. if(pJS.particles.move.random){
  344. this.vx = this.vx * (Math.random());
  345. this.vy = this.vy * (Math.random());
  346. }
  347. }else{
  348. this.vx = velbase.x + Math.random()-0.5;
  349. this.vy = velbase.y + Math.random()-0.5;
  350. }
  351.  
  352. // var theta = 2.0 * Math.PI * Math.random();
  353. // this.vx = Math.cos(theta);
  354. // this.vy = Math.sin(theta);
  355.  
  356. this.vx_i = this.vx;
  357. this.vy_i = this.vy;
  358.  
  359.  
  360.  
  361. /* if shape is image */
  362.  
  363. var shape_type = pJS.particles.shape.type;
  364. if(typeof(shape_type) == 'object'){
  365. if(shape_type instanceof Array){
  366. var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];
  367. this.shape = shape_selected;
  368. }
  369. }else{
  370. this.shape = shape_type;
  371. }
  372.  
  373. if(this.shape == 'image'){
  374. var sh = pJS.particles.shape;
  375. this.img = {
  376. src: sh.image.src,
  377. ratio: sh.image.width / sh.image.height
  378. }
  379. if(!this.img.ratio) this.img.ratio = 1;
  380. if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){
  381. pJS.fn.vendors.createSvgImg(this);
  382. if(pJS.tmp.pushing){
  383. this.img.loaded = false;
  384. }
  385. }
  386. }
  387.  
  388.  
  389.  
  390. };
  391.  
  392.  
  393. pJS.fn.particle.prototype.draw = function() {
  394.  
  395. var p = this;
  396.  
  397. if(p.radius_bubble != undefined){
  398. var radius = p.radius_bubble;
  399. }else{
  400. var radius = p.radius;
  401. }
  402.  
  403. if(p.opacity_bubble != undefined){
  404. var opacity = p.opacity_bubble;
  405. }else{
  406. var opacity = p.opacity;
  407. }
  408.  
  409. if(p.color.rgb){
  410. var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')';
  411. }else{
  412. var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')';
  413. }
  414.  
  415. pJS.canvas.ctx.fillStyle = color_value;
  416. pJS.canvas.ctx.beginPath();
  417.  
  418. switch(p.shape){
  419.  
  420. case 'circle':
  421. pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
  422. break;
  423.  
  424. case 'edge':
  425. pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2);
  426. break;
  427.  
  428. case 'triangle':
  429. pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2);
  430. break;
  431.  
  432. case 'polygon':
  433. pJS.fn.vendors.drawShape(
  434. pJS.canvas.ctx,
  435. p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX
  436. p.y - radius / (2.66/3.5), // startY
  437. radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
  438. pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
  439. 1 // sideCountDenominator
  440. );
  441. break;
  442.  
  443. case 'star':
  444. pJS.fn.vendors.drawShape(
  445. pJS.canvas.ctx,
  446. p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX
  447. p.y - radius / (2*2.66/3.5), // startY
  448. radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength
  449. pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
  450. 2 // sideCountDenominator
  451. );
  452. break;
  453.  
  454. case 'image':
  455.  
  456. function draw(){
  457. pJS.canvas.ctx.drawImage(
  458. img_obj,
  459. p.x-radius,
  460. p.y-radius,
  461. radius*2,
  462. radius*2 / p.img.ratio
  463. );
  464. }
  465.  
  466. if(pJS.tmp.img_type == 'svg'){
  467. var img_obj = p.img.obj;
  468. }else{
  469. var img_obj = pJS.tmp.img_obj;
  470. }
  471.  
  472. if(img_obj){
  473. draw();
  474. }
  475.  
  476. break;
  477.  
  478. }
  479.  
  480. pJS.canvas.ctx.closePath();
  481.  
  482. if(pJS.particles.shape.stroke.width > 0){
  483. pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;
  484. pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;
  485. pJS.canvas.ctx.stroke();
  486. }
  487.  
  488. pJS.canvas.ctx.fill();
  489.  
  490. };
  491.  
  492.  
  493. pJS.fn.particlesCreate = function(){
  494. for(var i = 0; i < pJS.particles.number.value; i++) {
  495. pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));
  496. }
  497. };
  498.  
  499. pJS.fn.particlesUpdate = function(){
  500.  
  501. for(var i = 0; i < pJS.particles.array.length; i++){
  502.  
  503. /* the particle */
  504. var p = pJS.particles.array[i];
  505.  
  506. // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;
  507. // var f = -BANG_SIZE / d;
  508. // if ( d < BANG_SIZE ) {
  509. // var t = Math.atan2( dy, dx );
  510. // p.vx = f * Math.cos(t);
  511. // p.vy = f * Math.sin(t);
  512. // }
  513.  
  514. /* move the particle */
  515. if(pJS.particles.move.enable){
  516. var ms = pJS.particles.move.speed/2;
  517. p.x += p.vx * ms;
  518. p.y += p.vy * ms;
  519. }
  520.  
  521. /* change opacity status */
  522. if(pJS.particles.opacity.anim.enable) {
  523. if(p.opacity_status == true) {
  524. if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;
  525. p.opacity += p.vo;
  526. }else {
  527. if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;
  528. p.opacity -= p.vo;
  529. }
  530. if(p.opacity < 0) p.opacity = 0;
  531. }
  532.  
  533. /* change size */
  534. if(pJS.particles.size.anim.enable){
  535. if(p.size_status == true){
  536. if(p.radius >= pJS.particles.size.value) p.size_status = false;
  537. p.radius += p.vs;
  538. }else{
  539. if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;
  540. p.radius -= p.vs;
  541. }
  542. if(p.radius < 0) p.radius = 0;
  543. }
  544.  
  545. /* change particle position if it is out of canvas */
  546. if(pJS.particles.move.out_mode == 'bounce'){
  547. var new_pos = {
  548. x_left: p.radius,
  549. x_right: pJS.canvas.w,
  550. y_top: p.radius,
  551. y_bottom: pJS.canvas.h
  552. }
  553. }else{
  554. var new_pos = {
  555. x_left: -p.radius,
  556. x_right: pJS.canvas.w + p.radius,
  557. y_top: -p.radius,
  558. y_bottom: pJS.canvas.h + p.radius
  559. }
  560. }
  561.  
  562. if(p.x - p.radius > pJS.canvas.w){
  563. p.x = new_pos.x_left;
  564. p.y = Math.random() * pJS.canvas.h;
  565. }
  566. else if(p.x + p.radius < 0){
  567. p.x = new_pos.x_right;
  568. p.y = Math.random() * pJS.canvas.h;
  569. }
  570. if(p.y - p.radius > pJS.canvas.h){
  571. p.y = new_pos.y_top;
  572. p.x = Math.random() * pJS.canvas.w;
  573. }
  574. else if(p.y + p.radius < 0){
  575. p.y = new_pos.y_bottom;
  576. p.x = Math.random() * pJS.canvas.w;
  577. }
  578.  
  579. /* out of canvas modes */
  580. switch(pJS.particles.move.out_mode){
  581. case 'bounce':
  582. if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
  583. else if (p.x - p.radius < 0) p.vx = -p.vx;
  584. if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
  585. else if (p.y - p.radius < 0) p.vy = -p.vy;
  586. break;
  587. }
  588.  
  589. /* events */
  590. if(isInArray('grab', pJS.interactivity.events.onhover.mode)){
  591. pJS.fn.modes.grabParticle(p);
  592. }
  593.  
  594. if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){
  595. pJS.fn.modes.bubbleParticle(p);
  596. }
  597.  
  598. if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){
  599. pJS.fn.modes.repulseParticle(p);
  600. }
  601.  
  602. /* interaction auto between particles */
  603. if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){
  604. for(var j = i + 1; j < pJS.particles.array.length; j++){
  605. var p2 = pJS.particles.array[j];
  606.  
  607. /* link particles */
  608. if(pJS.particles.line_linked.enable){
  609. pJS.fn.interact.linkParticles(p,p2);
  610. }
  611.  
  612. /* attract particles */
  613. if(pJS.particles.move.attract.enable){
  614. pJS.fn.interact.attractParticles(p,p2);
  615. }
  616.  
  617. /* bounce particles */
  618. if(pJS.particles.move.bounce){
  619. pJS.fn.interact.bounceParticles(p,p2);
  620. }
  621.  
  622. }
  623. }
  624.  
  625.  
  626. }
  627.  
  628. };
  629.  
  630. pJS.fn.particlesDraw = function(){
  631.  
  632. /* clear canvas */
  633. pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
  634.  
  635. /* update each particles param */
  636. pJS.fn.particlesUpdate();
  637.  
  638. /* draw each particle */
  639. for(var i = 0; i < pJS.particles.array.length; i++){
  640. var p = pJS.particles.array[i];
  641. p.draw();
  642. }
  643.  
  644. };
  645.  
  646. pJS.fn.particlesEmpty = function(){
  647. pJS.particles.array = [];
  648. };
  649.  
  650. pJS.fn.particlesRefresh = function(){
  651.  
  652. /* init all */
  653. cancelRequestAnimFrame(pJS.fn.checkAnimFrame);
  654. cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
  655. pJS.tmp.source_svg = undefined;
  656. pJS.tmp.img_obj = undefined;
  657. pJS.tmp.count_svg = 0;
  658. pJS.fn.particlesEmpty();
  659. pJS.fn.canvasClear();
  660.  
  661. /* restart */
  662. pJS.fn.vendors.start();
  663.  
  664. };
  665.  
  666.  
  667. /* ---------- pJS functions - particles interaction ------------ */
  668.  
  669. pJS.fn.interact.linkParticles = function(p1, p2){
  670.  
  671. var dx = p1.x - p2.x,
  672. dy = p1.y - p2.y,
  673. dist = Math.sqrt(dx*dx + dy*dy);
  674.  
  675. /* draw a line between p1 and p2 if the distance between them is under the config distance */
  676. if(dist <= pJS.particles.line_linked.distance){
  677.  
  678. var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;
  679.  
  680. if(opacity_line > 0){
  681.  
  682. /* style */
  683. var color_line = pJS.particles.line_linked.color_rgb_line;
  684. pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
  685. pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
  686. //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
  687.  
  688. /* path */
  689. pJS.canvas.ctx.beginPath();
  690. pJS.canvas.ctx.moveTo(p1.x, p1.y);
  691. pJS.canvas.ctx.lineTo(p2.x, p2.y);
  692. pJS.canvas.ctx.stroke();
  693. pJS.canvas.ctx.closePath();
  694.  
  695. }
  696.  
  697. }
  698.  
  699. };
  700.  
  701.  
  702. pJS.fn.interact.attractParticles = function(p1, p2){
  703.  
  704. /* condensed particles */
  705. var dx = p1.x - p2.x,
  706. dy = p1.y - p2.y,
  707. dist = Math.sqrt(dx*dx + dy*dy);
  708.  
  709. if(dist <= pJS.particles.line_linked.distance){
  710.  
  711. var ax = dx/(pJS.particles.move.attract.rotateX*1000),
  712. ay = dy/(pJS.particles.move.attract.rotateY*1000);
  713.  
  714. p1.vx -= ax;
  715. p1.vy -= ay;
  716.  
  717. p2.vx += ax;
  718. p2.vy += ay;
  719.  
  720. }
  721.  
  722.  
  723. }
  724.  
  725.  
  726. pJS.fn.interact.bounceParticles = function(p1, p2){
  727.  
  728. var dx = p1.x - p2.x,
  729. dy = p1.y - p2.y,
  730. dist = Math.sqrt(dx*dx + dy*dy),
  731. dist_p = p1.radius+p2.radius;
  732.  
  733. if(dist <= dist_p){
  734. p1.vx = -p1.vx;
  735. p1.vy = -p1.vy;
  736.  
  737. p2.vx = -p2.vx;
  738. p2.vy = -p2.vy;
  739. }
  740.  
  741. }
  742.  
  743.  
  744. /* ---------- pJS functions - modes events ------------ */
  745.  
  746. pJS.fn.modes.pushParticles = function(nb, pos){
  747.  
  748. pJS.tmp.pushing = true;
  749.  
  750. for(var i = 0; i < nb; i++){
  751. pJS.particles.array.push(
  752. new pJS.fn.particle(
  753. pJS.particles.color,
  754. pJS.particles.opacity.value,
  755. {
  756. 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
  757. 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
  758. }
  759. )
  760. )
  761. if(i == nb-1){
  762. if(!pJS.particles.move.enable){
  763. pJS.fn.particlesDraw();
  764. }
  765. pJS.tmp.pushing = false;
  766. }
  767. }
  768.  
  769. };
  770.  
  771.  
  772. pJS.fn.modes.removeParticles = function(nb){
  773.  
  774. pJS.particles.array.splice(0, nb);
  775. if(!pJS.particles.move.enable){
  776. pJS.fn.particlesDraw();
  777. }
  778.  
  779. };
  780.  
  781.  
  782. pJS.fn.modes.bubbleParticle = function(p){
  783.  
  784. /* on hover event */
  785. if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){
  786.  
  787. var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
  788. dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
  789. dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
  790. ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
  791.  
  792. function init(){
  793. p.opacity_bubble = p.opacity;
  794. p.radius_bubble = p.radius;
  795. }
  796.  
  797. /* mousemove - check ratio */
  798. if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
  799.  
  800. if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){
  801.  
  802. /* size */
  803. if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){
  804.  
  805. if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){
  806. var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio);
  807. if(size >= 0){
  808. p.radius_bubble = size;
  809. }
  810. }else{
  811. var dif = p.radius - pJS.interactivity.modes.bubble.size,
  812. size = p.radius - (dif*ratio);
  813. if(size > 0){
  814. p.radius_bubble = size;
  815. }else{
  816. p.radius_bubble = 0;
  817. }
  818. }
  819.  
  820. }
  821.  
  822. /* opacity */
  823. if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){
  824.  
  825. if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){
  826. var opacity = pJS.interactivity.modes.bubble.opacity*ratio;
  827. if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){
  828. p.opacity_bubble = opacity;
  829. }
  830. }else{
  831. var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio;
  832. if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){
  833. p.opacity_bubble = opacity;
  834. }
  835. }
  836.  
  837. }
  838.  
  839. }
  840.  
  841. }else{
  842. init();
  843. }
  844.  
  845.  
  846. /* mouseleave */
  847. if(pJS.interactivity.status == 'mouseleave'){
  848. init();
  849. }
  850.  
  851. }
  852.  
  853. /* on click event */
  854. else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){
  855.  
  856.  
  857. if(pJS.tmp.bubble_clicking){
  858. var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,
  859. dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,
  860. dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse),
  861. time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000;
  862.  
  863. if(time_spent > pJS.interactivity.modes.bubble.duration){
  864. pJS.tmp.bubble_duration_end = true;
  865. }
  866.  
  867. if(time_spent > pJS.interactivity.modes.bubble.duration*2){
  868. pJS.tmp.bubble_clicking = false;
  869. pJS.tmp.bubble_duration_end = false;
  870. }
  871. }
  872.  
  873.  
  874. function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){
  875.  
  876. if(bubble_param != particles_param){
  877.  
  878. if(!pJS.tmp.bubble_duration_end){
  879. if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
  880. if(p_obj_bubble != undefined) var obj = p_obj_bubble;
  881. else var obj = p_obj;
  882. if(obj != bubble_param){
  883. var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);
  884. if(id == 'size') p.radius_bubble = value;
  885. if(id == 'opacity') p.opacity_bubble = value;
  886. }
  887. }else{
  888. if(id == 'size') p.radius_bubble = undefined;
  889. if(id == 'opacity') p.opacity_bubble = undefined;
  890. }
  891. }else{
  892. if(p_obj_bubble != undefined){
  893. var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),
  894. dif = bubble_param - value_tmp;
  895. value = bubble_param + dif;
  896. if(id == 'size') p.radius_bubble = value;
  897. if(id == 'opacity') p.opacity_bubble = value;
  898. }
  899. }
  900.  
  901. }
  902.  
  903. }
  904.  
  905. if(pJS.tmp.bubble_clicking){
  906. /* size */
  907. process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');
  908. /* opacity */
  909. process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');
  910. }
  911.  
  912. }
  913.  
  914. };
  915.  
  916.  
  917. pJS.fn.modes.repulseParticle = function(p){
  918.  
  919. if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {
  920.  
  921. var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
  922. dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
  923. dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
  924.  
  925. var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse},
  926. repulseRadius = pJS.interactivity.modes.repulse.distance,
  927. velocity = 100,
  928. repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);
  929.  
  930. var pos = {
  931. x: p.x + normVec.x * repulseFactor,
  932. y: p.y + normVec.y * repulseFactor
  933. }
  934.  
  935. if(pJS.particles.move.out_mode == 'bounce'){
  936. if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;
  937. if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;
  938. }else{
  939. p.x = pos.x;
  940. p.y = pos.y;
  941. }
  942.  
  943. }
  944.  
  945.  
  946. else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
  947.  
  948. if(!pJS.tmp.repulse_finish){
  949. pJS.tmp.repulse_count++;
  950. if(pJS.tmp.repulse_count == pJS.particles.array.length){
  951. pJS.tmp.repulse_finish = true;
  952. }
  953. }
  954.  
  955. if(pJS.tmp.repulse_clicking){
  956.  
  957. var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3);
  958.  
  959. var dx = pJS.interactivity.mouse.click_pos_x - p.x,
  960. dy = pJS.interactivity.mouse.click_pos_y - p.y,
  961. d = dx*dx + dy*dy;
  962.  
  963. var force = -repulseRadius / d * 1;
  964.  
  965. function process(){
  966.  
  967. var f = Math.atan2(dy,dx);
  968. p.vx = force * Math.cos(f);
  969. p.vy = force * Math.sin(f);
  970.  
  971. if(pJS.particles.move.out_mode == 'bounce'){
  972. var pos = {
  973. x: p.x + p.vx,
  974. y: p.y + p.vy
  975. }
  976. if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
  977. else if (pos.x - p.radius < 0) p.vx = -p.vx;
  978. if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
  979. else if (pos.y - p.radius < 0) p.vy = -p.vy;
  980. }
  981.  
  982. }
  983.  
  984. // default
  985. if(d <= repulseRadius){
  986. process();
  987. }
  988.  
  989. // bang - slow motion mode
  990. // if(!pJS.tmp.repulse_finish){
  991. // if(d <= repulseRadius){
  992. // process();
  993. // }
  994. // }else{
  995. // process();
  996. // }
  997.  
  998.  
  999. }else{
  1000.  
  1001. if(pJS.tmp.repulse_clicking == false){
  1002.  
  1003. p.vx = p.vx_i;
  1004. p.vy = p.vy_i;
  1005.  
  1006. }
  1007.  
  1008. }
  1009.  
  1010. }
  1011.  
  1012. }
  1013.  
  1014.  
  1015. pJS.fn.modes.grabParticle = function(p){
  1016.  
  1017. if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){
  1018.  
  1019. var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
  1020. dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
  1021. dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
  1022.  
  1023. /* draw a line between the cursor and the particle if the distance between them is under the config distance */
  1024. if(dist_mouse <= pJS.interactivity.modes.grab.distance){
  1025.  
  1026. var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;
  1027.  
  1028. if(opacity_line > 0){
  1029.  
  1030. /* style */
  1031. var color_line = pJS.particles.line_linked.color_rgb_line;
  1032. pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
  1033. pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
  1034. //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
  1035.  
  1036. /* path */
  1037. pJS.canvas.ctx.beginPath();
  1038. pJS.canvas.ctx.moveTo(p.x, p.y);
  1039. pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
  1040. pJS.canvas.ctx.stroke();
  1041. pJS.canvas.ctx.closePath();
  1042.  
  1043. }
  1044.  
  1045. }
  1046.  
  1047. }
  1048.  
  1049. };
  1050.  
  1051.  
  1052.  
  1053. /* ---------- pJS functions - vendors ------------ */
  1054.  
  1055. pJS.fn.vendors.eventsListeners = function(){
  1056.  
  1057. /* events target element */
  1058. if(pJS.interactivity.detect_on == 'window'){
  1059. pJS.interactivity.el = window;
  1060. }else{
  1061. pJS.interactivity.el = pJS.canvas.el;
  1062. }
  1063.  
  1064.  
  1065. /* detect mouse pos - on hover / click event */
  1066. if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){
  1067.  
  1068. /* el on mousemove */
  1069. pJS.interactivity.el.addEventListener('mousemove', function(e){
  1070.  
  1071. if(pJS.interactivity.el == window){
  1072. var pos_x = e.clientX,
  1073. pos_y = e.clientY;
  1074. }
  1075. else{
  1076. var pos_x = e.offsetX || e.clientX,
  1077. pos_y = e.offsetY || e.clientY;
  1078. }
  1079.  
  1080. pJS.interactivity.mouse.pos_x = pos_x;
  1081. pJS.interactivity.mouse.pos_y = pos_y;
  1082.  
  1083. if(pJS.tmp.retina){
  1084. pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
  1085. pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
  1086. }
  1087.  
  1088. pJS.interactivity.status = 'mousemove';
  1089.  
  1090. });
  1091.  
  1092. /* el on onmouseleave */
  1093. pJS.interactivity.el.addEventListener('mouseleave', function(e){
  1094.  
  1095. pJS.interactivity.mouse.pos_x = null;
  1096. pJS.interactivity.mouse.pos_y = null;
  1097. pJS.interactivity.status = 'mouseleave';
  1098.  
  1099. });
  1100.  
  1101. }
  1102.  
  1103. /* on click event */
  1104. if(pJS.interactivity.events.onclick.enable){
  1105.  
  1106. pJS.interactivity.el.addEventListener('click', function(){
  1107.  
  1108. pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;
  1109. pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;
  1110. pJS.interactivity.mouse.click_time = new Date().getTime();
  1111.  
  1112. if(pJS.interactivity.events.onclick.enable){
  1113.  
  1114. switch(pJS.interactivity.events.onclick.mode){
  1115.  
  1116. case 'push':
  1117. if(pJS.particles.move.enable){
  1118. pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
  1119. }else{
  1120. if(pJS.interactivity.modes.push.particles_nb == 1){
  1121. pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
  1122. }
  1123. else if(pJS.interactivity.modes.push.particles_nb > 1){
  1124. pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);
  1125. }
  1126. }
  1127. break;
  1128.  
  1129. case 'remove':
  1130. pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);
  1131. break;
  1132.  
  1133. case 'bubble':
  1134. pJS.tmp.bubble_clicking = true;
  1135. break;
  1136.  
  1137. case 'repulse':
  1138. pJS.tmp.repulse_clicking = true;
  1139. pJS.tmp.repulse_count = 0;
  1140. pJS.tmp.repulse_finish = false;
  1141. setTimeout(function(){
  1142. pJS.tmp.repulse_clicking = false;
  1143. }, pJS.interactivity.modes.repulse.duration*1000)
  1144. break;
  1145.  
  1146. }
  1147.  
  1148. }
  1149.  
  1150. });
  1151.  
  1152. }
  1153.  
  1154.  
  1155. };
  1156.  
  1157. pJS.fn.vendors.densityAutoParticles = function(){
  1158.  
  1159. if(pJS.particles.number.density.enable){
  1160.  
  1161. /* calc area */
  1162. var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;
  1163. if(pJS.tmp.retina){
  1164. area = area/(pJS.canvas.pxratio*2);
  1165. }
  1166.  
  1167. /* calc number of particles based on density area */
  1168. var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;
  1169.  
  1170. /* add or remove X particles */
  1171. var missing_particles = pJS.particles.array.length - nb_particles;
  1172. if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));
  1173. else pJS.fn.modes.removeParticles(missing_particles);
  1174.  
  1175. }
  1176.  
  1177. };
  1178.  
  1179.  
  1180. pJS.fn.vendors.checkOverlap = function(p1, position){
  1181. for(var i = 0; i < pJS.particles.array.length; i++){
  1182. var p2 = pJS.particles.array[i];
  1183.  
  1184. var dx = p1.x - p2.x,
  1185. dy = p1.y - p2.y,
  1186. dist = Math.sqrt(dx*dx + dy*dy);
  1187.  
  1188. if(dist <= p1.radius + p2.radius){
  1189. p1.x = position ? position.x : Math.random() * pJS.canvas.w;
  1190. p1.y = position ? position.y : Math.random() * pJS.canvas.h;
  1191. pJS.fn.vendors.checkOverlap(p1);
  1192. }
  1193. }
  1194. };
  1195.  
  1196.  
  1197. pJS.fn.vendors.createSvgImg = function(p){
  1198.  
  1199. /* set color to svg element */
  1200. var svgXml = pJS.tmp.source_svg,
  1201. rgbHex = /#([0-9A-F]{3,6})/gi,
  1202. coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {
  1203. if(p.color.rgb){
  1204. var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')';
  1205. }else{
  1206. var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')';
  1207. }
  1208. return color_value;
  1209. });
  1210.  
  1211. /* prepare to create img with colored svg */
  1212. var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),
  1213. DOMURL = window.URL || window.webkitURL || window,
  1214. url = DOMURL.createObjectURL(svg);
  1215.  
  1216. /* create particle img obj */
  1217. var img = new Image();
  1218. img.addEventListener('load', function(){
  1219. p.img.obj = img;
  1220. p.img.loaded = true;
  1221. DOMURL.revokeObjectURL(url);
  1222. pJS.tmp.count_svg++;
  1223. });
  1224. img.src = url;
  1225.  
  1226. };
  1227.  
  1228.  
  1229. pJS.fn.vendors.destroypJS = function(){
  1230. cancelAnimationFrame(pJS.fn.drawAnimFrame);
  1231. canvas_el.remove();
  1232. pJSDom = null;
  1233. };
  1234.  
  1235.  
  1236. pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){
  1237.  
  1238. // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/
  1239. var sideCount = sideCountNumerator * sideCountDenominator;
  1240. var decimalSides = sideCountNumerator / sideCountDenominator;
  1241. var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;
  1242. var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians
  1243. c.save();
  1244. c.beginPath();
  1245. c.translate(startX, startY);
  1246. c.moveTo(0,0);
  1247. for (var i = 0; i < sideCount; i++) {
  1248. c.lineTo(sideLength,0);
  1249. c.translate(sideLength,0);
  1250. c.rotate(interiorAngle);
  1251. }
  1252. //c.stroke();
  1253. c.fill();
  1254. c.restore();
  1255.  
  1256. };
  1257.  
  1258. pJS.fn.vendors.exportImg = function(){
  1259. window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');
  1260. };
  1261.  
  1262.  
  1263. pJS.fn.vendors.loadImg = function(type){
  1264.  
  1265. pJS.tmp.img_error = undefined;
  1266.  
  1267. if(pJS.particles.shape.image.src != ''){
  1268.  
  1269. if(type == 'svg'){
  1270.  
  1271. var xhr = new XMLHttpRequest();
  1272. xhr.open('GET', pJS.particles.shape.image.src);
  1273. xhr.onreadystatechange = function (data) {
  1274. if(xhr.readyState == 4){
  1275. if(xhr.status == 200){
  1276. pJS.tmp.source_svg = data.currentTarget.response;
  1277. pJS.fn.vendors.checkBeforeDraw();
  1278. }else{
  1279. console.log('Error pJS - Image not found');
  1280. pJS.tmp.img_error = true;
  1281. }
  1282. }
  1283. }
  1284. xhr.send();
  1285.  
  1286. }else{
  1287.  
  1288. var img = new Image();
  1289. img.addEventListener('load', function(){
  1290. pJS.tmp.img_obj = img;
  1291. pJS.fn.vendors.checkBeforeDraw();
  1292. });
  1293. img.src = pJS.particles.shape.image.src;
  1294.  
  1295. }
  1296.  
  1297. }else{
  1298. console.log('Error pJS - No image.src');
  1299. pJS.tmp.img_error = true;
  1300. }
  1301.  
  1302. };
  1303.  
  1304.  
  1305. pJS.fn.vendors.draw = function(){
  1306.  
  1307. if(pJS.particles.shape.type == 'image'){
  1308.  
  1309. if(pJS.tmp.img_type == 'svg'){
  1310.  
  1311. if(pJS.tmp.count_svg >= pJS.particles.number.value){
  1312. pJS.fn.particlesDraw();
  1313. if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
  1314. else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
  1315. }else{
  1316. //console.log('still loading...');
  1317. if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
  1318. }
  1319.  
  1320. }else{
  1321.  
  1322. if(pJS.tmp.img_obj != undefined){
  1323. pJS.fn.particlesDraw();
  1324. if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
  1325. else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
  1326. }else{
  1327. if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
  1328. }
  1329.  
  1330. }
  1331.  
  1332. }else{
  1333. pJS.fn.particlesDraw();
  1334. if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
  1335. else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
  1336. }
  1337.  
  1338. };
  1339.  
  1340.  
  1341. pJS.fn.vendors.checkBeforeDraw = function(){
  1342.  
  1343. // if shape is image
  1344. if(pJS.particles.shape.type == 'image'){
  1345.  
  1346. if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){
  1347. pJS.tmp.checkAnimFrame = requestAnimFrame(check);
  1348. }else{
  1349. //console.log('images loaded! cancel check');
  1350. cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);
  1351. if(!pJS.tmp.img_error){
  1352. pJS.fn.vendors.init();
  1353. pJS.fn.vendors.draw();
  1354. }
  1355.  
  1356. }
  1357.  
  1358. }else{
  1359. pJS.fn.vendors.init();
  1360. pJS.fn.vendors.draw();
  1361. }
  1362.  
  1363. };
  1364.  
  1365.  
  1366. pJS.fn.vendors.init = function(){
  1367.  
  1368. /* init canvas + particles */
  1369. pJS.fn.retinaInit();
  1370. pJS.fn.canvasInit();
  1371. pJS.fn.canvasSize();
  1372. pJS.fn.canvasPaint();
  1373. pJS.fn.particlesCreate();
  1374. pJS.fn.vendors.densityAutoParticles();
  1375.  
  1376. /* particles.line_linked - convert hex colors to rgb */
  1377. pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
  1378.  
  1379. };
  1380.  
  1381.  
  1382. pJS.fn.vendors.start = function(){
  1383.  
  1384. if(isInArray('image', pJS.particles.shape.type)){
  1385. pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);
  1386. pJS.fn.vendors.loadImg(pJS.tmp.img_type);
  1387. }else{
  1388. pJS.fn.vendors.checkBeforeDraw();
  1389. }
  1390.  
  1391. };
  1392.  
  1393.  
  1394.  
  1395.  
  1396. /* ---------- pJS - start ------------ */
  1397.  
  1398.  
  1399. pJS.fn.vendors.eventsListeners();
  1400.  
  1401. pJS.fn.vendors.start();
  1402.  
  1403.  
  1404.  
  1405. };
  1406.  
  1407. /* ---------- global functions - vendors ------------ */
  1408.  
  1409. Object.deepExtend = function(destination, source) {
  1410. for (var property in source) {
  1411. if (source[property] && source[property].constructor &&
  1412. source[property].constructor === Object) {
  1413. destination[property] = destination[property] || {};
  1414. arguments.callee(destination[property], source[property]);
  1415. } else {
  1416. destination[property] = source[property];
  1417. }
  1418. }
  1419. return destination;
  1420. };
  1421.  
  1422. window.requestAnimFrame = (function(){
  1423. return window.requestAnimationFrame ||
  1424. window.webkitRequestAnimationFrame ||
  1425. window.mozRequestAnimationFrame ||
  1426. window.oRequestAnimationFrame ||
  1427. window.msRequestAnimationFrame ||
  1428. function(callback){
  1429. window.setTimeout(callback, 1000 / 60);
  1430.  
  1431. };
  1432. })();
  1433.  
  1434. window.cancelRequestAnimFrame = ( function() {
  1435. return window.cancelAnimationFrame ||
  1436. window.webkitCancelRequestAnimationFrame ||
  1437. window.mozCancelRequestAnimationFrame ||
  1438. window.oCancelRequestAnimationFrame ||
  1439. window.msCancelRequestAnimationFrame ||
  1440. clearTimeout
  1441. } )();
  1442.  
  1443. function hexToRgb(hex){
  1444. // By Tim Down - http://stackoverflow.com/a/5624139/3493650
  1445. // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  1446. var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  1447. hex = hex.replace(shorthandRegex, function(m, r, g, b) {
  1448. return r + r + g + g + b + b;
  1449. });
  1450. var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  1451. return result ? {
  1452. r: parseInt(result[1], 16),
  1453. g: parseInt(result[2], 16),
  1454. b: parseInt(result[3], 16)
  1455. } : null;
  1456. };
  1457.  
  1458. function clamp(number, min, max) {
  1459. return Math.min(Math.max(number, min), max);
  1460. };
  1461.  
  1462. function isInArray(value, array) {
  1463. return array.indexOf(value) > -1;
  1464. }
  1465.  
  1466.  
  1467. /* ---------- particles.js functions - start ------------ */
  1468.  
  1469. window.pJSDom = [];
  1470.  
  1471. window.particlesJS = function(tag_id, params){
  1472.  
  1473. //console.log(params);
  1474.  
  1475. /* no string id? so it's object params, and set the id with default id */
  1476. if(typeof(tag_id) != 'string'){
  1477. params = tag_id;
  1478. tag_id = 'particles-js';
  1479. }
  1480.  
  1481. /* no id? set the id to default id */
  1482. if(!tag_id){
  1483. tag_id = 'particles-js';
  1484. }
  1485.  
  1486. /* pJS elements */
  1487. var pJS_tag = document.getElementById(tag_id),
  1488. pJS_canvas_class = 'particles-js-canvas-el',
  1489. exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
  1490.  
  1491. /* remove canvas if exists into the pJS target tag */
  1492. if(exist_canvas.length){
  1493. while(exist_canvas.length > 0){
  1494. pJS_tag.removeChild(exist_canvas[0]);
  1495. }
  1496. }
  1497.  
  1498. /* create canvas element */
  1499. var canvas_el = document.createElement('canvas');
  1500. canvas_el.className = pJS_canvas_class;
  1501.  
  1502. /* set size canvas */
  1503. canvas_el.style.width = "100%";
  1504. canvas_el.style.height = "100%";
  1505.  
  1506. /* append canvas */
  1507. var canvas = document.getElementById(tag_id).appendChild(canvas_el);
  1508.  
  1509. /* launch particle.js */
  1510. if(canvas != null){
  1511. pJSDom.push(new pJS(tag_id, params));
  1512. }
  1513.  
  1514. };
  1515.  
  1516. window.particlesJS.load = function(tag_id, path_config_json, callback){
  1517.  
  1518. var to;
  1519. function timeOut() {
  1520. history.back();
  1521. }
  1522. to = setTimeout("timeOut()", 1000);
  1523. /* load json config */
  1524. var xhr = new XMLHttpRequest();
  1525. xhr.open('GET', path_config_json);
  1526. xhr.onreadystatechange = function (data) {
  1527. if(xhr.readyState == 4){
  1528. if(xhr.status == 200){
  1529. var params = JSON.parse(data.currentTarget.response);
  1530. window.particlesJS(tag_id, params);
  1531. if(callback) callback();
  1532. }else{
  1533. console.log('Error pJS - XMLHttpRequest status: '+xhr.status);
  1534. console.log('Error pJS - File config not found');
  1535. }
  1536. }
  1537. };
  1538. xhr.send();
  1539.  
  1540. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!