From f28169d5008846dbbed1a680ea75db56a465eeac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Br=C3=BCderlin?= Date: Mon, 13 Mar 2017 12:42:27 +0100 Subject: [PATCH] fix #9 --- README.md | 4 +-- dist/particles.js | 75 +++++++++++++++++++++++-------------------- dist/particles.min.js | 4 +-- package.json | 2 +- src/particles.js | 75 +++++++++++++++++++++++-------------------- 5 files changed, 84 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index 8b476ef..450ca44 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ particles.js is a lightweight, dependency-free and responsive javascript plugin There are several ways to install particles.js: - [Download the latest version](https://github.com/marcbruederlin/particles.js/archive/master.zip) - Install with npm: `npm install particlesjs --save` -- Use the CDN: `https://npmcdn.com/particlesjs@2.0.0/dist/particles.min.js` +- Use the CDN: `https://npmcdn.com/particlesjs@2.0.1/dist/particles.min.js` ## Usage Include the minified JS in your HTML (right before the closing body tag). @@ -41,8 +41,6 @@ body { .background { position: absolute; display: block; - width: 100%; - height: 100%; top: 0; left: 0; z-index: 0; diff --git a/dist/particles.js b/dist/particles.js index d949cbd..18e13ff 100644 --- a/dist/particles.js +++ b/dist/particles.js @@ -2,7 +2,7 @@ * A lightweight, dependency-free and responsive javascript plugin for particle backgrounds. * * @author Marc Bruederlin - * @version 2.0.0 + * @version 2.0.1 * @license MIT * @see https://github.com/marcbruederlin/particles.js */ @@ -35,11 +35,11 @@ var Particles = (function(window, document) { _.element = null; _.context = null; - _.activeBreakpoint = null; + _.ratio = null; _.breakpoints = []; + _.activeBreakpoint = null; _.breakpointSettings = []; _.originalSettings = null; - _.windowWidth = 0; _.storage = []; } @@ -61,10 +61,9 @@ var Particles = (function(window, document) { _._initializeCanvas(); _._initializeEvents(); - _._initializeStorage(); _._registerBreakpoints(); _._checkResponsive(); - + _._initializeStorage(); _._animate(); }; @@ -74,7 +73,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._initializeCanvas = function() { - var _ = this; + var _ = this, devicePixelRatio, backingStoreRatio; if(!_.options.selector) { console.warn('particles.js: No selector specified! Check https://github.com/marcbruederlin/particles.js#options'); @@ -83,9 +82,19 @@ var Particles = (function(window, document) { _.element = document.querySelector(_.options.selector); _.context = _.element.getContext('2d'); + + devicePixelRatio = window.devicePixelRatio || 1; + backingStoreRatio = _.context.webkitBackingStorePixelRatio || _.context.mozBackingStorePixelRatio || _.context.msBackingStorePixelRatio || + _.context.oBackingStorePixelRatio || _.context.backingStorePixelRatio || 1; + + _.ratio = devicePixelRatio / backingStoreRatio; + + _.element.width = window.innerWidth * _.ratio; + _.element.height = window.innerHeight * _.ratio; + _.element.style.width = '100%'; + _.element.style.height = '100%'; - _.element.width = window.innerWidth; - _.element.height = window.innerHeight; + _.context.scale(_.ratio, _.ratio); }; /** @@ -110,7 +119,7 @@ var Particles = (function(window, document) { _.storage = []; for(var i = _.options.maxParticles; i--;) { - _.storage.push(new Particle(_.element, _.context, _.options)); + _.storage.push(new Particle(_.context, _.options)); } }; @@ -120,8 +129,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._registerBreakpoints = function() { - var _ = this, breakpoint, currentBreakpoint, l, - responsiveSettings = _.options.responsive || null; + var _ = this, breakpoint, currentBreakpoint, l, responsiveSettings = _.options.responsive || null; if(typeof responsiveSettings === 'object' && responsiveSettings !== null && responsiveSettings.length) { for(breakpoint in responsiveSettings) { @@ -158,9 +166,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._checkResponsive = function() { - var _ = this, - breakpoint, targetBreakpoint = false, - windowWidth = window.innerWidth; + var _ = this, breakpoint, targetBreakpoint = false, windowWidth = window.innerWidth; if(_.options.responsive && _.options.responsive.length && _.options.responsive !== null) { targetBreakpoint = null; @@ -207,18 +213,17 @@ var Particles = (function(window, document) { Plugin.prototype._resize = function() { var _ = this; - _.element.width = window.innerWidth; - _.element.height = window.innerHeight; + _.element.width = window.innerWidth * _.ratio; + _.element.height = window.innerHeight * _.ratio; - if(window.innerWidth !== _.windowWidth) { - clearTimeout(_.windowDelay); + _.context.scale(_.ratio, _.ratio); - _.windowDelay = window.setTimeout(function() { - _.windowWidth = window.innerWidth; - _._checkResponsive(); - _._refresh(); - }, 50); - } + clearTimeout(_.windowDelay); + + _.windowDelay = window.setTimeout(function() { + _._checkResponsive(); + _._refresh(); + }, 50); }; /** @@ -265,16 +270,16 @@ var Particles = (function(window, document) { particle.x += particle.vx; particle.y += particle.vy; - if(particle.x + particle.radius > _.element.width) { + if(particle.x + particle.radius > window.innerWidth) { particle.x = particle.radius; } else if(particle.x - particle.radius < 0) { - particle.x = _.element.width - particle.radius; + particle.x = window.innerWidth - particle.radius; } - if(particle.y + particle.radius > _.element.height) { + if(particle.y + particle.radius > window.innerHeight) { particle.y = particle.radius; } else if(particle.y - particle.radius < 0) { - particle.y = _.element.height - particle.radius; + particle.y = window.innerHeight - particle.radius; } if(_.options.connectParticles) { @@ -318,7 +323,9 @@ var Particles = (function(window, document) { * @param {object} obj */ Plugin.prototype._extend = function(source, obj) { - Object.keys(obj).forEach(function(key) { source[key] = obj[key]; }); + Object.keys(obj).forEach(function(key) { + source[key] = obj[key]; + }); return source; }; @@ -344,20 +351,18 @@ var Particles = (function(window, document) { * Represents a single particle. * * @constructor - * @param {object} element * @param {object} context * @param {object} options * */ - Particle = function(element, context, options) { + Particle = function(context, options) { var _ = this; - _.element = element; _.context = context; _.options = options; - _.x = Math.random() * _.element.width; - _.y = Math.random() * _.element.height; + _.x = Math.random() * window.innerWidth; + _.y = Math.random() * window.innerHeight; _.vx = Math.random() * _.options.speed * 2 - _.options.speed; _.vy = Math.random() * _.options.speed * 2 - _.options.speed; _.radius = Math.random() * Math.random() * _.options.sizeVariations; @@ -375,7 +380,7 @@ var Particles = (function(window, document) { _.context.fillStyle = 'rgb(' + _.options.color.r + ', ' + _.options.color.g + ', ' + _.options.color.b + ')'; _.context.beginPath(); - _.context.arc(_.x, this.y, _.radius, 0, Math.PI * 2, false); + _.context.arc(_.x, _.y, _.radius, 0, Math.PI * 2, false); _.context.fill(); }; diff --git a/dist/particles.min.js b/dist/particles.min.js index 2572e76..bf3705c 100644 --- a/dist/particles.min.js +++ b/dist/particles.min.js @@ -2,8 +2,8 @@ * A lightweight, dependency-free and responsive javascript plugin for particle backgrounds. * * @author Marc Bruederlin - * @version 2.0.0 + * @version 2.0.1 * @license MIT * @see https://github.com/marcbruederlin/particles.js */ -var Particles=function(t,e){"use strict";var n,i={};return n=function(){function t(){var t=this;t.defaults={responsive:null,selector:null,maxParticles:100,sizeVariations:3,speed:.5,color:t._hex2rgb("#000000"),minDistance:120,connectParticles:!1},t.element=null,t.context=null,t.activeBreakpoint=null,t.breakpoints=[],t.breakpointSettings=[],t.originalSettings=null,t.windowWidth=0,t.storage=[]}return t}(),n.prototype.init=function(t){var e=this;t.color=e._hex2rgb(t.color),e.options=e._extend(e.defaults,t),e.originalSettings=JSON.parse(JSON.stringify(e.options)),e._initializeCanvas(),e._initializeEvents(),e._initializeStorage(),e._registerBreakpoints(),e._checkResponsive(),e._animate()},n.prototype._initializeCanvas=function(){var n=this;return n.options.selector?(n.element=e.querySelector(n.options.selector),n.context=n.element.getContext("2d"),n.element.width=t.innerWidth,void(n.element.height=t.innerHeight)):(console.warn("particles.js: No selector specified! Check https://github.com/marcbruederlin/particles.js#options"),!1)},n.prototype._initializeEvents=function(){var e=this;t.addEventListener("resize",e._resize.bind(e),!1)},n.prototype._initializeStorage=function(){var t=this;t.storage=[];for(var e=t.options.maxParticles;e--;)t.storage.push(new i(t.element,t.context,t.options))},n.prototype._registerBreakpoints=function(){var t,e,n,i=this,o=i.options.responsive||null;if("object"==typeof o&&null!==o&&o.length){for(t in o)if(n=i.breakpoints.length-1,e=o[t].breakpoint,o.hasOwnProperty(t)){for(o[t].options.color&&(o[t].options.color=i._hex2rgb(o[t].options.color));n>=0;)i.breakpoints[n]&&i.breakpoints[n]===e&&i.breakpoints.splice(n,1),n--;i.breakpoints.push(e),i.breakpointSettings[e]=o[t].options}i.breakpoints.sort(function(t,e){return e-t})}},n.prototype._checkResponsive=function(){var e,n=this,i=!1,o=t.innerWidth;if(n.options.responsive&&n.options.responsive.length&&null!==n.options.responsive){i=null;for(e in n.breakpoints)n.breakpoints.hasOwnProperty(e)&&o<=n.breakpoints[e]&&(i=n.breakpoints[e]);null!==i?(n.activeBreakpoint=i,n.options=n._extend(n.options,n.breakpointSettings[i])):null!==n.activeBreakpoint&&(n.activeBreakpoint=null,i=null,n.options=n._extend(n.options,n.originalSettings))}},n.prototype._refresh=function(){var t=this;t._initializeStorage(),t._update()},n.prototype._resize=function(){var e=this;e.element.width=t.innerWidth,e.element.height=t.innerHeight,t.innerWidth!==e.windowWidth&&(clearTimeout(e.windowDelay),e.windowDelay=t.setTimeout(function(){e.windowWidth=t.innerWidth,e._checkResponsive(),e._refresh()},50))},n.prototype._animate=function(){var e=this;e._draw(),t.requestAnimFrame(e._animate.bind(e))},n.prototype._draw=function(){var t=this;t.context.clearRect(0,0,t.element.width,t.element.height);for(var e=t.storage.length;e--;){var n=t.storage[e];n._draw()}t._update()},n.prototype._update=function(){for(var t=this,e=t.storage.length;e--;){var n=t.storage[e];if(n.x+=n.vx,n.y+=n.vy,n.x+n.radius>t.element.width?n.x=n.radius:n.x-n.radius<0&&(n.x=t.element.width-n.radius),n.y+n.radius>t.element.height?n.y=n.radius:n.y-n.radius<0&&(n.y=t.element.height-n.radius),t.options.connectParticles)for(var i=e+1;i=0;)o.breakpoints[i]&&o.breakpoints[i]===e&&o.breakpoints.splice(i,1),i--;o.breakpoints.push(e),o.breakpointSettings[e]=n[t].options}o.breakpoints.sort(function(t,e){return e-t})}},i.prototype._checkResponsive=function(){var e,i=this,o=!1,n=t.innerWidth;if(i.options.responsive&&i.options.responsive.length&&null!==i.options.responsive){o=null;for(e in i.breakpoints)i.breakpoints.hasOwnProperty(e)&&n<=i.breakpoints[e]&&(o=i.breakpoints[e]);null!==o?(i.activeBreakpoint=o,i.options=i._extend(i.options,i.breakpointSettings[o])):null!==i.activeBreakpoint&&(i.activeBreakpoint=null,o=null,i.options=i._extend(i.options,i.originalSettings))}},i.prototype._refresh=function(){var t=this;t._initializeStorage(),t._update()},i.prototype._resize=function(){var e=this;e.element.width=t.innerWidth*e.ratio,e.element.height=t.innerHeight*e.ratio,e.context.scale(e.ratio,e.ratio),clearTimeout(e.windowDelay),e.windowDelay=t.setTimeout(function(){e._checkResponsive(),e._refresh()},50)},i.prototype._animate=function(){var e=this;e._draw(),t.requestAnimFrame(e._animate.bind(e))},i.prototype._draw=function(){var t=this;t.context.clearRect(0,0,t.element.width,t.element.height);for(var e=t.storage.length;e--;){var i=t.storage[e];i._draw()}t._update()},i.prototype._update=function(){for(var e=this,i=e.storage.length;i--;){var o=e.storage[i];if(o.x+=o.vx,o.y+=o.vy,o.x+o.radius>t.innerWidth?o.x=o.radius:o.x-o.radius<0&&(o.x=t.innerWidth-o.radius),o.y+o.radius>t.innerHeight?o.y=o.radius:o.y-o.radius<0&&(o.y=t.innerHeight-o.radius),e.options.connectParticles)for(var n=i+1;n - * @version 2.0.0 + * @version 2.0.1 * @license MIT * @see https://github.com/marcbruederlin/particles.js */ @@ -35,11 +35,11 @@ var Particles = (function(window, document) { _.element = null; _.context = null; - _.activeBreakpoint = null; + _.ratio = null; _.breakpoints = []; + _.activeBreakpoint = null; _.breakpointSettings = []; _.originalSettings = null; - _.windowWidth = 0; _.storage = []; } @@ -61,10 +61,9 @@ var Particles = (function(window, document) { _._initializeCanvas(); _._initializeEvents(); - _._initializeStorage(); _._registerBreakpoints(); _._checkResponsive(); - + _._initializeStorage(); _._animate(); }; @@ -74,7 +73,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._initializeCanvas = function() { - var _ = this; + var _ = this, devicePixelRatio, backingStoreRatio; if(!_.options.selector) { console.warn('particles.js: No selector specified! Check https://github.com/marcbruederlin/particles.js#options'); @@ -83,9 +82,19 @@ var Particles = (function(window, document) { _.element = document.querySelector(_.options.selector); _.context = _.element.getContext('2d'); + + devicePixelRatio = window.devicePixelRatio || 1; + backingStoreRatio = _.context.webkitBackingStorePixelRatio || _.context.mozBackingStorePixelRatio || _.context.msBackingStorePixelRatio || + _.context.oBackingStorePixelRatio || _.context.backingStorePixelRatio || 1; + + _.ratio = devicePixelRatio / backingStoreRatio; + + _.element.width = window.innerWidth * _.ratio; + _.element.height = window.innerHeight * _.ratio; + _.element.style.width = '100%'; + _.element.style.height = '100%'; - _.element.width = window.innerWidth; - _.element.height = window.innerHeight; + _.context.scale(_.ratio, _.ratio); }; /** @@ -110,7 +119,7 @@ var Particles = (function(window, document) { _.storage = []; for(var i = _.options.maxParticles; i--;) { - _.storage.push(new Particle(_.element, _.context, _.options)); + _.storage.push(new Particle(_.context, _.options)); } }; @@ -120,8 +129,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._registerBreakpoints = function() { - var _ = this, breakpoint, currentBreakpoint, l, - responsiveSettings = _.options.responsive || null; + var _ = this, breakpoint, currentBreakpoint, l, responsiveSettings = _.options.responsive || null; if(typeof responsiveSettings === 'object' && responsiveSettings !== null && responsiveSettings.length) { for(breakpoint in responsiveSettings) { @@ -158,9 +166,7 @@ var Particles = (function(window, document) { * @private */ Plugin.prototype._checkResponsive = function() { - var _ = this, - breakpoint, targetBreakpoint = false, - windowWidth = window.innerWidth; + var _ = this, breakpoint, targetBreakpoint = false, windowWidth = window.innerWidth; if(_.options.responsive && _.options.responsive.length && _.options.responsive !== null) { targetBreakpoint = null; @@ -207,18 +213,17 @@ var Particles = (function(window, document) { Plugin.prototype._resize = function() { var _ = this; - _.element.width = window.innerWidth; - _.element.height = window.innerHeight; + _.element.width = window.innerWidth * _.ratio; + _.element.height = window.innerHeight * _.ratio; - if(window.innerWidth !== _.windowWidth) { - clearTimeout(_.windowDelay); + _.context.scale(_.ratio, _.ratio); - _.windowDelay = window.setTimeout(function() { - _.windowWidth = window.innerWidth; - _._checkResponsive(); - _._refresh(); - }, 50); - } + clearTimeout(_.windowDelay); + + _.windowDelay = window.setTimeout(function() { + _._checkResponsive(); + _._refresh(); + }, 50); }; /** @@ -265,16 +270,16 @@ var Particles = (function(window, document) { particle.x += particle.vx; particle.y += particle.vy; - if(particle.x + particle.radius > _.element.width) { + if(particle.x + particle.radius > window.innerWidth) { particle.x = particle.radius; } else if(particle.x - particle.radius < 0) { - particle.x = _.element.width - particle.radius; + particle.x = window.innerWidth - particle.radius; } - if(particle.y + particle.radius > _.element.height) { + if(particle.y + particle.radius > window.innerHeight) { particle.y = particle.radius; } else if(particle.y - particle.radius < 0) { - particle.y = _.element.height - particle.radius; + particle.y = window.innerHeight - particle.radius; } if(_.options.connectParticles) { @@ -318,7 +323,9 @@ var Particles = (function(window, document) { * @param {object} obj */ Plugin.prototype._extend = function(source, obj) { - Object.keys(obj).forEach(function(key) { source[key] = obj[key]; }); + Object.keys(obj).forEach(function(key) { + source[key] = obj[key]; + }); return source; }; @@ -344,20 +351,18 @@ var Particles = (function(window, document) { * Represents a single particle. * * @constructor - * @param {object} element * @param {object} context * @param {object} options * */ - Particle = function(element, context, options) { + Particle = function(context, options) { var _ = this; - _.element = element; _.context = context; _.options = options; - _.x = Math.random() * _.element.width; - _.y = Math.random() * _.element.height; + _.x = Math.random() * window.innerWidth; + _.y = Math.random() * window.innerHeight; _.vx = Math.random() * _.options.speed * 2 - _.options.speed; _.vy = Math.random() * _.options.speed * 2 - _.options.speed; _.radius = Math.random() * Math.random() * _.options.sizeVariations; @@ -375,7 +380,7 @@ var Particles = (function(window, document) { _.context.fillStyle = 'rgb(' + _.options.color.r + ', ' + _.options.color.g + ', ' + _.options.color.b + ')'; _.context.beginPath(); - _.context.arc(_.x, this.y, _.radius, 0, Math.PI * 2, false); + _.context.arc(_.x, _.y, _.radius, 0, Math.PI * 2, false); _.context.fill(); };