@mhg/blog
Version:
1 lines • 5.15 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="robots" content="noindex,nofollow,noarchive"><title>FLXG</title><style type="text/css">body,html{margin:0;width:100%;height:100vh;overflow:hidden;background:#000}#canvas{width:100%;height:100%}</style></head><body><canvas id="canvas"></canvas><script type="text/javascript">function project3D(a,s,e,t){var h,i;return a-=t.camX,s-=t.camY,e-=t.camZ,h=Math.atan2(a,e),i=Math.sqrt(a*a+e*e),a=Math.sin(h-t.yaw)*i,e=Math.cos(h-t.yaw)*i,h=Math.atan2(s,e),i=Math.sqrt(s*s+e*e),s=Math.sin(h-t.pitch)*i,e=Math.cos(h-t.pitch)*i,h=Math.atan2(a,s),i=Math.sqrt(a*a+s*s),a=Math.sin(h-t.roll)*i,s=Math.cos(h-t.roll)*i,{x:t.cx+a/e*t.scale,y:t.cy+s/e*t.scale,d:e>0?Math.sqrt(a*a+s*s+e*e):-1}}function rgb(a){a+=1e-6;var s=parseInt(16*(.5+.5*Math.sin(a))),e=parseInt(16*(.5+.5*Math.cos(a))),t=parseInt(16*(.5-.5*Math.sin(a)));return"#"+s.toString(16)+e.toString(16)+t.toString(16)}function process(a){a.scale-=8*Math.cos(a.frameNo/40),a.shipSpeed+=Math.cos(a.frameNo/40)/30,a.yaw+=Math.cos(a.frameNo/100)/80,a.pitch+=Math.sin(a.frameNo/70)/40,a.roll-=Math.cos(a.frameNo/130)/40,a.shipVX=Math.sin(a.yaw)*Math.cos(a.pitch)*a.shipSpeed,a.shipVZ=Math.cos(a.yaw)*Math.cos(a.pitch)*a.shipSpeed,a.shipVY=Math.sin(a.pitch)*a.shipSpeed,a.camX+=a.shipVX,a.camY+=a.shipVY,a.camZ+=a.shipVZ;for(var s=0;s<a.shapes.length;++s)rotateShape(a.shapes[s],s/a.shapes.length*.1,-s/a.shapes.length*.1,s/a.shapes.length*.1),a.shapes[s].x-a.camX>a.fieldRadius&&(a.shapes[s].x-=2*a.fieldRadius),a.shapes[s].x-a.camX<-a.fieldRadius&&(a.shapes[s].x+=2*a.fieldRadius),a.shapes[s].y-a.camY>a.fieldRadius&&(a.shapes[s].y-=2*a.fieldRadius),a.shapes[s].y-a.camY<-a.fieldRadius&&(a.shapes[s].y+=2*a.fieldRadius),a.shapes[s].z-a.camZ>a.fieldRadius&&(a.shapes[s].z-=2*a.fieldRadius),a.shapes[s].z-a.camZ<-a.fieldRadius&&(a.shapes[s].z+=2*a.fieldRadius)}function sortFunction(a,s){return s.dist-a.dist}function draw(a){var s,e,t,h,n,c,o;for(a.ctx.globalAlpha=1,a.ctx.fillStyle="rgba(0,0,0,.65)",a.ctx.fillRect(0,0,canvas.width,canvas.height),i=a.shapes.length;i--;){for(h=project3D(s=a.shapes[i].x,e=a.shapes[i].y,t=a.shapes[i].z,a),o=1-Math.pow(h.d/a.fieldRadius,10),a.ctx.globalAlpha=o<0?0:o,a.ctx.strokeStyle=rgb(a.frameNo/16+i/800*(1/a.scale*200)),a.ctx.lineWidth=40/(1+h.d),a.ctx.beginPath(),j=12;j--;)n=project3D(s+a.shapes[i].s[j].a.x,e+a.shapes[i].s[j].a.y,t+a.shapes[i].s[j].a.z,a),c=project3D(s+a.shapes[i].s[j].b.x,e+a.shapes[i].s[j].b.y,t+a.shapes[i].s[j].b.z,a),-1!=n.d&&-1!=c.d&&(a.ctx.moveTo(n.x,n.y),a.ctx.lineTo(c.x,c.y));a.ctx.stroke()}}function rotateShape(a,s,e,t){for(var h,i,n,c,o,d=0;d<a.s.length;++d)for(var p=2;p--;)p?(h=a.s[d].a.x,i=a.s[d].a.y,n=a.s[d].a.z):(h=a.s[d].b.x,i=a.s[d].b.y,n=a.s[d].b.z),o=Math.sqrt(h*h+n*n),c=Math.atan2(h,n),h=Math.sin(c+s)*o,n=Math.cos(c+s)*o,o=Math.sqrt(i*i+n*n),c=Math.atan2(i,n),i=Math.sin(c+e)*o,n=Math.cos(c+e)*o,o=Math.sqrt(h*h+i*i),c=Math.atan2(h,i),h=Math.sin(c+t)*o,i=Math.cos(c+t)*o,p?(a.s[d].a.x=h,a.s[d].a.y=i,a.s[d].a.z=n):(a.s[d].b.x=h,a.s[d].b.y=i,a.s[d].b.z=n)}function S(a,s,e,t,h,i){this.a={x:a,y:s,z:e},this.b={x:t,y:h,z:i}}function Cube(a,s,e){return Q={},Q.x=a,Q.y=s,Q.z=e,Q.s=[],Q.s.push(new S(-1,-1,-1,1,-1,-1)),Q.s.push(new S(1,-1,-1,1,1,-1)),Q.s.push(new S(1,1,-1,-1,1,-1)),Q.s.push(new S(-1,1,-1,-1,-1,-1)),Q.s.push(new S(-1,-1,1,1,-1,1)),Q.s.push(new S(1,-1,1,1,1,1)),Q.s.push(new S(1,1,1,-1,1,1)),Q.s.push(new S(-1,1,1,-1,-1,1)),Q.s.push(new S(-1,-1,-1,-1,-1,1)),Q.s.push(new S(1,-1,-1,1,-1,1)),Q.s.push(new S(1,1,-1,1,1,1)),Q.s.push(new S(-1,1,-1,-1,1,1)),Q}function loadScene(a){a.shapes=[];for(var s=0;s<a.cubeNo;++s){var e=new Cube(a.fieldRadius-Math.random()*a.fieldRadius*2,a.fieldRadius-Math.random()*a.fieldRadius*2,a.fieldRadius-Math.random()*a.fieldRadius*2);rotateShape(e,R(),R(),R()),a.shapes.push(e)}}function frame(a){void 0===a&&((a={}).canvas=document.querySelector("canvas"),a.ctx=a.canvas.getContext("2d"),a.canvas.width=document.body.clientWidth,a.canvas.height=document.body.clientHeight,window.addEventListener("resize",(function(){a.canvas.width=document.body.clientWidth,a.canvas.height=document.body.clientHeight,a.cx=a.canvas.width/2,a.cy=a.canvas.height/2}),!0),a.frameNo=0,a.canvas.addEventListener("mousemove",(s=>{a.mx=s.clientX/a.canvas.clientWidth*a.canvas.width,a.my=s.clientY/a.canvas.clientHeight*a.canvas.height})),a.camX=0,a.camY=0,a.camZ=0,a.pitch=0,a.yaw=0,a.roll=0,a.cx=a.canvas.width/2,a.cy=a.canvas.height/2,a.scale=400,a.shipSpeed=1.5,a.shipVX=a.shipVY=a.shipVZ=0,a.fieldRadius=150,a.cubeNo=1500,loadScene(a));a.frameNo++,requestAnimationFrame((function(){frame(a)})),process(a),draw(a)}R=()=>Math.random()*Math.PI*2,frame()</script><script>window.ga_tid="UA-148909894-1",function(){var e=document.createElement("script");e.src="https://rmt.dogedoge.com/fetch/public/ga.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?d367964cbb21775bfbb9c16fe4da3484",e.defer=!0;var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script></body></html>