sprinkler - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

examples/img/README.md

@@ -37,1 +37,21 @@ # Image origins and licenses
 ![](1cent.png)
+
+## heart.png
+CC0 Public domain
+http://www.publicdomainfiles.com/show_file.php?id=13929149426536
+![](heart.png)
+
+## heartpile.png
+CC0 Public domain
+http://www.publicdomainfiles.com/show_file.php?id=13920055216216
+![](heartpile.png)
+
+## chocice.png
+CC0 Public domain
+http://www.publicdomainfiles.com/show_file.php?id=13925019013186
+![](chocice.png)
+
+## fire.png
+CC0 Public domain
+http://www.publicdomainfiles.com/show_file.php?id=13925184611665
+![](fire.png)

package.json

 {
   "name": "sprinkler",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Make awesome sprite rain effects on canvas. Give a canvas and a list of image paths and start() to make it rain!",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,7 +0,9 @@
-# sprinkler.js<sup>v0.3.0</sup>
+# sprinkler.js<sup>v0.4.0</sup>
 
-With Sprinkler you can make awesome sprite rain effects on canvas. Give it a canvas element and a list of image paths and call start() to make it rain bananas or frogs or anything you can imagine!
+With Sprinkler you can create an image rain on canvas. Give it a canvas element and a list of image paths and call start() to make it rain bananas or frogs or anything you can imagine!
 
+Compatible with all the [browsers that support canvas](http://caniuse.com/#feat=canvas).
 
 
+
 ## Examples
@@ -11,3 +13,5 @@
 - [Money](http://rawgit.com/axelpale/sprinkler/master/examples/money.html)
+- [Fire](http://rawgit.com/axelpale/sprinkler/master/examples/fire.html)
 - [Bananas](http://rawgit.com/axelpale/sprinkler/master/examples/bananas.html)
+- [Love](http://rawgit.com/axelpale/sprinkler/master/examples/love.html)
 
@@ -28,3 +32,3 @@
     ];
-    s.load(images, function (start) {
+    s.load(images, function (err, start) {
       start();
@@ -60,6 +64,9 @@ });
 
-### #load(imagePaths, callback(start))
+### #load(imagePaths, callback(err, start))
 
+Loads image files specified by the image source paths in `imagePaths` and then calls the `callback`. Returns nothing.
+
 `imagePaths`, an array of image source paths.
 
+
 ### start(options)
@@ -73,5 +80,41 @@
 
-- selectImages, an array of indices of the images to be used
-- imagesInSecond, an average number of dropped images in a second
+- `selectImages`, an array of indices of the images to be used
+- `imagesInSecond`, an average number of dropped images in a second
+- `zMin` and `zMax`, range for initial scale, __z__, in [0, Inf]
+- `rMin` and `rMax`, range for initial __r__otation, in [0, 2*Math.PI]
+- `aMin` and `aMax`, range for initial transparency (__a__lpha), in [0, 1]
+- `dxMin` and `dxMax`, range for horizontal velocity, in [-Inf, Inf]
+- `dyMin` and `dyMax`, range for vertical velocity, in [0, Inf]
+- `dzMin` and `dzMax`, range for scale velocity, in [-Inf, Inf]
+- `drMin` and `drMax`, range for rotation velocity, in [-Inf, Inf]
+- `daMin` and `daMax`, range for transparency velocity, in [-Inf, Inf]
+- `ddxMin` and `ddxMax`, range for horizontal acceleration, in [-Inf, Inf]
+- `ddyMin` and `ddyMax`, range for vertical acceleration, in [0, Inf]
+- `ddzMin` and `ddzMax`, range for scale acceleration, in [-Inf, Inf]
+- `ddrMin` and `ddrMax`, range for rotation acceleration, in [-Inf, Inf]
+- `ddaMin` and `ddaMax`, range for transparency acceleration, in [-Inf, Inf]
 
+Values are picked randomly but uniformly from the given __ranges__.
+
+Default values are:
+
+    {
+      selectImages: [all],
+      imagesInSecond: 7,
+      zMin: 0.38, zMax: 1,
+      rMin: 0, rMax: 2 * Math.PI,
+      aMin: 1, aMax: 1,
+      dxMin: -1, dxMax: 1,
+      dyMin: 100, dyMax: 100,
+      dzMin: 0, dzMax: 0,
+      drMin: -1, drMax: 1,
+      daMin: 0, daMax: 0,
+      ddxMin: 0, ddxMax: 0,
+      ddyMin: 0, ddyMax: 0,
+      ddzMin: 0, ddzMax: 0,
+      ddrMin: 0, ddrMax: 0,
+      ddaMin: 0, ddaMax: 0,
+    }
+
+
 ### stop()
@@ -95,4 +138,3 @@
 
-- implementation.
-- tests
+- improved tests
 
@@ -99,0 +141,0 @@

sprinkler.js

@@ -29,4 +29,5 @@ // *****************************
     // Calls then after all the images were loaded.
-    var i, imgs, numberOfImages, onload, onloadsCalled;
+    var i, imgs, numberOfImages, onload, onloadsCalled, thereWasError;
     numberOfImages = imgSrcs.length;
+    thereWasError = false;
 
@@ -39,12 +40,26 @@ imgs = [];
       //   this = Image
-      onloadsCalled += 1;
-      var isFinalImage = (onloadsCalled === numberOfImages);
-      if (isFinalImage) {
-        then(null, imgs);
+      if (!thereWasError) {
+        onloadsCalled += 1;
+        var isFinalImage = (onloadsCalled === numberOfImages);
+        if (isFinalImage) {
+          then(null, imgs);
+        }
       }
     };
 
+    onerror = function (errMsg) {
+      // Note:
+      //   this = Image
+      thereWasError = true;
+      then(errMsg, null);
+
+      // Prevent firing the default event handler
+      // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onerror#Parameters
+      return true;
+    };
+
     for (i = 0; i < imgSrcs.length; i += 1) {
       imgs.push(new Image());
       imgs[i].onload = onload;
+      imgs[i].onerror = onerror;
       imgs[i].src = imgSrcs[i];
@@ -155,3 +170,3 @@ }
     this.r += this.dr * dt;
-    this.a += Math.min(1, Math.max(0, this.a + this.da * dt));
+    this.a = Math.min(1, Math.max(0, this.a + this.da * dt));
     this.dx += this.ddx * dt;
@@ -355,5 +370,5 @@ this.dy += this.ddy * dt;
       //   callback
-      //     function (start)
+      //     function (err, start)
       loadImages(imagePaths, function then(err, imageElements) {
-        if (err) { console.error(err); return; }
+        if (err) { callback(err, null) }
 
@@ -373,3 +388,3 @@ var loadId = Math.random().toString();
             selectImages: imageElements,
-            zMin: 1, zMax: 1,
+            zMin: 0.38, zMax: 1,
             rMin: 0, rMax: 2 * Math.PI,
@@ -412,3 +427,3 @@ aMin: 1, aMax: 1,
 
-        callback(start);
+        callback(null, start);
       });
@@ -452,4 +467,4 @@ };
   // *******
-  exports.version = '0.3.0';
+  exports.version = '0.4.0';
 
 }));

sprinkler.min.js

@@ -1,2 +0,2 @@
-!function(t,n){"use strict";"function"==typeof define&&define.amd?define(["exports"],n):n("object"==typeof exports?exports:t.Sprinkler={})}(this,function(t){"use strict";var n=function(t,n){var i,d,a,e,r;for(a=t.length,d=[],r=0,e=function(){r+=1;var t=r===a;t&&n(null,d)},i=0;i<t.length;i+=1)d.push(new Image),d[i].onload=e,d[i].src=t[i]},i=function(t,n){var i=n-t;return t+i*Math.random()},d=function(t){var n=0,d=t.length,a=i(n,d),e=Math.floor(a),r=e;return t[r]},a=function(t){var n,i,d,a;n=Math.exp(-t),i=0,d=1;do i+=1,a=Math.random(),d*=a;while(d>n);return i-1},e=function(t,n){var i;for(i in t)t.hasOwnProperty(i)&&n.hasOwnProperty(i)&&typeof t[i]==typeof n[i]&&(n[i]=t[i])},r=function(t){var n=function(){t.width=window.innerWidth,t.height=window.innerHeight};window.addEventListener("resize",n,!1),n()},h=function(t,n,i,d,a,e,r,h,o,s,M,f,x,c,u,l,g,y){this.x=t,this.y=n,this.z=i,this.r=d,this.a=a,this.dx=e,this.dy=r,this.dz=h,this.dr=o,this.da=s,this.ddx=M,this.ddy=f,this.ddz=x,this.ddr=c,this.dda=u,this.img=l,this.w=g,this.h=y};h.prototype.tick=function(t){this.x+=this.dx*t,this.y+=this.dy*t,this.z+=this.dz*t,this.r+=this.dr*t,this.a+=Math.min(1,Math.max(0,this.a+this.da*t)),this.dx+=this.ddx*t,this.dy+=this.ddy*t,this.dz+=this.ddz*t,this.dr+=this.ddr*t,this.da+=this.dda*t};var o=function(t){var o={},s=[],M=!1,f=null,x=t.getContext("2d");r(t);var c=function(n){var a,e,r;return a=t.width,e=t.height,r=d(n.selectImages),new h(i(0,a),-n.zMax*Math.max(r.width,r.height)/2,i(n.zMin,n.zMax),i(n.rMin,n.rMax),i(n.aMin,n.aMax),i(n.dxMin,n.dxMax),i(n.dyMin,n.dyMax),i(n.dzMin,n.dzMax),i(n.drMin,n.drMax),i(n.daMin,n.daMax),i(n.ddxMin,n.ddxMax),i(n.ddyMin,n.ddyMax),i(n.ddzMin,n.ddzMax),i(n.ddrMin,n.ddrMax),i(n.ddaMin,n.ddaMax),r,r.width,r.height)},u=function(t,n){var i,d=t.imagesInSecond,e=n*d,r=a(e);for(i=0;r>i;i+=1)s.push(c(t))},l=function(n){var i,d,a,e,r,h,M,f,x,c,l;for(i=0;i<s.length;i+=1)s[i].tick(n);for(d in o)if(o.hasOwnProperty(d)){e=o[d];for(a in e)e.hasOwnProperty(a)&&(r=e[a],u(r,n))}for(h=t.height,M=[],i=0;i<s.length;i+=1)x=s[i].w,c=s[i].h,l=s[i].z*Math.max(x,c)/2,f=s[i].y<h+l,f&&M.push(s[i]);s=M},g=function(){var n,i,d;for(x.clearRect(0,0,t.width,t.height),n=0;n<s.length;n+=1)x.globalAlpha=s[n].a,i=s[n].z*s[n].w,d=s[n].z*s[n].h,x.translate(s[n].x,s[n].y),x.rotate(s[n].r),x.drawImage(s[n].img,-Math.floor(i/2),-Math.floor(d/2),i,d),x.setTransform(1,0,0,1,0,0),x.globalAlpha=1},y=function w(){var t,n;t=Date.now(),n=null===f?0:t-f,f=t,l(n/1e3),g(),M&&window.requestAnimationFrame(w)},p=function(){M||(M=!0,y())};this.load=function(t,i){n(t,function(t,n){if(t)return void console.error(t);var d=Math.random().toString();o[d]={},o[d].images=n;var a=function(t){var i,a;if("undefined"==typeof t&&(t={}),a={type:"default",selectImages:n,zMin:1,zMax:1,rMin:0,rMax:2*Math.PI,aMin:1,aMax:1,dxMin:-1,dxMax:1,dyMin:100,dyMax:100,dzMin:0,dzMax:0,drMin:-1,drMax:1,daMin:0,daMax:0,ddxMin:0,ddxMax:0,ddyMin:0,ddyMax:0,ddzMin:0,ddzMax:0,ddrMin:0,ddrMax:0,ddaMin:0,ddaMax:0,imagesInSecond:7,stopAfter:1/0,onStop:function(){}},t.hasOwnProperty("selectImages"))for(i=0;i<t.selectImages.length;i+=1)t.selectImages[i]=n[t.selectImages[i]];e(t,a),t=a;var r=Math.random().toString();return o[d][r]=t,p(),function(){delete o[d][r]}};i(a)})}};t.create=function(t,n){return new o(t,n)},t.extension=o.prototype,t.version="0.3.0"});
+!function(t,n){"use strict";"function"==typeof define&&define.amd?define(["exports"],n):n("object"==typeof exports?exports:t.Sprinkler={})}(this,function(t){"use strict";var n=function(t,n){var i,d,a,r,e,h;for(a=t.length,h=!1,d=[],e=0,r=function(){if(!h){e+=1;var t=e===a;t&&n(null,d)}},onerror=function(t){return h=!0,n(t,null),!0},i=0;i<t.length;i+=1)d.push(new Image),d[i].onload=r,d[i].onerror=onerror,d[i].src=t[i]},i=function(t,n){var i=n-t;return t+i*Math.random()},d=function(t){var n=0,d=t.length,a=i(n,d),r=Math.floor(a),e=r;return t[e]},a=function(t){var n,i,d,a;n=Math.exp(-t),i=0,d=1;do i+=1,a=Math.random(),d*=a;while(d>n);return i-1},r=function(t,n){var i;for(i in t)t.hasOwnProperty(i)&&n.hasOwnProperty(i)&&typeof t[i]==typeof n[i]&&(n[i]=t[i])},e=function(t){var n=function(){t.width=window.innerWidth,t.height=window.innerHeight};window.addEventListener("resize",n,!1),n()},h=function(t,n,i,d,a,r,e,h,o,s,M,f,x,u,c,l,g,y){this.x=t,this.y=n,this.z=i,this.r=d,this.a=a,this.dx=r,this.dy=e,this.dz=h,this.dr=o,this.da=s,this.ddx=M,this.ddy=f,this.ddz=x,this.ddr=u,this.dda=c,this.img=l,this.w=g,this.h=y};h.prototype.tick=function(t){this.x+=this.dx*t,this.y+=this.dy*t,this.z+=this.dz*t,this.r+=this.dr*t,this.a=Math.min(1,Math.max(0,this.a+this.da*t)),this.dx+=this.ddx*t,this.dy+=this.ddy*t,this.dz+=this.ddz*t,this.dr+=this.ddr*t,this.da+=this.dda*t};var o=function(t){var o={},s=[],M=!1,f=null,x=t.getContext("2d");e(t);var u=function(n){var a,r,e;return a=t.width,r=t.height,e=d(n.selectImages),new h(i(0,a),-n.zMax*Math.max(e.width,e.height)/2,i(n.zMin,n.zMax),i(n.rMin,n.rMax),i(n.aMin,n.aMax),i(n.dxMin,n.dxMax),i(n.dyMin,n.dyMax),i(n.dzMin,n.dzMax),i(n.drMin,n.drMax),i(n.daMin,n.daMax),i(n.ddxMin,n.ddxMax),i(n.ddyMin,n.ddyMax),i(n.ddzMin,n.ddzMax),i(n.ddrMin,n.ddrMax),i(n.ddaMin,n.ddaMax),e,e.width,e.height)},c=function(t,n){var i,d=t.imagesInSecond,r=n*d,e=a(r);for(i=0;e>i;i+=1)s.push(u(t))},l=function(n){var i,d,a,r,e,h,M,f,x,u,l;for(i=0;i<s.length;i+=1)s[i].tick(n);for(d in o)if(o.hasOwnProperty(d)){r=o[d];for(a in r)r.hasOwnProperty(a)&&(e=r[a],c(e,n))}for(h=t.height,M=[],i=0;i<s.length;i+=1)x=s[i].w,u=s[i].h,l=s[i].z*Math.max(x,u)/2,f=s[i].y<h+l,f&&M.push(s[i]);s=M},g=function(){var n,i,d;for(x.clearRect(0,0,t.width,t.height),n=0;n<s.length;n+=1)x.globalAlpha=s[n].a,i=s[n].z*s[n].w,d=s[n].z*s[n].h,x.translate(s[n].x,s[n].y),x.rotate(s[n].r),x.drawImage(s[n].img,-Math.floor(i/2),-Math.floor(d/2),i,d),x.setTransform(1,0,0,1,0,0),x.globalAlpha=1},y=function w(){var t,n;t=Date.now(),n=null===f?0:t-f,f=t,l(n/1e3),g(),M&&window.requestAnimationFrame(w)},p=function(){M||(M=!0,y())};this.load=function(t,i){n(t,function(t,n){t&&i(t,null);var d=Math.random().toString();o[d]={},o[d].images=n;var a=function(t){var i,a;if("undefined"==typeof t&&(t={}),a={type:"default",selectImages:n,zMin:.38,zMax:1,rMin:0,rMax:2*Math.PI,aMin:1,aMax:1,dxMin:-1,dxMax:1,dyMin:100,dyMax:100,dzMin:0,dzMax:0,drMin:-1,drMax:1,daMin:0,daMax:0,ddxMin:0,ddxMax:0,ddyMin:0,ddyMax:0,ddzMin:0,ddzMax:0,ddrMin:0,ddrMax:0,ddaMin:0,ddaMax:0,imagesInSecond:7,stopAfter:1/0,onStop:function(){}},t.hasOwnProperty("selectImages"))for(i=0;i<t.selectImages.length;i+=1)t.selectImages[i]=n[t.selectImages[i]];r(t,a),t=a;var e=Math.random().toString();return o[d][e]=t,p(),function(){delete o[d][e]}};i(null,a)})}};t.create=function(t,n){return new o(t,n)},t.extension=o.prototype,t.version="0.4.0"});
 //# sourceMappingURL=sprinkler.min.js.map

src/sprinkler.js

@@ -29,4 +29,5 @@ // *****************************
     // Calls then after all the images were loaded.
-    var i, imgs, numberOfImages, onload, onloadsCalled;
+    var i, imgs, numberOfImages, onload, onloadsCalled, thereWasError;
     numberOfImages = imgSrcs.length;
+    thereWasError = false;
 
@@ -39,12 +40,26 @@ imgs = [];
       //   this = Image
-      onloadsCalled += 1;
-      var isFinalImage = (onloadsCalled === numberOfImages);
-      if (isFinalImage) {
-        then(null, imgs);
+      if (!thereWasError) {
+        onloadsCalled += 1;
+        var isFinalImage = (onloadsCalled === numberOfImages);
+        if (isFinalImage) {
+          then(null, imgs);
+        }
       }
     };
 
+    onerror = function (errMsg) {
+      // Note:
+      //   this = Image
+      thereWasError = true;
+      then(errMsg, null);
+
+      // Prevent firing the default event handler
+      // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onerror#Parameters
+      return true;
+    };
+
     for (i = 0; i < imgSrcs.length; i += 1) {
       imgs.push(new Image());
       imgs[i].onload = onload;
+      imgs[i].onerror = onerror;
       imgs[i].src = imgSrcs[i];
@@ -155,3 +170,3 @@ }
     this.r += this.dr * dt;
-    this.a += Math.min(1, Math.max(0, this.a + this.da * dt));
+    this.a = Math.min(1, Math.max(0, this.a + this.da * dt));
     this.dx += this.ddx * dt;
@@ -355,5 +370,5 @@ this.dy += this.ddy * dt;
       //   callback
-      //     function (start)
+      //     function (err, start)
       loadImages(imagePaths, function then(err, imageElements) {
-        if (err) { console.error(err); return; }
+        if (err) { callback(err, null) }
 
@@ -373,3 +388,3 @@ var loadId = Math.random().toString();
             selectImages: imageElements,
-            zMin: 1, zMax: 1,
+            zMin: 0.38, zMax: 1,
             rMin: 0, rMax: 2 * Math.PI,
@@ -412,3 +427,3 @@ aMin: 1, aMax: 1,
 
-        callback(start);
+        callback(null, start);
       });
@@ -452,4 +467,4 @@ };
   // *******
-  exports.version = '0.3.0';
+  exports.version = '0.4.0';
 
 }));

No alert changes

Improved metrics

Total package byte prevSize

162981

increased by33.61%

Number of package files

28

increased by27.27%

Lines of code

862

increased by3.73%

Number of lines in readme file

147

increased by40%

No dependency changes