@erikwatson/snowfall 3.0.3 → 3.1.1

package/README.md

@@ -15,34 +15,75 @@ displayed over the top. [Check out this example](http://erikwatson.me/?snow).
 - Density of snowflakes looks correct even when the window is resized.
 - Small, with no dependencies.
 
-## Instructions
+## Instructions - Package Manager
 
-First, install.
+### Install it
 
 ```sh
-# if you're using yarn
+# if you're using yarn install with
 yarn add @erikwatson/snowfall
 
-# if you're using npm
+# if you're using npm install with
 npm install @erikwatson/snowfall
 ```
 
-Then...
+### Use it
+
+Add a div with an ID of `snow-container` to your page. You will need to set the
+width and height of this yourself using CSS.
 
 ```html
-<!-- You are expected to size and position this yourself with CSS -->
 <div id="snow-container"></div>
+```
+
+Then, at the bottom of your page body add the following.
+
+```html
+<script
+  type="text/javascript"
+  src="./node_modules/@erikwatson/snowfall/dist/snowfall.min.js"
+></script>
+<script>
+  // You can change the defaults by passing in a config object here
+  // Use the Visual Config Editor to create one
+  snowfall.start()
+</script>
+```
+
+**WARNING:** You should symlink to the .js file rather than have a publicly
+accessible node_modules folder. It is this way here just to keep example simple.
+
+## Instructions - CDN
 
-<!-- Include the lib, wherever you've put it -->
-<script type="text/javascript" src="./path/to/snowfall.min.js"></script>
+First, add a div with an ID of `snow-container` to your page. You will need to
+set the width and height of this yourself using CSS.
+
+```html
+<div id="snow-container"></div>
 ```
 
-```js
-// You can change the defaults by passing in a config object here
-// Use the Visual Config Editor to create one
-snowfall.start()
+Then, at the bottom of your page body add the following.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@erikwatson/snowfall/dist/snowfall.min.js"></script>
+<script>
+  // You can change the defaults by passing in a config object here
+  // Use the Visual Config Editor to create one
+  snowfall.start()
+</script>
 ```
 
-## Authors
+### Specify Version
+
+It is not recommended to always use the latest version, especially in
+production. You can change the CDN url to specify control over the version using
+the `@version` syntax like so.
+
+- **latest release**: https://cdn.jsdelivr.net/npm/@erikwatson/snowfall/dist/snowfall.min.js
+- **major release**: https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@3/dist/snowfall.min.js
+- **minor release**: https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@3.1/dist/snowfall.min.js
+- **patch release**: https://cdn.jsdelivr.net/npm/@erikwatson/snowfall@3.0.1/dist/snowfall.min.js
+
+## Author
 
 - [Erik Watson](http://erikwatson.me)

package/dist/snowfall.min.js

@@ -1 +1 @@
-window.snowfall=function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){const i=n(1),r=document.querySelector("#snow-container"),o=document.createElement("canvas"),a=o.getContext("2d");let d=i.create(0,.7),s=i.create(0,0),l=200,c=[],u="#0d0014",f="#8d90b7",h="#ffffff",y=1,g=.02;function p(t,e){(d=i.fromDegrees(t)).multiplyScalar(e)}function v(t,e){(s=i.fromDegrees(t)).multiplyScalar(e)}function m(){o.width=r.offsetWidth,o.height=r.offsetHeight,c=P(q())}function w(){c.forEach(t=>{b.x=s.x,b.y=s.y,b.multiplyScalar(t.size+t.random),t.pos.add(b),M.x=d.x,M.y=d.y,M.multiplyScalar(t.size+t.random),t.pos.add(M);const e=t.noise;S=i.create(y*Math.sin(g*x+e),0),t.pos.add(S),t.pos.x>o.width&&(t.pos.x=0),t.pos.x<0&&(t.pos.x=o.width),t.pos.y>o.height&&(t.pos.y=0,t.pos.x=Math.random()*o.width),t.pos.y<0&&(t.pos.y=o.height,t.pos.x=Math.random()*o.width)}),x+=1,function(){a.clearRect(0,0,o.width,o.height),u&&(a.fillStyle=u,a.fillRect(0,0,o.width,o.height));const t=c.filter(t=>t.size>=7),e=c.filter(t=>t.size<7);a.fillStyle=f,e.forEach(t=>{a.beginPath(),z(t.pos,t.size),a.fill()}),a.fillStyle=h,t.forEach(t=>{a.beginPath(),z(t.pos,t.size),a.fill()})}(),window.requestAnimationFrame(w)}let x=0;const b=i.create(0,0),M=i.create(0,0);let S=null;function P(t){let e=[];for(;t--;)e.push({pos:i.create(Math.random()*o.width,Math.random()*o.height),size:3+5*Math.random(),noise:10*Math.random(),amplitude:2*Math.random(),frequency:.01*Math.random(),random:Math.random()});return e}function q(){const t=o.width*o.height;return Math.round(l*(t/2073600))}function z(t,e){a.arc(t.x,t.y,e,0,2*Math.PI,!1)}t.exports={setAmplitude:function(t){y=t},setBackground:function(t){u=t},setDensity:function(t){l=t,c=P(q())},setFrequency:function(t){g=t},setGravity:p,setPrimary:function(t){f=t},setSecondary:function(t){h=t},setWind:v,start:function(t={}){void 0!==t.bg&&(u=t.bg),void 0!==t.primary&&(f=t.primary),void 0!==t.secondary&&(h=t.secondary),void 0!==t.density&&(l=t.density),void 0!==t.wave&&(void 0!==t.wave.amplitude&&(y=t.wave.amplitude),void 0!==t.wave.frequency&&(g=t.wave.frequency)),void 0!==t.gravity&&(void 0!==t.gravity.angle&&void 0!==t.gravity.strength&&p(t.gravity.angle,t.gravity.strength),void 0!==t.gravity.angle&&void 0===t.gravity.strength&&p(t.gravity.angle,.6),void 0===t.gravity.angle&&void 0!==t.gravity.strength&&p(90,t.gravity.strength)),void 0!==t.wind&&(void 0!==t.wind.angle&&void 0!==t.wind.strength&&v(t.wind.angle,t.wind.strength),void 0!==t.wind.angle&&void 0===t.wind.strength&&v(t.wind.angle,0),void 0===t.wind.angle&&void 0!==t.wind.strength&&v(0,t.wind.strength)),o.width=r.offsetWidth,o.height=r.offsetHeight,r.appendChild(o),c=P(q()),window.onresize=m,window.requestAnimationFrame(w)}}},function(t,e){function n(t,e){let r=t,o=e;const a=()=>Math.sqrt(r*r+o*o),d=t=>{r*=t,o*=t},s=()=>{let t=a();r/=t,o/=t};return{add:t=>{r+=t.x,o+=t.y},addScalar:t=>{r+=t,o+=t},clone:i,divide:t=>{r/=t.x,o/=t.y},divideScalar:t=>{r/=t,o/=t},dot:t=>r*t.x+o*t.y,getLength:a,getOpposite:t=>n(-t.x,-t.y),getPerp:()=>n(-o,r),isEqualTo:t=>r==t.x&&o==t.y,multiply:t=>{r*=t.x,o*=t.y},multiplyScalar:d,normalise:s,setLength:t=>{s(),d(t)},subtract:t=>{r-=t.x,o-=t.y},subtractScalar:t=>{r-=t,o-=t},set x(t){r=t},get x(){return r},set y(t){o=t},get y(){return o}}}const i=t=>n(t.x,t.y);t.exports={clone:i,create:n,fromDegrees:t=>{const e=t*(Math.PI/180);return n(Math.cos(e),Math.sin(e))}}}]);
+window.snowfall=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){const i=n(1),{lerp:r}=n(2),o=document.querySelector("#snow-container"),a=document.createElement("canvas"),d=a.getContext("2d");let s=i.create(0,.7),l=i.create(0,0),c=200,u=[],f="#0d0014",h="#8d90b7",y="#ffffff",g=1,p=.02,v=!1,m=!1;function w(e,t){(s=i.fromDegrees(e)).multiplyScalar(t)}function x(e,t){(l=i.fromDegrees(e)).multiplyScalar(t)}function S(){a.width=o.offsetWidth,a.height=o.offsetHeight,u=O(q())}function b(){u.forEach(e=>{z.x=l.x,z.y=l.y,z.multiplyScalar(e.size+e.random),e.pos.add(z),P.x=s.x,P.y=s.y,P.multiplyScalar(e.size+e.random),e.pos.add(P);const t=e.noise;let n=i.create(g*Math.sin(p*M+t),0);e.pos.add(n),e.pos.x>a.width&&(e.pos.x=0),e.pos.x<0&&(e.pos.x=a.width),e.pos.y>a.height&&(e.pos.y=e.pos.y-a.height,e.pos.x=Math.random()*a.width),e.pos.y<0&&(e.pos.y=a.height-e.pos.y,e.pos.x=Math.random()*a.width),e.renderedSize<e.size&&(e.renderedSize=r(e.renderedSize,e.size,.025))}),previousPageYOffset=window.pageYOffset,M+=1,function(){d.clearRect(0,0,a.width,a.height),f&&(d.fillStyle=f,d.fillRect(0,0,a.width,a.height));const e=u.filter(e=>e.size>=7),t=u.filter(e=>e.size<7);d.fillStyle=h,t.forEach(e=>{d.beginPath(),j(e.pos,e.renderedSize),d.fill()}),d.fillStyle=y,e.forEach(e=>{d.beginPath(),j(e.pos,e.renderedSize),d.fill()})}(),window.requestAnimationFrame(b)}let M=0;const z=i.create(0,0),P=i.create(0,0);function O(e){let t=[];for(;e--;){const e=3+5*Math.random(),n=!0===v?0:e;t.push({pos:i.create(Math.random()*a.width,Math.random()*a.height),size:e,renderedSize:n,noise:10*Math.random(),amplitude:2*Math.random(),frequency:.01*Math.random(),random:Math.random()})}return t}function q(){const e=a.width*a.height;return Math.round(c*(e/2073600))}function j(e,t){d.arc(e.x,e.y,t,0,2*Math.PI,!1)}function _(){u=O(q())}e.exports={setAmplitude:function(e){g=e},setBackground:function(e){f=e},setDensity:function(e){c=e,_()},setFade:function(e){v=e,_()},setScroll:function(e){m=e},setFrequency:function(e){p=e},setGravity:w,setPrimary:function(e){h=e},setSecondary:function(e){y=e},setWind:x,start:function(e={}){void 0!==e.bg&&(f=e.bg),void 0!==e.primary&&(h=e.primary),void 0!==e.secondary&&(y=e.secondary),void 0!==e.density&&(c=e.density),void 0!==e.fadeIn&&(v=e.fadeIn),void 0!==e.scroll&&(m=e.scroll),void 0!==e.wave&&(void 0!==e.wave.amplitude&&(g=e.wave.amplitude),void 0!==e.wave.frequency&&(p=e.wave.frequency)),void 0!==e.gravity&&(void 0!==e.gravity.angle&&void 0!==e.gravity.strength&&w(e.gravity.angle,e.gravity.strength),void 0!==e.gravity.angle&&void 0===e.gravity.strength&&w(e.gravity.angle,.7),void 0===e.gravity.angle&&void 0!==e.gravity.strength&&w(90,e.gravity.strength)),void 0!==e.wind&&(void 0!==e.wind.angle&&void 0!==e.wind.strength&&x(e.wind.angle,e.wind.strength),void 0!==e.wind.angle&&void 0===e.wind.strength&&x(e.wind.angle,0),void 0===e.wind.angle&&void 0!==e.wind.strength&&x(0,e.wind.strength)),a.width=o.offsetWidth,a.height=o.offsetHeight,o.appendChild(a),u=O(q()),window.onresize=S,window.requestAnimationFrame(b)}}},function(e,t){function n(e,t){let r=e,o=t;const a=()=>Math.sqrt(r*r+o*o),d=e=>{r*=e,o*=e},s=()=>{let e=a();r/=e,o/=e};return{add:e=>{r+=e.x,o+=e.y},addScalar:e=>{r+=e,o+=e},clone:i,divide:e=>{r/=e.x,o/=e.y},divideScalar:e=>{r/=e,o/=e},dot:e=>r*e.x+o*e.y,getLength:a,getOpposite:e=>n(-e.x,-e.y),getPerp:()=>n(-o,r),isEqualTo:e=>r==e.x&&o==e.y,multiply:e=>{r*=e.x,o*=e.y},multiplyScalar:d,normalise:s,setLength:e=>{s(),d(e)},subtract:e=>{r-=e.x,o-=e.y},subtractScalar:e=>{r-=e,o-=e},set x(e){r=e},get x(){return r},set y(e){o=e},get y(){return o}}}const i=e=>n(e.x,e.y);e.exports={clone:i,create:n,fromDegrees:e=>{const t=e*(Math.PI/180);return n(Math.cos(t),Math.sin(t))}}},function(e,t){e.exports={lerp:function(e,t,n){return e*(1-n)+t*n}}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erikwatson/snowfall",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "description": "Nice snow in a JS Canvas.",
   "main": "dist/snowfall.min.js",
   "repository": "git@github.com:erikwatson/snowfall.js.git",
@@ -16,6 +16,7 @@
     "build": "yarn webpack --config ./webpack.development.js",
     "build:production": "yarn webpack --config ./webpack.production.js",
     "build:all": "yarn build && yarn build:production",
+    "build:docs": "yarn jsdoc src/snowfall.js -d ./docs README.md",
     "watch": "yarn run build --watch",
     "pub": "yarn build:all && npm publish"
   },