Advertisement
Guest User

src for a fagget

a guest
Feb 22nd, 2017
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.22 KB | None | 0 0
  1. /*!
  2. * Particleground
  3. *
  4. * @author Jonathan Nicol - @mrjnicol
  5. * @version 1.1.0
  6. * @description Creates a canvas based particle system background
  7. *
  8. * Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
  9. */
  10.  
  11. ;(function(window, document) {
  12. "use strict";
  13. var pluginName = 'particleground';
  14.  
  15. // http://youmightnotneedjquery.com/#deep_extend
  16. function extend(out) {
  17. out = out || {};
  18. for (var i = 1; i < arguments.length; i++) {
  19. var obj = arguments[i];
  20. if (!obj) continue;
  21. for (var key in obj) {
  22. if (obj.hasOwnProperty(key)) {
  23. if (typeof obj[key] === 'object')
  24. deepExtend(out[key], obj[key]);
  25. else
  26. out[key] = obj[key];
  27. }
  28. }
  29. }
  30. return out;
  31. };
  32.  
  33. var $ = window.jQuery;
  34.  
  35. function Plugin(element, options) {
  36. var canvasSupport = !!document.createElement('canvas').getContext;
  37. var canvas;
  38. var ctx;
  39. var particles = [];
  40. var raf;
  41. var mouseX = 0;
  42. var mouseY = 0;
  43. var winW;
  44. var winH;
  45. var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
  46. var orientationSupport = !!window.DeviceOrientationEvent;
  47. var tiltX = 0;
  48. var pointerX;
  49. var pointerY;
  50. var tiltY = 0;
  51. var paused = false;
  52.  
  53. options = extend({}, window[pluginName].defaults, options);
  54.  
  55. /**
  56. * Init
  57. */
  58. function init() {
  59. if (!canvasSupport) { return; }
  60.  
  61. //Create canvas
  62. canvas = document.createElement('canvas');
  63. canvas.className = 'pg-canvas';
  64. canvas.style.display = 'block';
  65. element.insertBefore(canvas, element.firstChild);
  66. ctx = canvas.getContext('2d');
  67. styleCanvas();
  68.  
  69. // Create particles
  70. var numParticles = Math.round((canvas.width * canvas.height) / options.density);
  71. for (var i = 0; i < numParticles; i++) {
  72. var p = new Particle();
  73. p.setStackPos(i);
  74. particles.push(p);
  75. };
  76.  
  77. window.addEventListener('resize', function() {
  78. resizeHandler();
  79. }, false);
  80.  
  81. document.addEventListener('mousemove', function(e) {
  82. mouseX = e.pageX;
  83. mouseY = e.pageY;
  84. }, false);
  85.  
  86. if (orientationSupport && !desktop) {
  87. window.addEventListener('deviceorientation', function () {
  88. // Contrain tilt range to [-30,30]
  89. tiltY = Math.min(Math.max(-event.beta, -30), 30);
  90. tiltX = Math.min(Math.max(-event.gamma, -30), 30);
  91. }, true);
  92. }
  93.  
  94. draw();
  95. hook('onInit');
  96. }
  97.  
  98. /**
  99. * Style the canvas
  100. */
  101. // 550 = perfect width for menu
  102.  
  103. function styleCanvas() {
  104. canvas.width = screen.width;
  105. canvas.height = screen.height;
  106. ctx.fillStyle = options.dotColor;
  107. ctx.strokeStyle = options.lineColor;
  108. ctx.lineWidth = options.lineWidth;
  109. }
  110.  
  111. /**
  112. * Draw particles
  113. */
  114. function draw() {
  115. if (!canvasSupport) { return; }
  116.  
  117. winW = window.innerWidth;
  118. winH = window.innerHeight;
  119.  
  120. // Wipe canvas
  121. ctx.clearRect(0, 0, canvas.width, canvas.height);
  122.  
  123. // Update particle positions
  124. for (var i = 0; i < particles.length; i++) {
  125. particles[i].updatePosition();
  126. };
  127. // Draw particles
  128. for (var i = 0; i < particles.length; i++) {
  129. particles[i].draw();
  130. };
  131.  
  132. // Call this function next time screen is redrawn
  133. if (!paused) {
  134. raf = requestAnimationFrame(draw);
  135. }
  136. }
  137.  
  138. /**
  139. * Add/remove particles.
  140. */
  141. function resizeHandler() {
  142. // Resize the canvas
  143. styleCanvas();
  144.  
  145. var elWidth = element.offsetWidth;
  146. var elHeight = element.offsetHeight;
  147.  
  148. // Remove particles that are outside the canvas
  149. for (var i = particles.length - 1; i >= 0; i--) {
  150. if (particles[i].position.x > elWidth || particles[i].position.y > elHeight) {
  151. particles.splice(i, 1);
  152. }
  153. };
  154.  
  155. // Adjust particle density
  156. var numParticles = Math.round((canvas.width * canvas.height) / options.density);
  157. if (numParticles > particles.length) {
  158. while (numParticles > particles.length) {
  159. var p = new Particle();
  160. particles.push(p);
  161. }
  162. } else if (numParticles < particles.length) {
  163. particles.splice(numParticles);
  164. }
  165.  
  166. // Re-index particles
  167. for (i = particles.length - 1; i >= 0; i--) {
  168. particles[i].setStackPos(i);
  169. };
  170. }
  171.  
  172. /**
  173. * Pause particle system
  174. */
  175. function pause() {
  176. paused = true;
  177. }
  178.  
  179. /**
  180. * Start particle system
  181. */
  182. function start() {
  183. paused = false;
  184. draw();
  185. }
  186.  
  187. /**
  188. * Particle
  189. */
  190. function Particle() {
  191. this.stackPos;
  192. this.active = true;
  193. this.layer = Math.ceil(Math.random() * 3);
  194. this.parallaxOffsetX = 0;
  195. this.parallaxOffsetY = 0;
  196. // Initial particle position
  197. this.position = {
  198. x: Math.ceil(Math.random() * canvas.width),
  199. y: Math.ceil(Math.random() * canvas.height)
  200. }
  201. // Random particle speed, within min and max values
  202. this.speed = {}
  203. switch (options.directionX) {
  204. case 'left':
  205. this.speed.x = +(-options.maxSpeedX + (Math.random() * options.maxSpeedX) - options.minSpeedX).toFixed(2);
  206. break;
  207. case 'right':
  208. this.speed.x = +((Math.random() * options.maxSpeedX) + options.minSpeedX).toFixed(2);
  209. break;
  210. default:
  211. this.speed.x = +((-options.maxSpeedX / 2) + (Math.random() * options.maxSpeedX)).toFixed(2);
  212. this.speed.x += this.speed.x > 0 ? options.minSpeedX : -options.minSpeedX;
  213. break;
  214. }
  215. switch (options.directionY) {
  216. case 'up':
  217. this.speed.y = +(-options.maxSpeedY + (Math.random() * options.maxSpeedY) - options.minSpeedY).toFixed(2);
  218. break;
  219. case 'down':
  220. this.speed.y = +((Math.random() * options.maxSpeedY) + options.minSpeedY).toFixed(2);
  221. break;
  222. default:
  223. this.speed.y = +((-options.maxSpeedY / 2) + (Math.random() * options.maxSpeedY)).toFixed(2);
  224. this.speed.x += this.speed.y > 0 ? options.minSpeedY : -options.minSpeedY;
  225. break;
  226. }
  227. }
  228.  
  229. /**
  230. * Draw particle
  231. */
  232. Particle.prototype.draw = function() {
  233. // Draw circle
  234. ctx.beginPath();
  235. ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true);
  236. ctx.closePath();
  237. ctx.fill();
  238.  
  239. // Draw lines
  240. ctx.beginPath();
  241. // Iterate over all particles which are higher in the stack than this one
  242. for (var i = particles.length - 1; i > this.stackPos; i--) {
  243. var p2 = particles[i];
  244.  
  245. // Pythagorus theorum to get distance between two points
  246. var a = this.position.x - p2.position.x
  247. var b = this.position.y - p2.position.y
  248. var dist = Math.sqrt((a * a) + (b * b)).toFixed(2);
  249.  
  250. // If the two particles are in proximity, join them
  251. if (dist < options.proximity) {
  252. ctx.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY);
  253. if (options.curvedLines) {
  254. ctx.quadraticCurveTo(Math.max(p2.position.x, p2.position.x), Math.min(p2.position.y, p2.position.y), p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
  255. } else {
  256. ctx.lineTo(p2.position.x + p2.parallaxOffsetX, p2.position.y + p2.parallaxOffsetY);
  257. }
  258. }
  259. }
  260. ctx.stroke();
  261. ctx.closePath();
  262. }
  263.  
  264. /**
  265. * update particle position
  266. */
  267. Particle.prototype.updatePosition = function() {
  268. if (options.parallax) {
  269. if (orientationSupport && !desktop) {
  270. // Map tiltX range [-30,30] to range [0,winW]
  271. var ratioX = (winW - 0) / (30 - -30);
  272. pointerX = (tiltX - -30) * ratioX + 0;
  273. // Map tiltY range [-30,30] to range [0,winH]
  274. var ratioY = (winH - 0) / (30 - -30);
  275. pointerY = (tiltY - -30) * ratioY + 0;
  276. } else {
  277. pointerX = mouseX;
  278. pointerY = mouseY;
  279. }
  280. // Calculate parallax offsets
  281. this.parallaxTargX = (pointerX - (winW / 2)) / (options.parallaxMultiplier * this.layer);
  282. this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10; // Easing equation
  283. this.parallaxTargY = (pointerY - (winH / 2)) / (options.parallaxMultiplier * this.layer);
  284. this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10; // Easing equation
  285. }
  286.  
  287. var elWidth = element.offsetWidth;
  288. var elHeight = element.offsetHeight;
  289.  
  290. switch (options.directionX) {
  291. case 'left':
  292. if (this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
  293. this.position.x = elWidth - this.parallaxOffsetX;
  294. }
  295. break;
  296. case 'right':
  297. if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth) {
  298. this.position.x = 0 - this.parallaxOffsetX;
  299. }
  300. break;
  301. default:
  302. // If particle has reached edge of canvas, reverse its direction
  303. if (this.position.x + this.speed.x + this.parallaxOffsetX > elWidth || this.position.x + this.speed.x + this.parallaxOffsetX < 0) {
  304. this.speed.x = -this.speed.x;
  305. }
  306. break;
  307. }
  308.  
  309. switch (options.directionY) {
  310. case 'up':
  311. if (this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
  312. this.position.y = elHeight - this.parallaxOffsetY;
  313. }
  314. break;
  315. case 'down':
  316. if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight) {
  317. this.position.y = 0 - this.parallaxOffsetY;
  318. }
  319. break;
  320. default:
  321. // If particle has reached edge of canvas, reverse its direction
  322. if (this.position.y + this.speed.y + this.parallaxOffsetY > elHeight || this.position.y + this.speed.y + this.parallaxOffsetY < 0) {
  323. this.speed.y = -this.speed.y;
  324. }
  325. break;
  326. }
  327.  
  328. // Move particle
  329. this.position.x += this.speed.x;
  330. this.position.y += this.speed.y;
  331. }
  332.  
  333. /**
  334. * Setter: particle stacking position
  335. */
  336. Particle.prototype.setStackPos = function(i) {
  337. this.stackPos = i;
  338. }
  339.  
  340. function option (key, val) {
  341. if (val) {
  342. options[key] = val;
  343. } else {
  344. return options[key];
  345. }
  346. }
  347.  
  348. function destroy() {
  349. console.log('destroy');
  350. canvas.parentNode.removeChild(canvas);
  351. hook('onDestroy');
  352. if ($) {
  353. $(element).removeData('plugin_' + pluginName);
  354. }
  355. }
  356.  
  357. function hook(hookName) {
  358. if (options[hookName] !== undefined) {
  359. options[hookName].call(element);
  360. }
  361. }
  362.  
  363. init();
  364.  
  365. return {
  366. option: option,
  367. destroy: destroy,
  368. start: start,
  369. pause: pause
  370. };
  371. }
  372.  
  373. window[pluginName] = function(elem, options) {
  374. return new Plugin(elem, options);
  375. };
  376.  
  377. window[pluginName].defaults = {
  378. minSpeedX: 0.1,
  379. maxSpeedX: 0.7,
  380. minSpeedY: 0.1,
  381. maxSpeedY: 0.7,
  382. directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
  383. directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
  384. density: 10000, // How many particles will be generated: one particle every n pixels
  385. dotColor: '#666666',
  386. lineColor: '#666666',
  387. particleRadius: 3, // Dot size
  388. lineWidth: 1,
  389. curvedLines: false,
  390. proximity: 120, // How close two dots need to be before they join
  391. parallax: false,
  392. parallaxMultiplier: 10, // The lower the number, the more extreme the parallax effect
  393. onInit: function() {},
  394. onDestroy: function() {}
  395. };
  396.  
  397. // nothing wrong with hooking into jQuery if it's there...
  398. if ($) {
  399. $.fn[pluginName] = function(options) {
  400. if (typeof arguments[0] === 'string') {
  401. var methodName = arguments[0];
  402. var args = Array.prototype.slice.call(arguments, 1);
  403. var returnVal;
  404. this.each(function() {
  405. if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
  406. returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
  407. }
  408. });
  409. if (returnVal !== undefined){
  410. return returnVal;
  411. } else {
  412. return this;
  413. }
  414. } else if (typeof options === "object" || !options) {
  415. return this.each(function() {
  416. if (!$.data(this, 'plugin_' + pluginName)) {
  417. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  418. }
  419. });
  420. }
  421. };
  422. }
  423.  
  424. })(window, document);
  425.  
  426. /**
  427. * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
  428. * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  429. * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  430. * @license: MIT license
  431. */
  432. (function() {
  433. var lastTime = 0;
  434. var vendors = ['ms', 'moz', 'webkit', 'o'];
  435. for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  436. window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  437. window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
  438. || window[vendors[x]+'CancelRequestAnimationFrame'];
  439. }
  440.  
  441. if (!window.requestAnimationFrame)
  442. window.requestAnimationFrame = function(callback, element) {
  443. var currTime = new Date().getTime();
  444. var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  445. var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  446. timeToCall);
  447. lastTime = currTime + timeToCall;
  448. return id;
  449. };
  450.  
  451. if (!window.cancelAnimationFrame)
  452. window.cancelAnimationFrame = function(id) {
  453. clearTimeout(id);
  454. };
  455. }());
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement