From 576001a4e9d321a234bc09f36b9f2b9d6d11d86e Mon Sep 17 00:00:00 2001
From: Ahmad Tawakol <a@twkl.me>
Date: Thu, 20 Sep 2018 01:20:54 +0200
Subject: [PATCH] Added two functions to start and stop the snow

---
 demo/snowf.html | 22 +++++++++++++++++++++-
 snowf.js        | 16 ++++++++++++++--
 snowf.min.js    |  2 +-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/demo/snowf.html b/demo/snowf.html
index 7d595b1..5a58f36 100644
--- a/demo/snowf.html
+++ b/demo/snowf.html
@@ -62,7 +62,11 @@
 		<button id="noWindBtn" onclick="setWind(0)" class="active">no wind</button>
 		<button id="EastWindBtn" onclick="setWind(3)">wind -&gt;</button>
 	</div>
-	
+	<div class="btn-group">
+		<button id="playBtn" onclick="play()" class="active">Start</button>
+		<button id="pauseBtn" onclick="pause()">Stop</button>
+	</div>
+
 	<script src="../snowf.min.js"></script>
 	<script>
 
@@ -82,6 +86,22 @@
 			snowflakes.speed(opt);
 		}
 
+		//Make the snow stop falling. Falling snow will keep falling until it reaches the end.
+		function pause() {
+			snowflakes.pause();
+			document.getElementsByClassName('active')[2].className = '';
+			var evt = window.event || arguments.callee.caller.arguments[0];
+			evt.target.className = 'active';
+		}
+
+		//Make the snow start falling again.
+		function play() {
+			snowflakes.play();
+			document.getElementsByClassName('active')[2].className = '';
+			var evt = window.event || arguments.callee.caller.arguments[0];
+			evt.target.className = 'active';
+		}
+
 		// change wind level
 		function setWind(wind) {
 			document.getElementsByClassName('active')[1].className = '';
diff --git a/snowf.js b/snowf.js
index 4873ba2..87cfd1a 100644
--- a/snowf.js
+++ b/snowf.js
@@ -19,6 +19,7 @@
 	var config = {};
 	var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60);};
 	var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || function(callback) { window.clearTimeout(callback);};
+  var paused = false;
 
 	// default options
 	var defaults = {
@@ -112,8 +113,8 @@
 				flake.velX = Math.abs(flake.velX) < Math.abs(o.wind) ? flake.velX + o.wind / 20 : o.wind;
 				flake.y = flake.y + flake.velY * 0.5;
 				flake.x = flake.x + (o.swing ? 0.4 * Math.cos(flake.swing += 0.03) * flake.opacity * o.swing : 0) + flake.velX * 0.5;
-				if (flake.x > self.width + flake.r || flake.x < -flake.r || flake.y > self.height + flake.r || flake.y < -flake.r) {
-					_reset(flake);
+				if (!paused && (flake.x > self.width + flake.r || flake.x < -flake.r || flake.y > self.height + flake.r || flake.y < -flake.r)) {
+          _reset(flake);
 				}
 			}
 			self.animationFrame = requestAnimationFrame(_snow);
@@ -145,6 +146,17 @@
 		return this;
 	};
 
