https://jacyashford.com/dist/animated-bg-threads.141b69f8812ab82674b2.js

1(self.webpackChunkfolio=self.webpackChunkfolio||[]).push([[2072],{81199(n,e,t){"use strict";t.r(e),t.d(e,{default:()=>a});var o=t(31601),i=t.n(o),r=t(76314),l=t.n(r)()(i());l.push([n.id,"\n.threads-root[data-v-d2dcab70] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n",""]);const a=l},47751(n,e,t){"use strict";t.r(e),t.d(e,{default:()=>m});var o=t(20641),i=t(29412),r=t(82459),l=t(4347),a=t(7309),u=t(39040);function s(n,e,t){if(c())return Reflect.construct.apply(null,arguments);var o=[null];o.push.apply(o,e);var i=new(n.bind.apply(n,o));return t&&f(i,t.prototype),i}function f(n,e){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(n,e){return n.__proto__=e,n},f(n,e)}function c(){try{var n=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(n){}return(c=function(){return!!n})()}function v(n){return function(n){if(Array.isArray(n))return d(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||function(n,e){if(n){if("string"==typeof n)return d(n,e);var t={}.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?d(n,e):void 0}}(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,o=Array(e);t<e;t++)o[t]=n[t];return o}const p=(0,o.pM)({__name:"Threads",props:{color:{default:function(){return[1,1,1]}},amplitude:{default:1},distance:{default:0},verticalPosition:{default:.5},enableMouseInteraction:{type:Boolean,default:!1}},setup:function(n){var e=n,t=(0,o.rk)("containerRef"),f=null,c=null,d=null,p=null,m=null,y=null,_=[.5,.5],h=[.5,.5],g=function(){if(t.value&&f&&d){var n=t.value,e=n.clientWidth,o=n.clientHeight;f.setSize(e,o),d.uniforms.iResolution.value.r=e,d.uniforms.iResolution.value.g=o,d.uniforms.iResolution.value.b=e/o}},P=function(n){if(t.value){var e=t.value.getBoundingClientRect(),o=(n.clientX-e.left)/e.width,i=1-(n.clientY-e.top)/e.height;h=[o,i]}},x=function(){h=[.5,.5]},b=function(n){if(d&&f&&p){if(e.enableMouseInteraction){_[0]+=.05*(h[0]-_[0]),_[1]+=.05*(h[1]-_[1]),d.uniforms.uMouse.value[0]=_[0],d.uniforms.uMouse.value[1]=_[1]}else d.uniforms.uMouse.value[0]=.5,d.uniforms.uMouse.value[1]=.5;d.uniforms.iTime.value=.001*n,f.render({scene:p}),m=requestAnimationFrame(b)}},w=function(){if(t.value){A();var n=t.value;f=new i.A({alpha:!0}),(c=f.gl).clearColor(0,0,0,0),c.enable(c.BLEND),c.blendFunc(c.SRC_ALPHA,c.ONE_MINUS_SRC_ALPHA);var o=new r.l(c);d=new l.B(c,{vertex:"\nattribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n",fragment:"\nprecision highp float;\n\nuniform float iTime;\nuniform vec3 iResolution;\nuniform vec3 uColor;\nuniform float uAmplitude;\nuniform float uDistance;\nuniform float uVerticalPosition;\nuniform vec2 uMouse;\n\n#define PI 3.1415926538\n\nconst int u_line_count = 40;\nconst float u_line_width = 7.0;\nconst float u_line_blur = 10.0;\n\nfloat Perlin2D(vec2 P) {\n    vec2 Pi = floor(P);\n    vec4 Pf_Pfmin1 = P.xyxy - vec4(Pi, Pi + 1.0);\n    vec4 Pt = vec4(Pi.xy, Pi.xy + 1.0);\n    Pt = Pt - floor(Pt * (1.0 / 71.0)) * 71.0;\n    Pt += vec2(26.0, 161.0).xyxy;\n    Pt *= Pt;\n    Pt = Pt.xzxz * Pt.yyww;\n    vec4 hash_x = fract(Pt * (1.0 / 951.135664));\n    vec4 hash_y = fract(Pt * (1.0 / 642.949883));\n    vec4 grad_x = hash_x - 0.49999;\n    vec4 grad_y = hash_y - 0.49999;\n    vec4 grad_results = inversesqrt(grad_x * grad_x + grad_y * grad_y)\n        * (grad_x * Pf_Pfmin1.xzxz + grad_y * Pf_Pfmin1.yyww);\n    grad_results *= 1.4142135623730950;\n    vec2 blend = Pf_Pfmin1.xy * Pf_Pfmin1.xy * Pf_Pfmin1.xy\n               * (Pf_Pfmin1.xy * (Pf_Pfmin1.xy * 6.0 - 15.0) + 10.0);\n    vec4 blend2 = vec4(blend, vec2(1.0 - blend));\n    return dot(grad_results, blend2.zxzx * blend2.wwyy);\n}

1\n\nfloat pixel(float count, vec2 resolution) {\n    return (1.0 / max(resolution.x, resolution.y)) * count;\n}\n\nfloat lineFn(vec2 st, float width, float perc, float offset, vec2 mouse, float time, float amplitude, float distance, float verticalPosition) {\n    float split_offset = (perc * 0.4);\n    float split_point = 0.1 + split_offset;\n\n    float amplitude_normal = smoothstep(split_point, 0.7, st.x);\n    float amplitude_strength = 0.5;\n    float finalAmplitude = amplitude_normal * amplitude_strength\n                           * amplitude * (1.0 + (mouse.y - 0.5) * 0.2);\n\n    float time_scaled = time / 10.0 + (mouse.x - 0.5) * 1.0;\n    float blur = smoothstep(split_point, split_point + 0.05, st.x) * perc;\n\n    float xnoise = mix(\n        Perlin2D(vec2(time_scaled, st.x + perc) * 2.5),\n        Perlin2D(vec2(time_scaled, st.x + time_scaled) * 3.5) / 1.5,\n        st.x * 0.3\n    );\n\n    float y = verticalPosition + (perc - 0.5) * distance + xnoise / 2.0 * finalAmplitude;\n\n    float line_start = smoothstep(\n        y + (width / 2.0) + (u_line_blur * pixel(1.0, iResolution.xy) * blur),\n        y,\n        st.y\n    );\n\n    float line_end = smoothstep(\n        y,\n        y - (width / 2.0) - (u_line_blur * pixel(1.0, iResolution.xy) * blur),\n        st.y\n    );\n\n    return clamp(\n        (line_start - line_end) * (1.0 - smoothstep(0.0, 1.0, pow(perc, 0.3))),\n        0.0,\n        1.0\n    );\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = fragCoord / iResolution.xy;\n\n    float line_strength = 1.0;\n    for (int i = 0; i < u_line_count; i++) {\n        float p = float(i) / float(u_line_count);\n        line_strength *= (1.0 - lineFn(\n            uv,\n            u_line_width * pixel(1.0, iResolution.xy) * (1.0 - p),\n            p,\n            (PI * 1.0) * p,\n            uMouse,\n            iTime,\n            uAmplitude,\n            uDistance,\n            uVerticalPosition\n        ));\n    }\n\n    float colorVal = 1.0 - line_strength;\n    fragColor = vec4(uColor * colorVal, colorVal);\n}\n\nvoid main() {\n    mainImage(gl_FragColor, gl_FragCoord.xy);\n}\n",uniforms:{iTime:{value:0},iResolution:{value:new a.Q(c.canvas.width,c.canvas.height,c.canvas.width/c.canvas.height)},uColor:{value:s(a.Q,v(e.color))},uAmplitude:{value:e.amplitude},uDistance:{value:e.distance},uVerticalPosition:{value:e.verticalPosition},uMouse:{value:new Float32Array([.5,.5])}}}),p=new u.e(c,{geometry:o,program:d});var _=c.canvas;_.style.width="100%",_.style.height="100%",_.style.display="block",n.appendChild(_),window.addEventListener("resize",g),"undefined"!=typeof ResizeObserver&&(y=new ResizeObserver(g)).observe(n),e.enableMouseInteraction&&(n.addEventListener("mousemove",P),n.addEventListener("mouseleave",x)),g(),m=requestAnimationFrame(b)}},A=function(){if(m&&(cancelAnimationFrame(m),m=null),window.removeEventListener("resize",g),y&&(y.disconnect(),y=null),t.value){t.value.removeEventListener("mousemove",P),t.value.removeEventListener("mouseleave",x);var n=t.value.querySelector("canvas");n&&t.value.removeChild(n)}var e;c&&(null===(e=c.getExtension("WEBGL_lose_context"))||void 0===e||e.loseContext());f=null,c=null,d=null,p=null,_=[.5,.5],h=[.5,.5]};return(0,o.sV)(function(){w()}),(0,o.hi)(function(){A()}),(0,o.wB)([function(){return e.color},function(){return e.amplitude},function(){return e.distance},function(){return e.verticalPosition},function(){return e.enableMouseInteraction}],function(){w()},{deep:!0}),function(n,e){return(0,o.uX)(),(0,o.CE)("div",{ref_key:"containerRef",ref:t,class:"threads-root"},null,512)}}});t(99972);const m=(0,t(66262).A)(p,[["__scopeId","data-v-d2dcab70"]])},99972(n,e,t){var o=t(81199);o.__esModule&&(o=o.default),"string"==typeof o&&(o=[[n.id,o,""]]),o.locals&&(n.exports=o.locals);(0,t(70534).A)("0ead98f6",o,!1,{})},82459(n,e,t){"use strict";t.d(e,{l:()=>i});var o=t(2727);class i extends o.V{constructor(n,{attributes:e={}}={}){Object.assign(e,{position:{size:2,data:new Float32Array([-1,-1,3,-1,-1,3])},uv:{size:2,data:new Float32Array([0,0,2,0,0,2])}}),super(n,e)}}},7309(n,e,t){"use strict";t.d(e,{Q:()=>l});const o={black:"#000000",white:"#ffffff",red:"#ff0000",green:"#00ff00",blue:"#0000ff",fuchsia:"#ff00ff",cyan:"#00ffff",yellow:"#ffff00",orange:"#ff8000"};function i(n){4===n.length&&(n=n[0]+n[1]+n[1]+n[2]+n[2]+n[3]+n[3]);const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return e||console.warn(`Unable to convert hex string ${n} to rgb values`),[parseInt(e[1],16)/255,parseInt(e[2],16)/255,parseInt(e[3],16)/255]}function r(n){return void 0===n?[0,0,0]:3===arguments.length?arguments:isNaN(n)?"#"===n[0]?i(n):o[n.toLowerCase()]?i(o[n.toLowerCase()]):(console.warn("Color format not recognised"),[0,0,0]):(e=n,[((e=parseInt(e))>>16&255)/255,(e>>8&255)/255,(255&e)/255]);var e}class l extends Array{constructor(n){return Array.isArray(n)?super(...n):super(...r(...arguments))}get r(){return this[0]}get g(){return this[1]}get b(){return this[2]}set r(n){this[0]=n}set g(n){this[1]=n}set b(n){this[2]=n}set(n){return Array.isArray(n)?this.copy(n):this.copy(r(...arguments))}copy(n){return this[0]=n[0],this[1]=n[1],this[2]=n[2],this}}}}]);