/* # ----------------------------------------------------------------------------- # ~/assets/theme/j1/modules/amplitudejs/js/visualizations/michael-bromley.min.js # AmplitudeJS v5.3.2 Visualization (FX) # # Product/Info: # https://jekyll.one # https://github.com/serversideup/amplitudejs # # Copyright (C) 2021 521 Dimensions # Copyright (C) 2023, 2024 Juergen Adams # # J1 Template is licensed under the MIT License. # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE # Amplitudejs is licensed under the MIT License. # See: https://github.com/serversideup/amplitudejs/blob/master/LICENSE # ----------------------------------------------------------------------------- */ /* Visualization adapted from Michael Bromley's Soundcloud visualizer. https://github.com/michaelbromley/soundcloud-visualizer */ function MichaelBromleyVisualization(){this.id="michaelbromley_visualization",this.name="Michael Bromley Visualization",this.analyser="",this.container="",this.preferences={width:500,height:500,fullscreen:!1,inherit:!0},this.tileSize="",this.tiles=[],this.stars=[],this.fgCanvas="",this.fgCtx="",this.fgRotation=.001,this.bgCanvas="",this.bgCtx="",this.sfCanvas="",this.sfCtx="",this.volume=0,this.streamData=new Uint8Array(128),this.drawBgInterval="",this.rotateForegroundInterval="",this.sampleAudioStreamInterval="",this.animationFrame="",this.setPreferences=function(t){for(var i in this.preferences)null!=t[i]&&(this.preferences[i]=t[i])},this.startVisualization=function(t){this.analyser=Amplitude.getAnalyser(),this.container=t,this.preferences.inherit&&(this.preferences.width=this.container.offsetWidth,this.preferences.height=this.container.offsetHeight),this.fgCanvas=document.createElement("canvas"),this.fgCanvas.setAttribute("style","position: absolute; z-index: 10"),this.fgCtx=this.fgCanvas.getContext("2d"),this.container.appendChild(this.fgCanvas),this.sfCanvas=document.createElement("canvas"),this.sfCtx=this.sfCanvas.getContext("2d"),this.sfCanvas.setAttribute("style","position: absolute; z-index: 5"),this.container.appendChild(this.sfCanvas),this.bgCanvas=document.createElement("canvas"),this.bgCtx=this.bgCanvas.getContext("2d"),this.container.appendChild(this.bgCanvas),this.makePolygonArray(),this.makeStarArray(),this.resizeCanvas(),this.draw(),this.sampleAudioStreamInterval=setInterval(this.sampleAudioStream.bind(this),20),this.drawBgInterval=setInterval(this.drawBg.bind(this),100),this.rotateForegroundInterval=setInterval(this.rotateForeground.bind(this),20),window.addEventListener("resize",this.resizeCanvas,!1)},this.makePolygonArray=function(){this.tiles=[];let t=0;this.tiles.push(new Polygon(6,0,0,this.tileSize,this.fgCtx,t,this.analyser,this.streamData,this.tiles)),t++;for(var i=1;i<7;i++){this.tiles.push(new Polygon(6,0,i,this.tileSize,this.fgCtx,t,this.analyser,this.streamData,this.tiles,this.fgRotation)),t++,this.tiles.push(new Polygon(6,0,-i,this.tileSize,this.fgCtx,t,this.analyser,this.streamData,this.tiles,this.fgRotation)),t++;for(var s=1;sthis.fgCanvas.height?this.fgCanvas.width/25:this.fgCanvas.height/25,this.drawBg(),this.makePolygonArray(),this.makeStarArray())},this.draw=function(){this.fgCtx.clearRect(-this.fgCanvas.width,-this.fgCanvas.height,2*this.fgCanvas.width,2*this.fgCanvas.height),this.sfCtx.clearRect(-this.fgCanvas.width/2,-this.fgCanvas.height/2,this.fgCanvas.width,this.fgCanvas.height),this.stars.forEach((function(t){t.drawStar()})),this.tiles.forEach((function(t){t.drawPolygon()})),this.tiles.forEach((function(t){t.highlight>0&&t.drawHighlight()})),this.animationFrame=window.requestAnimationFrame(this.draw.bind(this))},this.drawBg=function(){var t,i,s;this.bgCtx.clearRect(0,0,this.bgCanvas.width,this.bgCanvas.height);var h=this.volume/1e3;t=200+28*(Math.sin(h)+1),i=2*h,s=8*h,Math.sin(h+3*Math.PI/2),this.bgCtx.beginPath(),this.bgCtx.rect(0,0,this.bgCanvas.width,this.bgCanvas.height);var a=this.bgCtx.createRadialGradient(this.bgCanvas.width/2,this.bgCanvas.height/2,h,this.bgCanvas.width/2,this.bgCanvas.height/2,this.bgCanvas.width-Math.min(Math.pow(h,2.7),this.bgCanvas.width-20));a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(.8,"rgba("+Math.round(t)+", "+Math.round(i)+", "+Math.round(s)+", 0.4)"),this.bgCtx.fillStyle=a,this.bgCtx.fill()},this.sampleAudioStream=function(){this.analyser.getByteFrequencyData(this.streamData);for(var t=0,i=0;i<80;i++)t+=this.streamData[i];this.volume=t},this.rotateForeground=function(){for(let t=0;t42?1.5:2,this.highlight=0;var l=Math.round(Math.cos(Math.PI/6)*h*2);this.y=Math.round(l*Math.sin(Math.PI/3)*-s),this.x=Math.round(i*l+s*l/2),this.vertices=[];for(var f=1;f<=this.sides;f+=1)i=this.x+this.tileSize*Math.cos(2*f*Math.PI/this.sides+Math.PI/6),s=this.y+this.tileSize*Math.sin(2*f*Math.PI/this.sides+Math.PI/6),this.vertices.push([i,s]);this.streamData=r}function Star(t,i,s,h,a,e,n){this.x=t,this.y=i,this.angle=Math.atan(Math.abs(i)/Math.abs(t)),this.starSize=s,this.ctx=h,this.high=0,this.fgCanvas=a,this.analyser=e,this.streamData=n}Polygon.prototype.rotateVertices=function(){var t=this.fgRotation;t-=this.analyser.volume>1e4?Math.sin(this.analyser.volume/8e5):0;for(var i=0;i<=this.sides-1;i+=1)this.vertices[i][0]=this.vertices[i][0]-this.vertices[i][1]*Math.sin(t),this.vertices[i][1]=this.vertices[i][1]+this.vertices[i][0]*Math.sin(t)},Polygon.prototype.drawPolygon=function(){var t,i,s,h,a=Math.ceil(this.streamData.length/this.tiles.length*this.num),e=255*Math.pow(this.streamData[a]/255,2);if((e*=this.num>42?1.1:1)>this.high?this.high=e:(this.high-=this.decay,e=this.high),e>0){this.ctx.beginPath();var n=this.calculateOffset(this.vertices[0]);this.ctx.moveTo(this.vertices[0][0]+n[0],this.vertices[0][1]+n[1]);for(var r=1;r<=this.sides-1;r+=1)n=this.calculateOffset(this.vertices[r]),this.ctx.lineTo(this.vertices[r][0]+n[0],this.vertices[r][1]+n[1]);this.ctx.closePath(),e>128?(t=2*(e-128),i=128*(Math.cos(2*e/128*Math.PI/2-4*Math.PI/3)+1),s=3*(e-105)):e>175?(t=2*(e-128),i=255,s=3*(e-105)):(t=128*(Math.cos(2*e/128*Math.PI/2)+1),i=128*(Math.cos(2*e/128*Math.PI/2-4*Math.PI/3)+1),s=128*(Math.cos(2.4*e/128*Math.PI/2-2*Math.PI/3)+1)),e>210&&(this.cubed=e),e>120&&(this.highlight=100);var o=2.7182;if(h=.5/(1+40*Math.pow(o,-e/8))+.5/(1+40*Math.pow(o,-e/20)),this.ctx.fillStyle="rgba("+Math.round(t)+", "+Math.round(i)+", "+Math.round(s)+", "+h+")",this.ctx.fill(),e>20){this.ctx.strokeStyle="rgba(20, 20, 20, 0.5)",this.ctx.lineWidth=1,this.ctx.stroke()}}},Polygon.prototype.calculateOffset=function(t){this.analyser.getByteFrequencyData(this.streamData);for(var i=0,s=0;s<80;s++)i+=this.streamData[s];var h=i,a=Math.atan(t[1]/t[0]),e=Math.sqrt(Math.pow(t[0],2)+Math.pow(t[1],2)),n=Math.min(Math.max(.5*Math.tan(h/6e3),-20),2),r=Math.pow(e/3,2)*(h/2e6)*(Math.pow(this.high,1.3)/300)*n,o=Math.cos(a)*r,g=Math.sin(a)*r;return[o*=t[0]<0?-1:1,g*=t[0]<0?-1:1]},Polygon.prototype.drawHighlight=function(){this.ctx.beginPath();var t=this.calculateOffset(this.vertices[0]);this.ctx.moveTo(this.vertices[0][0]+t[0],this.vertices[0][1]+t[1]);for(var i=0;i<=this.sides-1;i+=1)t=this.calculateOffset(this.vertices[i]),this.ctx.lineTo(this.vertices[i][0]+t[0],this.vertices[i][1]+t[1]);this.ctx.closePath();var s=this.highlight/100;this.ctx.strokeStyle="rgba(255, 255, 255, "+s+")",this.ctx.lineWidth=1,this.ctx.stroke(),this.highlight-=.5},Star.prototype.drawStar=function(){var t=Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2));this.analyser.getByteFrequencyData(this.streamData);for(var i=0,s=0;s<80;s++)i+=this.streamData[s];var h=i,a=200+Math.min(Math.round(5*this.high),55);this.ctx.lineWidth=.5+t/2e3*Math.max(this.starSize/2,1),this.ctx.strokeStyle="rgba("+a+", "+a+", "+a+", 1)",this.ctx.beginPath(),this.ctx.moveTo(this.x,this.y);var e=1+Math.min(Math.pow(t,2)/3e4*Math.pow(h,2)/6e6,t),n=Math.cos(this.angle)*-e,r=Math.sin(this.angle)*-e;n*=this.x>0?1:-1,r*=this.y>0?1:-1,this.ctx.lineTo(this.x+n,this.y+r),this.ctx.stroke(),this.ctx.closePath();var o=e/20*this.starSize;this.high-=Math.max(this.high-1e-4,0),o>this.high&&(this.high=o);var g=Math.cos(this.angle)*this.high,l=Math.sin(this.angle)*this.high;this.x+=this.x>0?g:-g,this.y+=this.y>0?l:-l;var f=this.fgCanvas.height/2+500,c=this.fgCanvas.width/2+500;(this.y>f||this.y<-f||this.x>c||this.x<-c)&&(this.x=(Math.random()-.5)*this.fgCanvas.width/3,this.y=(Math.random()-.5)*this.fgCanvas.height/3,this.angle=Math.atan(Math.abs(this.y)/Math.abs(this.x)))};