2 lines
4.9 KiB
JavaScript
2 lines
4.9 KiB
JavaScript
"use strict";const e=require("../../../common/vendor.js"),t={props:{isPlaying:{type:Boolean,default:!1},bpm:{type:Number,default:110}},data:()=>({canvasWidth:320,canvasHeight:400,ctx:null,timer:null,renderRunning:!1,coreScale:1,coreTargetScale:1,coreVelocity:0,pressed:!1,time:0,lastFrameTime:0,lastBeatTime:0,waveAmplitudeMultiplier:1,shockwaves:[],ringAngle:0}),mounted(){this.initCanvas()},beforeUnmount(){this.timer&&(clearTimeout(this.timer),this.timer=null),this.renderRunning=!1},watch:{isPlaying(e){e&&(this.waveAmplitudeMultiplier=1,this.ensureRenderLoop())}},methods:{initCanvas(){setTimeout(()=>{e.index.createSelectorQuery().in(this).select(".walker-canvas-container").boundingClientRect(t=>{if(t&&t.width>0)this.canvasWidth=t.width,this.canvasHeight=t.height>100?t.height:1.2*t.width;else{const t=e.index.getSystemInfoSync();this.canvasWidth=t.windowWidth-30,this.canvasHeight=1.2*this.canvasWidth}this.ctx||(this.ctx=e.index.createCanvasContext("walker",this),this.lastFrameTime=Date.now(),this.ensureRenderLoop())}).exec()},100)},triggerBeat(){const e=.32*Math.min(this.canvasWidth,this.canvasHeight);this.shockwaves.push({radius:e,maxRadius:2.2*e,opacity:1}),this.waveAmplitudeMultiplier=2.5,this.coreVelocity-=.05,this.ensureRenderLoop()},onTouchStart(e){const t=e.touches[0];if(!t)return;const i=this.canvasWidth/2,s=this.canvasHeight/2-30,a=.32*Math.min(this.canvasWidth,this.canvasHeight),n=t.x-i,o=t.y-s;Math.sqrt(n*n+o*o)<=a+40&&(this.pressed=!0,this.coreTargetScale=.9,this.ensureRenderLoop())},onTouchMove(e){if(!this.pressed)return;const t=e.touches[0];if(!t)return;const i=this.canvasWidth/2,s=this.canvasHeight/2-30,a=.32*Math.min(this.canvasWidth,this.canvasHeight),n=t.x-i,o=t.y-s;Math.sqrt(n*n+o*o)>a+40&&(this.pressed=!1,this.coreTargetScale=1)},onTouchEnd(){this.coreTargetScale=1,this.pressed&&this.$emit("toggle-play"),this.pressed=!1},onTouchCancel(){this.coreTargetScale=1,this.pressed=!1},ensureRenderLoop(){this.renderRunning||(this.renderRunning=!0,this.renderLoop())},renderLoop(){const e=.016;this.isPlaying?this.time+=e:this.time+=.0032;const t=120*(this.coreTargetScale-this.coreScale);this.coreVelocity+=t*e,this.coreVelocity*=Math.exp(-.192),this.coreScale+=this.coreVelocity*e,this.waveAmplitudeMultiplier>1?(this.waveAmplitudeMultiplier-=.048,this.waveAmplitudeMultiplier<1&&(this.waveAmplitudeMultiplier=1)):!this.isPlaying&&this.waveAmplitudeMultiplier>.1&&(this.waveAmplitudeMultiplier-=.032,this.waveAmplitudeMultiplier<.1&&(this.waveAmplitudeMultiplier=.1)),this.draw(),this.ctx.draw(!1);this.isPlaying||this.shockwaves.length>0||Math.abs(this.coreScale-this.coreTargetScale)>=.001||Math.abs(this.coreVelocity)>=.001||this.waveAmplitudeMultiplier>.11?this.timer=setTimeout(()=>{this.renderLoop()},1e3/60):(this.timer=null,this.renderRunning=!1)},draw(){const e=this.ctx,t=this.canvasWidth,i=this.canvasHeight;e.clearRect(0,0,t,i);const s=.32*Math.min(t,i),a=t/2,n=i/2-30;for(let l=this.shockwaves.length-1;l>=0;l--){const t=this.shockwaves[l];t.radius+=.08*(t.maxRadius-t.radius),t.opacity-=.03,t.opacity<=0?this.shockwaves.splice(l,1):(e.beginPath(),e.arc(a,n,t.radius,0,2*Math.PI),e.strokeStyle=`rgba(16, 185, 129, ${.5*t.opacity})`,e.lineWidth=3,e.stroke())}this.drawWaves(e,t,i),e.save(),e.translate(a,n),e.scale(this.coreScale,this.coreScale),e.setShadow(0,12,24,"rgba(16, 185, 129, 0.3)");const o=e.createLinearGradient(-s,-s,s,s);o.addColorStop(0,"#34d399"),o.addColorStop(1,"#047857"),e.beginPath(),e.arc(0,0,s,0,2*Math.PI),e.fillStyle=o,e.fill(),e.setShadow(0,0,0,"transparent"),e.beginPath(),e.arc(0,0,s-2,0,2*Math.PI),e.strokeStyle="rgba(255, 255, 255, 0.35)",e.lineWidth=2,e.stroke();const h=Math.floor(.7*s);e.fillStyle="#ffffff",e.font=`bold ${h}px "DIN Condensed", "Inter", sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillText(this.bpm.toString(),0,-12),e.fillStyle="rgba(255, 255, 255, 0.85)",e.font='500 16px "Inter", sans-serif',e.fillText("BPM",0,.3*s),e.fillStyle="#ffffff";const r=.55*s;this.isPlaying?(e.fillRect(-8,r-6,5,14),e.fillRect(3,r-6,5,14)):(e.beginPath(),e.moveTo(-5,r-8),e.lineTo(9,r),e.lineTo(-5,r+8),e.closePath(),e.fill()),e.restore()},drawWaves(e,t,i){const s=.82*i,a=.08*i,n=[{color:"rgba(52, 211, 153, 0.3)",speed:1.5,freq:.012,amp:.7*a,offset:0},{color:"rgba(16, 185, 129, 0.6)",speed:2.5,freq:.015,amp:a,offset:Math.PI}],o=this.waveAmplitudeMultiplier,h=this.time;n.forEach(a=>{e.beginPath(),e.moveTo(0,i),e.lineTo(0,s);for(let i=0;i<=t;i+=25){const t=s+Math.sin(i*a.freq+h*a.speed+a.offset)*a.amp*o;e.lineTo(i,t)}const n=s+Math.sin(t*a.freq+h*a.speed+a.offset)*a.amp*o;e.lineTo(t,n),e.lineTo(t,i),e.closePath(),e.fillStyle=a.color,e.fill()})}}};const i=e._export_sfc(t,[["render",function(t,i,s,a,n,o){return{a:n.canvasWidth+"px",b:n.canvasHeight+"px",c:e.o((...e)=>o.onTouchStart&&o.onTouchStart(...e)),d:e.o((...e)=>o.onTouchMove&&o.onTouchMove(...e)),e:e.o((...e)=>o.onTouchEnd&&o.onTouchEnd(...e)),f:e.o((...e)=>o.onTouchCancel&&o.onTouchCancel(...e))}}],["__scopeId","data-v-06b6a3c2"]]);wx.createComponent(i);
|