react-image-particles/build/index.js

Create interactive particle effects from an image.

(()=>{"use strict";var t={n:e=>{var i=e&&e.__esModule?()=>e.default:()=>e;return t.d(i,{a:i}),i},d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>c});const i=require("react");var r=t.n(i);function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function o(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=function(t,e){if(t){if("string"==typeof t)return a(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?a(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var r=0,n=function(){};return{s:n,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,s=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return l=t.done,t},e:function(t){s=!0,o=t},f:function(){try{l||null==i.return||i.return()}finally{if(s)throw o}}}}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,h(r.key),r)}}function u(t,e,i){return e&&s(t.prototype,e),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function h(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,"string");if("object"!=n(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:String(e)}function c(t){var e=t.path,n=t.width,a=void 0===n?200:n,s=t.height,h=void 0===s?200:s,c=t.particleSize,f=void 0===c?2:c,d=t.numParticles,y=void 0===d?null:d,v=(t.children,(0,i.useRef)(null)),p=(a+h)/12,b=p*p,m=f*f,g=!1,w=[],M=Math.ceil(h/p),P=Math.ceil(a/p);return(0,i.useEffect)((function(){for(var t=function(){function t(){l(this,t),this.particles=new Set}return u(t,[{key:"addParticle",value:function(t){this.particles.add(t)}},{key:"removeParticle",value:function(t){this.particles.delete(t)}}]),t}(),i=0;i<M;i++){w[i]=[];for(var r=0;r<P;r++)w[i][r]=new t}var n=v.current,s=n.getContext("2d"),c=null!==y,d=null!==y?y:1e3;n.width=a,n.height=h;var S=[],x=!1,G={x:null,y:null,radius:p};function C(t){var e=t.width,i=t.height,r=new OffscreenCanvas(e,i).getContext("2d");return r.drawImage(t,0,0),r.getImageData(0,0,e,i)}window.addEventListener("mousemove",(function(t){var e=n.getBoundingClientRect();G.x=t.clientX-e.left,G.y=t.clientY-e.top,x=!0})),window.addEventListener("load",(function(){g||(fetch(e).then((function(t){return t.blob()})).then(createImageBitmap).then(C).then((function(t){var e,i;e=t,i=function(){function t(e,i,r,n){l(this,t),this.x=e,this.y=i,this.color=r,this.size=n,this.baseX=this.x,this.baseY=this.y,this.density=30*Math.random()+1,this.positionGridRow=Math.floor(this.y/p),this.positionGridCol=Math.floor(this.x/p)}return u(t,[{key:"draw",value:function(){s.fillStyle=this.color,s.beginPath(),s.arc(this.x,this.y,this.size,0,2*Math.PI),s.closePath(),s.fill()}},{key:"calculateGridPosition",value:function(){var t=Math.floor(this.y/p),e=Math.floor(this.x/p);t===this.positionGridRow&&e===this.positionGridCol||(t>=0&&t<M&&e>=0&&e<P?(-1!==this.positionGridCol&&-1!==this.positionGridRow&&w[this.positionGridRow][this.positionGridCol].removeParticle(this),w[t][e].addParticle(this),this.positionGridRow=t,this.positionGridCol=e):(this.positionGridRow=-1,this.positionGridCol=-1))}},{key:"update",value:function(){var t=G.x-this.x,e=G.y-this.y,i=Math.abs(t*t+e*e);if(x&&i<b+m){var r=e/p,n=1-i/b,o=t/p*n*this.density,a=r*n*this.density;this.x-=o,this.y-=a,this.calculateGridPosition()}}},{key:"applyForceBackToOriginalPosition",value:function(){this.x-=(this.x-this.baseX)/15,this.y-=(this.y-this.baseY)/15,this.calculateGridPosition()}}]),t}(),function(){S=[];var t=e.data.filter((function(t,i){return i%4==3&&e.data[i]>128})).length;d=Math.min(d,t);for(var r=0,o=e.height;r<o;r++)for(var a=0,l=e.width;a<l;a++)if(e.data[4*r*e.width+4*a+3]>128){if(c&&d<t&&Math.random()>d/t)continue;var s=.1*n.width+.8*Math.floor(a/e.width*n.width),u=.1*n.height+.8*Math.floor(r/e.height*n.height),h=4*r*e.width+4*a,y="rgb("+e.data[h]+","+e.data[h+1]+","+e.data[h+2]+")";S.push(new i(s,u,y,f));var v=Math.floor(u/p),b=Math.floor(s/p);w[v][b].particles.add(S[S.length-1])}}(),function t(){requestAnimationFrame(t),s.clearRect(0,0,n.width,n.height);var e=Math.floor(G.y/p),i=Math.floor(G.x/p),r=[[0,1],[0,-1],[1,1],[1,-1],[1,0],[-1,0],[0,0],[-1,-1],[-1,1]];if(x)for(var a=0;a<r.length;++a){var l=e+r[a][0],u=i+r[a][1];if(!(l<0||l>=M||u<0||u>=P)){var h,c=o(w[l][u].particles);try{for(c.s();!(h=c.n()).done;)h.value.update()}catch(t){c.e(t)}finally{c.f()}}}for(var f=0;f<S.length;f++)S[f].x===S[f].baseX&&S[f].y===S[f].baseY||S[f].applyForceBackToOriginalPosition(),S[f].draw();x=!1}()})),g=!0)}))}),[]),r().createElement("canvas",{ref:v})}module.exports=e})();