whisper.cat/weboasis/js/canvas/circuits.js

1 line
7.8 KiB
JavaScript
Raw Normal View History

2023-10-05 23:28:32 +11:00
function runCircuitsAnimation(){function a(){o.clearRect(0,0,f,g),j.draw(),o.drawImage(j.canvas,0,0),requestAnimationFrame(a)}class b{constructor(a){this.rows=Array.apply(null,Array(a)).map(()=>0),this.free=a}}class c{constructor(a,b){this.start=a,this.cellSize=b,this.path=[],this.end=null,this.things=[],this.length=0,this.coords=[]}}class d{constructor(a,b,c=0){this.circuit=a,this.velocity=b,this.done=c,this.x=0,this.y=0,this.dots=[]}update(){const a=this.circuit,b=a.cellSize;let c=0,d=0;const e=a.length,f=a.start,g=a.end,h=a.path;if(this.done+=this.velocity,0>=this.done?(this.done=0,this.velocity=-this.velocity):this.done>=e&&(this.done=e,this.velocity=-this.velocity),this.done<=b/2)c=f[0]*b+b/2+this.done*h[0][0],d=f[1]*b+b/2+this.done*h[0][1];else if(this.done>e-b/2)c=g[0]*b+b/2-(e-this.done)*h[h.length-1][0],d=g[1]*b+b/2-(e-this.done)*h[h.length-1][1];else{const e=~~(this.done/b),f=this.done-e*b,g=[h[e][0],h[e][1]],i=a.coords[e];c=i[0]*b+b/2+f*g[0],d=i[1]*b+b/2+f*g[1]}c=~~c,d=~~d,this.x=c,this.y=d}distFromSister(){const a=this.circuit;let b=1/0,c=null;return a.things.forEach(a=>{a!==this&&(c=Math.abs(a.done-this.done),c<b&&(b=c))}),b}}const e=document.createElement("canvas"),f=e.width=window.innerWidth,g=e.height=window.innerHeight,h=e.getContext("2d");e.className="background",document.getElementById("canvasContainer").appendChild(e);const i=new class{constructor(a,b,c){this.spacing=c,this.dots=[],this.alphaStep=1/10,this.cols=Math.floor(a/c),this.rows=Math.floor(b/c);const d=document.createElement("canvas"),e=d.getContext("2d");d.className="background",document.getElementById("canvasContainer").appendChild(d),d.width=a,d.height=b,this.canvas=d,this.ctx=e,this.draw()}draw(){const a=this.ctx,b=this.spacing;a.fillStyle="rgba(24, 129, 141, .1)",this.dots=Array.apply(null,Array(this.cols)).map((c,d)=>Array.apply(null,Array(this.rows)).map((c,e)=>{let f={opacity:.1,x:d*b,y:e*b};return a.fillRect(f.x,f.y,1,1),f}))}ghost(){const a=document.createElement("canvas");a.className="background",document.getElementById("canvasContainer").appendChild(a),a.width=this.canvas.width,a.height=this.canvas.height;const b=a.getContext("2d");return b.fillStyle="rgb(24, 129, 141)",this.dots.forEach(a=>{a.forEach(a=>{b.fillRect(a.x,a.y,1,1)})}),a}}(f,g,2),j=new class{constructor(a,b){this.width=a,this.height=b,this.canvas=document.createElement("canvas"),this.canvas.className="background",document.getElementById("canvasContainer").appendChild(this.canvas),this.canvas.width=a,this.canvas.height=b,this.ctx=this.canvas.getContext("2d"),this.collection=[]}create(a,b,c=0){const e=new d(a,b,c);return this.collection.push(e),e}update(){this.collection.forEach(a=>{a.update()})}draw(){const a=this.ctx,b=this.lightRadius;let c=null,d=null,e=null;a.clearRect(0,0,this.width,this.height),this.collection.forEach(f=>{f.update(),c=this.ghostRadial,d=e=b,f.distFromSister()<=b/3&&(c=this.ghostSuperRadial,d=c.width/2,e=c.height/2),a.drawImage(c,f.x-d,f.y-e,c.width,c.height)}),a.save(),a.globalCompositeOperation="destination-in",a.drawImage(this.dotsGhost,0,0),a.restore(),a.save(),a.globalCompositeOperation="source-over",a.fillStyle="#afe3e9",this.collection.forEach(c=>{a.beginPath(),a.arc(c.x,c.y,b/6,0,2*Math.PI,!1),a.fill()}),a.restore()}setDotsGhost(a){this.dotsGhost=a}setLight(a){this.lightRadius=a,this.ghostRadial=document.createElement("canvas"),this.ghostRadial.className="background",document.getElementById("canvasContainer").appendChild(this.ghostRadial),this.ghostRadial.width=2*a,this.ghostRadial.height=2*a;const b=this.ghostRadial.getContext("2d");let c=b.createRadialGradient(a,a,a,a,a,0);c.addColorStop(0,"rgba(24, 129, 141, 0)"),c.addColorStop(1,"rgba(24, 129, 141, .6)"),b.fillStyle=c,b.fillRect(0,0,2*a,2*a),this.ghostSuperRadial=document.createElement("canvas"),this.ghostSuperRadial.className="background",document.getElementById("canvasContainer").appendChild(this.ghostSuperRadial);const d=this.ghostSuperRadial.width=15*a,e=this.ghostSuperRadial.height=20*a,f=this.ghostSuperRadial.getContext("2d");c=f.createRadialGradient(d/2,e/2,d/2,d/2,e/2,0),c.add