+	/**
+	 * Stop snowflakes.
+	 * @public
+	 */
+	Snowf.prototype.pause = function() {
+    paused = true;
+	};
+
+  Snowf.prototype.play = function() {
+    paused = false;
+	};
 	/**
 	 * Set options and reset snowflakes.
 	 * @public
diff --git a/snowf.min.js b/snowf.min.js
index 3028d4d..0e71bac 100644
--- a/snowf.min.js
+++ b/snowf.min.js
@@ -1 +1 @@
-!function(t,i){"object"==typeof module&&module.exports?module.exports=i():"function"==typeof define&&define.amd?define(i):t.snowf=i()}(this,function(){function t(t){this.options=i({},f,c,t)}function i(){for(var t=arguments,i=1,n=t.length;i<n;i++)for(var e in t[i])t[0][e]=t[i][e];return t[0]}function n(t){return Object.prototype.toString.call(t).toLowerCase().match(/\[object (\S*)\]/)[1]}function e(t,i){var n=document.createElement(t);for(var e in i)n[e]=i[e];return n}function o(t,n){return i(t.style,n)}function s(t,i){var n=i-t;return i===t?t:Math.random()*n+t}function a(t){var i="";return i=0===t.indexOf("#")?4===t.length?t.substr(1).split("").map(function(t){return parseInt(t.concat(t),16)}).join(","):7===t.length?[t.substr(1,2),t.substr(3,2),t.substr(5,2)].map(function(t){return parseInt(t,16)}).join(","):"255,255,255":0===t.indexOf("rgb(")?t.substring(4,t.length-1):"255,255,255"}var r="snowf",h="0.0.3",c={},u=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)},d=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.msCancelAnimationFrame||function(t){window.clearTimeout(t)},f={dom:document.body,amount:50,size:5,speed:1.5,wind:0,color:"#fff",opacity:.8,swing:1,image:null,zIndex:null};t.prototype.init=function(){if(this.canvas)return this;var t=this.options;return this.dom="string"===n(t.dom)?document.querySelector(t.dom):t.dom,this.canvas=e("canvas",{className:r+"-canvas"}),o(this.canvas,{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"}),t.zIndex&&o(this.canvas,{zIndex:t.zIndex}),this.dom.appendChild(this.canvas),this.height=this.canvas.height=this.canvas.offsetHeight,this.width=this.canvas.width=this.canvas.offsetWidth,this.context=this.canvas.getContext("2d"),this.flakes=[],this.animationFrame=null,this.reset()},t.prototype.reset=function(){function t(){for(var t=0;t<o.amount;t++)h.push({x:s(0,e.width),y:s(0,e.height),r:s(o.size,2*o.size)/2,velX:0,velY:s(o.speed,2*o.speed),swing:s(0,2*Math.PI),opacity:s(0,o.opacity)});i()}function i(){var t;r.clearRect(0,0,e.width,e.height);for(var s=0;s<o.amount;s++){var c=h[s];o.image?(t||(t=new Image,t.src=o.image),r.drawImage(t,c.x-c.r,c.y-c.r,2*c.r,2*c.r)):(r.beginPath(),r.fillStyle="rgba("+a(o.color)+","+c.opacity+")",r.arc(c.x,c.y,c.r,2*Math.PI,!1),r.fill(),r.closePath()),c.velX=Math.abs(c.velX)<Math.abs(o.wind)?c.velX+o.wind/20:o.wind,c.y=c.y+.5*c.velY,c.x=c.x+(o.swing?.4*Math.cos(c.swing+=.03)*c.opacity*o.swing:0)+.5*c.velX,(c.x>e.width+c.r||c.x<-c.r||c.y>e.height+c.r||c.y<-c.r)&&n(c)}e.animationFrame=u(i)}function n(t){var i=t.r;t.r=s(o.size,2*o.size)/2,t.x>e.width+i?(t.x=-t.r,t.y=s(0,e.height)):t.x<-i?(t.x=e.width+t.r,t.y=s(0,e.height)):(t.x=s(0,e.width),t.y=-t.r),t.velX=0,t.velY=s(o.speed,2*o.speed),t.swing=s(0,2*Math.PI),t.opacity=s(0,o.opacity)}var e=this,o=e.options,r=(e.dom,e.canvas,e.context),h=e.flakes=[];return d(e.animationFrame),t(),this},t.prototype.setOptions=function(t){return i(this.options,t),this.reset()},t.prototype.wind=function(t,i){var n=this.options,e=n.wind;return n.wind=t,i&&setTimeout(function(){n.wind=e},i),this},t.prototype.speed=function(t){var i=this.options,n=i.speed;i.speed=t;for(var e=0;e<i.amount;e++)this.flakes[e].velY*=t/n;return this},t.prototype.resize=function(){var t=this.options,i=this.canvas.height,n=this.canvas.width,e=this.dom.offsetHeight,o=this.dom.offsetWidth;this.canvas.height=this.height=e,this.canvas.width=this.width=o;for(var s=0;s<t.amount;s++){var a=this.flakes[s];a.x=a.x/n*o,a.y=a.y/i*e}return this};var m={version:h,init:function(i){return new t(i).init()},config:function(t){c=t}};return m});
\ No newline at end of file
+!function(t,i){"object"==typeof module&&module.exports?module.exports=i():"function"==typeof define&&define.amd?define(i):t.snowf=i()}(this,function(){var i={},c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)},t=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.msCancelAnimationFrame||function(t){window.clearTimeout(t)},u=!1,n={dom:document.body,amount:50,size:5,speed:1.5,wind:0,color:"#fff",opacity:.8,swing:1,image:null,zIndex:null};function e(t){this.options=o({},n,i,t)}function o(){for(var t=arguments,i=1,n=t.length;i<n;i++)for(var e in t[i])t[0][e]=t[i][e];return t[0]}function s(t,i){return o(t.style,i)}function d(t,i){var n=i-t;return i===t?t:Math.random()*n+t}function f(t){return 0===t.indexOf("#")?4===t.length?t.substr(1).split("").map(function(t){return parseInt(t.concat(t),16)}).join(","):7===t.length?[t.substr(1,2),t.substr(3,2),t.substr(5,2)].map(function(t){return parseInt(t,16)}).join(","):"255,255,255":0===t.indexOf("rgb(")?t.substring(4,t.length-1):"255,255,255"}return e.prototype.init=function(){if(this.canvas)return this;var t,i=this.options;return this.dom="string"===(t=i.dom,Object.prototype.toString.call(t).toLowerCase().match(/\[object (\S*)\]/)[1])?document.querySelector(i.dom):i.dom,this.canvas=function(t,i){var n=document.createElement(t);for(var e in i)n[e]=i[e];return n}("canvas",{className:"snowf-canvas"}),s(this.canvas,{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"}),i.zIndex&&s(this.canvas,{zIndex:i.zIndex}),this.dom.appendChild(this.canvas),this.height=this.canvas.height=this.canvas.offsetHeight,this.width=this.canvas.width=this.canvas.offsetWidth,this.context=this.canvas.getContext("2d"),this.flakes=[],this.animationFrame=null,this.reset()},e.prototype.reset=function(){var e=this,o=e.options,s=(e.dom,e.canvas,e.context),a=e.flakes=[];function r(){var t;s.clearRect(0,0,e.width,e.height);for(var i=0;i<o.amount;i++){var n=a[i];o.image?(t||((t=new Image).src=o.image),s.drawImage(t,n.x-n.r,n.y-n.r,2*n.r,2*n.r)):(s.beginPath(),s.fillStyle="rgba("+f(o.color)+","+n.opacity+")",s.arc(n.x,n.y,n.r,2*Math.PI,!1),s.fill(),s.closePath()),n.velX=Math.abs(n.velX)<Math.abs(o.wind)?n.velX+o.wind/20:o.wind,n.y=n.y+.5*n.velY,n.x=n.x+(o.swing?.4*Math.cos(n.swing+=.03)*n.opacity*o.swing:0)+.5*n.velX,!u&&(n.x>e.width+n.r||n.x<-n.r||n.y>e.height+n.r||n.y<-n.r)&&h(n)}e.animationFrame=c(r)}function h(t){var i=t.r;t.r=d(o.size,2*o.size)/2,t.x>e.width+i?(t.x=-t.r,t.y=d(0,e.height)):t.x<-i?(t.x=e.width+t.r,t.y=d(0,e.height)):(t.x=d(0,e.width),t.y=-t.r),t.velX=0,t.velY=d(o.speed,2*o.speed),t.swing=d(0,2*Math.PI),t.opacity=d(0,o.opacity)}return t(e.animationFrame),function(){for(var t=0;t<o.amount;t++)a.push({x:d(0,e.width),y:d(0,e.height),r:d(o.size,2*o.size)/2,velX:0,velY:d(o.speed,2*o.speed),swing:d(0,2*Math.PI),opacity:d(0,o.opacity)});r()}(),this},e.prototype.pause=function(){u=!0},e.prototype.play=function(){u=!1},e.prototype.setOptions=function(t){return o(this.options,t),this.reset()},e.prototype.wind=function(t,i){var n=this.options,e=n.wind;return n.wind=t,i&&setTimeout(function(){n.wind=e},i),this},e.prototype.speed=function(t){var i=this.options,n=i.speed;i.speed=t;for(var e=0;e<i.amount;e++)this.flakes[e].velY*=t/n;return this},e.prototype.resize=function(){var t=this.options,i=this.canvas.height,n=this.canvas.width,e=this.dom.offsetHeight,o=this.dom.offsetWidth;this.canvas.height=this.height=e,this.canvas.width=this.width=o;for(var s=0;s<t.amount;s++){var a=this.flakes[s];a.x=a.x/n*o,a.y=a.y/i*e}return this},{version:"0.0.3",init:function(t){return new e(t).init()},config:function(t){i=t}}});