@flodlc/nebula
Version:
Including configurable Stars, Nebulas, Comets, Planets and Suns. Nebula comes with a vanilla JS and a React wrapper. Compatible with SSR
2 lines (1 loc) • 11.9 kB
JavaScript
"use strict";var H=Object.defineProperty;var p=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var R=(i,t,s)=>t in i?H(i,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[t]=s,x=(i,t)=>{for(var s in t||(t={}))I.call(t,s)&&R(i,s,t[s]);if(p)for(var s of p(t))P.call(t,s)&&R(i,s,t[s]);return i};var m=(i,t)=>{var s={};for(var e in i)I.call(i,e)&&t.indexOf(e)<0&&(s[e]=i[e]);if(i!=null&&p)for(var e of p(i))t.indexOf(e)<0&&P.call(i,e)&&(s[e]=i[e]);return s};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var C=require("react");function _(i){return i&&typeof i=="object"&&"default"in i?i:{default:i}}var q=_(C);const G={starsCount:400,starsColor:"#FFFFFF",starsRotationSpeed:3,cometFrequence:15,nebulasIntensity:10,bgColor:"rgb(8,8,8)",sunScale:1,planetsScale:1,solarSystemOrbite:65,solarSystemSpeedOrbit:100},O=i=>Object.assign({},G,i),g=i=>{const s=(i.includes("#")?z(i):i).split(/[\(|,|\)]/);return[parseInt(s[1],10),parseInt(s[2],10),parseInt(s[3],10)]};function z(i){let t="0",s="0",e="0";return i.length<=5?(t="0x"+i[1]+i[1],s="0x"+i[2]+i[2],e="0x"+i[3]+i[3]):i.length>=7&&(t="0x"+i[1]+i[2],s="0x"+i[3]+i[4],e="0x"+i[5]+i[6]),"rgb("+ +t+","+ +s+","+ +e+")"}const c=(i,t)=>`rgba(${i[0]}, ${i[1]}, ${i[2]}, ${t})`;class y{constructor({ctx:t}){this.ctx=t}getCanvasWidth(){return this.ctx.canvas.width}getCanvasHeight(){return this.ctx.canvas.height}get canvasMinSide(){return Math.min(this.getCanvasHeight(),this.getCanvasWidth())}get canvasMaxSide(){return Math.max(this.getCanvasHeight(),this.getCanvasWidth())}}class S extends y{constructor({ctx:t,width:s,speed:e,distance:h,rgb:n,origin:a,startAngle:r=Math.random()*360}){super({ctx:t});this.relativeWidth=s,this.rgb=n,this.speed=e,this.relativeDistance=h,this.origin=a,this.angle=Math.PI/180*(r!=null?r:0)}rotate(){this.angle=(this.angle+Math.PI/180*this.speed)%360}get width(){return this.relativeWidth/100*this.canvasMinSide}get distance(){return this.relativeDistance/100*this.canvasMinSide}getAngle(){return this.angle}getRefAngle(){var t,s;return this.getAngle()+((s=(t=this.origin)==null?void 0:t.getAngle())!=null?s:0)}getWidth(){return this.width}getOriginCoords(){if(this.origin){const t=this.origin.getOriginCoords();return[t[0]+Math.cos(this.origin.getAngle()+this.angle)*(this.distance+this.origin.getWidth()),t[1]+Math.sin(this.origin.getAngle()+this.angle)*(this.distance+this.origin.getWidth())]}else{const t=[this.getCanvasWidth()/2,this.getCanvasHeight()/2];return[t[0]+Math.cos(this.angle)*this.distance,t[1]+Math.sin(this.angle)*this.distance]}}}const M=i=>[Math.round(i[0]),Math.round(i[1])];class $ extends S{constructor(s){var t=m(s,[]);super(x({},t));this.draw=()=>{this.rotate(),this.ctx.shadowBlur=0,this.ctx.beginPath();const e=M(this.getOriginCoords());this.ctx.arc(...e,Math.round(this.width),0,Math.PI*2),this.ctx.closePath(),this.ctx.fillStyle=`rgba(${this.rgb[0]}, ${this.rgb[1]}, ${this.rgb[2]}, 1)`,this.ctx.fill()}}}const o={between:(i,t)=>i+Math.random()*(t-i),around:(i,t,s)=>(s==="%"&&(t=t*i),i-t+Math.random()*t*2),positiveOrNegative:()=>Math.random()>.5?1:-1,randomizeArray:i=>{const t=i.slice();for(let s=t.length-1;s>0;s--){const e=Math.floor(Math.random()*(s+1)),h=t[s];t[s]=t[e],t[e]=h}return t}},B=({stars:i,count:t,color:s,rotationSpeed:e,ctx:h})=>{let n;const a=t-i.length;if(a<=0)n=i.slice(0,t);else{const r=new Array(a).fill(0).map(()=>new $({ctx:h,width:o.between(.03,.1),distance:120*Math.pow(Math.random()*Math.random(),1/2),speed:o.around(e*.015,.005),rgb:g(s)}));n=i.concat(r)}return n.map(r=>(r.speed=o.around(e*.015,.005),r))},E=({canvas:i,drawings:t,bgColor:s,fps:e=0})=>{const h=i.width,n=i.height,a=i.getContext("2d");if(!a)return()=>{};a.save();let r,f=0,v=1e3/e;const b=()=>{if(e){r=requestAnimationFrame(b);const d=Date.now();if(d-f<v)return;f=d}a.clearRect(0,0,h,n),s&&(a.fillStyle=s,a.fillRect(0,0,h,n)),t.forEach(d=>d.draw())};return b(),()=>{a.restore(),r&&cancelAnimationFrame(r)}};class j extends S{constructor(s){var t=m(s,[]);super(x({},t));this.draw=()=>{this.rotate(),this.ctx.shadowBlur=0,this.ctx.beginPath();const e=M(this.getOriginCoords());this.ctx.arc(...e,Math.round(this.width),0,Math.PI*2),this.ctx.fillStyle="white",this.ctx.fill(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(...e,Math.round(this.width*5),0,Math.PI*2),this.ctx.closePath(),this.ctx.fillStyle=this.getGradiant(),this.ctx.fill()}}getGradiant(){const t=M(this.getOriginCoords()),s=this.ctx.createRadialGradient(...t,0,...t,Math.round(this.width*5));return s.addColorStop(0,c(this.rgb,.2)),s.addColorStop(.1,c(this.rgb,.3)),s.addColorStop(.16,c(this.rgb,.6)),s.addColorStop(.2,c(this.rgb,1)),s.addColorStop(.2,c(this.rgb,.4)),s.addColorStop(.23,c(this.rgb,.08)),s.addColorStop(.5,c(this.rgb,.02)),s.addColorStop(.9,c(this.rgb,.005)),s.addColorStop(1,c(this.rgb,0)),s}}class l extends S{constructor(s){var t=m(s,[]);super(x({},t));this.draw=()=>{this.rotate(),this.ctx.shadowBlur=0,this.ctx.beginPath();const e=M(this.getOriginCoords());this.ctx.arc(...e,Math.round(this.width),0,Math.PI*2),this.ctx.fillStyle="black",this.ctx.fill(),this.ctx.closePath();const h=this.ctx.createRadialGradient(Math.round(e[0]-.4*this.width*Math.cos(this.getRefAngle())),Math.round(e[1]-.4*this.width*Math.sin(this.getRefAngle())),0,...e,Math.round(this.width));h.addColorStop(0,c(this.rgb,1)),h.addColorStop(1,c(this.rgb,.5)),this.ctx.fillStyle=h,this.ctx.fill()}}}const V=({planets:i,sunScale:t,scale:s,rotationSpeed:e,distance:h,ctx:n})=>{const a=new j({ctx:n,width:3.8*.5*t,distance:h/2,startAngle:0,speed:.0033*e,rgb:g("rgb(208,141,16)")}),r=new l({ctx:n,width:.96*.5*s,distance:10*.5*s,speed:.01*e,rgb:g("rgb(19,102,150)"),origin:a});return[a,new l({ctx:n,width:.3*.5*s,distance:4.2,speed:.017*e,rgb:g("rgb(180, 144, 88)"),origin:a}),r,new l({ctx:n,width:.24*.5*s,distance:3.2*.5*s,speed:.0212*e,rgb:g("rgb(200, 200, 200)"),origin:r}),new l({ctx:n,width:.64*.5*s,distance:12.8*.5*s,speed:.0066*e,rgb:g("rgb(233, 88, 26)"),origin:a}),new l({ctx:n,width:1.44*.5*s,distance:17.6*.5*s,speed:.0046*e,rgb:g("rgb(169, 109, 45)"),origin:a}),new l({ctx:n,width:1.2*.5*s,distance:22*.5*s,speed:.004*e,rgb:g("rgb(164,127,84)"),origin:a}),new l({ctx:n,width:.76*.5*s,distance:25.2*.5*s,speed:.0037*e,rgb:g("rgb(84,149,164)"),origin:a}),new l({ctx:n,width:.62*.5*s,distance:27.2*.5*s,speed:.0033*e,rgb:g("rgb(36,82,154)"),origin:a})]},N=40,T=115;class Y extends y{constructor({ctx:t,frequence:s}){super({ctx:t});this.speed=T,this.x=0,this.y=0,this.opacity=0,this.draw=()=>{if(this.move(),!this.showConfig)return;this.ctx.save(),this.ctx.ellipse(this.x,this.y,this.showConfig.width,90,this.showConfig.direction+Math.PI/2,0,Math.PI*2),this.ctx.globalAlpha=this.opacity;const e=this.ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,90);e.addColorStop(0,c(this.showConfig.rgb,1)),e.addColorStop(1,c(this.showConfig.rgb,0)),this.ctx.fillStyle=e,this.ctx.fill(),this.ctx.restore()},this.ctx=t,this.frequence=s}move(){if(this.showConfig){this.x+=this.speed*Math.cos(this.showConfig.direction),this.y+=this.speed*Math.sin(this.showConfig.direction);const{x:s,y:e}=this.showConfig.startCoords,h=Math.sqrt(Math.pow(this.x-s,2)+Math.pow(this.y-e,2)),n=h/this.showConfig.distanceToTarget;this.opacity=Math.max(.7,Math.min(n<.3?n:1-n,1)),h>this.showConfig.distanceToTarget&&(this.showConfig=void 0);return}if(Math.random()>1-this.frequence/100/N){const s=o.between(0,2*Math.PI),e=Math.max(this.getCanvasHeight(),this.getCanvasWidth());this.showConfig={startCoords:{x:o.around(Math.cos(s)*e/3,.5,"%")+this.getCanvasWidth()/2,y:o.around(Math.sin(s)*e/3,.5,"%")+this.getCanvasHeight()/2},direction:o.between(s+Math.PI-Math.PI/6,s+Math.PI+Math.PI/6),distanceToTarget:o.around(e*.6,.3),speed:o.around(T,.15,"%"),rgb:g("rgb(255,207,207)"),width:o.between(.2,.8),startOpacity:0},this.x=this.showConfig.startCoords.x,this.y=this.showConfig.startCoords.y}}}const k=({ctx:i,frequence:t})=>new Array(1).fill(0).flatMap(()=>[new Y({ctx:i,frequence:t})]),W=.025,D=3,F=["rgb(6,2,122)","rgb(6,66,18)","#57046e"];class U extends y{constructor({ctx:t,intensity:s}){super({ctx:t});this.draw=()=>{const h=this.ctx.getImageData(0,0,this.getCanvasWidth(),this.getCanvasHeight()),n=this.getCanvasWidth(),a=Array.from(h.data);for(let r=0;r<a.length;r=r+4){const f=r/4,v=f%n,b=Math.floor(f/n);this.colorations.forEach(d=>{const u=J(d,v,b)*this.intensity;if(u>0)for(let w=0;w<3;w++)a[r+w]=u*d.rgb[w]+a[w+r]*(1-u)});for(let d=0;d<3;d++){const u=a[r+d];u>0&&(a[r+d]=Math.round(u-1+Math.random()))}}h.data.set(a),this.ctx.putImageData(h,0,0)},this.intensity=s*W;const e=X(F.length*D);this.colorations=F.flatMap(h=>new Array(D).fill(0).map(()=>{const n=e.pop();return{coords:{x:n.x*this.getCanvasWidth(),y:n.y*this.getCanvasHeight()},rgb:g(h),ratio:o.around(Math.PI/4,.2),width:o.between(5,8)*this.canvasMinSide*.08}}))}setIntensity(t){this.intensity=t*W}}const X=i=>{const t=Math.PI*2*Math.random(),s=new Array(i).fill(0).map((e,h)=>{const n=t+o.around(h*Math.PI*2/i,.32),a=o.between(.8,1.1);return{x:(Math.cos(n)*a+1)/2,y:(Math.sin(n)*a+1)/2}});return o.randomizeArray(s)},J=(i,t,s)=>{const e=t-i.coords.x,h=s-i.coords.y,n=Math.sqrt(Math.pow(e*Math.cos(i.ratio),2)+Math.pow(h*Math.sin(i.ratio),2)),a=(i.width-n)/i.width;return Math.max(a,0)},K=({ctx:i,coloration:t,intensity:s})=>t?(t.setIntensity(s),t):new U({ctx:i,intensity:s}),L="width: 100%;height: 100%;position:absolute;will-change:transform;top: 0;left:0;";class A{constructor({config:t,element:s}){this.cancelAnimations=[],this.stars=[],this.comets=[],this.planets=[],this.onResize=()=>{this.styleCanvas(),this.init()},this.styleCanvas=()=>{this.bgCanvas.setAttribute("style",L),this.bgCanvas.width=this.element.offsetWidth/3,this.bgCanvas.height=this.element.offsetHeight/3,this.canvas.setAttribute("style",L),this.canvas.width=this.element.offsetWidth*2,this.canvas.height=this.element.offsetHeight*2},this.element=s,this.bgCanvas=document.createElement("CANVAS"),this.canvas=document.createElement("CANVAS"),s.append(this.bgCanvas),s.append(this.canvas),this.styleCanvas(),window.addEventListener("resize",this.onResize),this.config=O(t),this.setConfig(t)}setConfig(t){this.config=O(t),this.coloration=K({coloration:this.coloration,ctx:this.bgCanvas.getContext("2d"),intensity:this.config.nebulasIntensity}),this.stars=B({stars:this.stars,ctx:this.canvas.getContext("2d"),color:this.config.starsColor,count:this.config.starsCount,rotationSpeed:this.config.starsRotationSpeed}),this.planets=V({planets:this.planets,sunScale:this.config.sunScale,scale:this.config.planetsScale,ctx:this.canvas.getContext("2d"),rotationSpeed:this.config.solarSystemSpeedOrbit,distance:this.config.solarSystemOrbite}),this.comets=k({ctx:this.canvas.getContext("2d"),frequence:this.config.cometFrequence}),this.init()}init(){this.draw()}draw(){this.cancelAnimations.forEach(t=>t()),this.cancelAnimations=[E({canvas:this.bgCanvas,drawings:[this.coloration],bgColor:this.config.bgColor}),E({canvas:this.canvas,drawings:[...this.stars,...this.comets,...this.planets],fps:N})]}destroy(){var t,s;window.removeEventListener("resize",this.onResize),this.cancelAnimations.forEach(e=>e()),this.cancelAnimations=[],(t=this.bgCanvas.parentElement)==null||t.removeChild(this.bgCanvas),(s=this.canvas.parentElement)==null||s.removeChild(this.canvas)}}const Q=({config:i={}})=>{const t=C.useRef(),s=C.useRef(null);return C.useLayoutEffect(()=>{var e;t.current&&((e=t.current)==null||e.setConfig(i))},[i]),C.useLayoutEffect(()=>(t.current||(t.current=new A({config:i,element:s.current})),()=>{var e;(e=t.current)==null||e.destroy(),t.current=void 0}),[]),q.default.createElement("div",{ref:s,style:{overflow:"hidden",background:"#0a1929",height:"100%",width:"100%",position:"absolute"}})},Z=(i,t)=>new A({config:t,element:i});exports.Nebula=A;exports.ReactNebula=Q;exports.createNebula=Z;