1class MiniGl { 2 constructor(canvas, width, height, debug = false) { 3 const _miniGl = this, 4 debug_output = -1 !== document.location.search.toLowerCase().indexOf("debug=webgl"); 5 _miniGl.canvas = canvas, _miniGl.gl = _miniGl.canvas.getContext("webgl", { 6 antialias: true 7 }), _miniGl.meshes = []; 8 const context = _miniGl.gl; 9 width && height && this.setSize(width, height), _miniGl.lastDebugMsg, _miniGl.debug = debug && debug_output ? function (e) { 10 const t = new Date(); 11 t - _miniGl.lastDebugMsg > 1e3 && console.log("---"), console.log(t.toLocaleTimeString() + Array(Math.max(0, 32 - e.length)).join(" ") + e + ": ", ...Array.from(arguments).slice(1)), _miniGl.lastDebugMsg = t; 12 } : () => {}, Object.defineProperties(_miniGl, { 13 Material: { 14 enumerable: false, 15 value: class { 16 constructor(vertexShaders, fragments, uniforms = {}) { 17 const material = this; 18 function getShaderByType(type, source) { 19 const shader = context.createShader(type); 20 return context.shaderSource(shader, source), context.compileShader(shader), context.getShaderParameter(shader, context.COMPILE_STATUS) || console.error(context.getShaderInfoLog(shader)), _miniGl.debug("Material.compileShaderSource", { 21 source: source 22 }), shader; 23 } 24 function getUniformVariableDeclarations(uniforms, type) { 25 return Object.entries(uniforms).map(([uniform, value]) => value.getDeclaration(uniform, type)).join("\n"); 26 } 27 material.uniforms = uniforms, material.uniformInstances = []; 28 const prefix = "\n precision highp float;\n "; 29 material.vertexSource = `\n ${prefix}\n attribute vec4 position;\n attribute vec2 uv;\n attribute vec2 uvNorm;\n ${getUniformVariableDeclarations(_miniGl.commonUniforms, "vertex")}\n ${getUniformVariableDeclarations(uniforms, "vertex")}\n ${vertexShaders}\n `, material.Source = `\n ${prefix}\n ${getUniformVariableDeclarations(_miniGl.commonUniforms, "fragment")}\n ${getUniformVariableDeclarations(uniforms, "fragment")}\n ${fragments}\n `, material.vertexShader = getShaderByType(context.VERTEX_SHADER, material.vertexSource), material.fragmentShader = getShaderByType(context.FRAGMENT_SHADER, material.Source), material.program = context.createProgram(), context.attachShader(material.program, material.vertexShader), context.attachShader(material.program, material.fragmentShader), context.linkProgram(material.program), context.getProgramParameter(material.program, context.LINK_STATUS) || console.error(context.getProgramInfoLog(material.program)), context.useProgram(material.program), material.attachUniforms(void 0, _miniGl.commonUniforms), material.attachUniforms(void 0, material.uniforms); 30 } 31 //t = uniform 32 attachUniforms(name, uniforms) { 33 //n = material 34 const material = this; 35 void 0 === name ? Object.entries(uniforms).forEach(([name, uniform]) => { 36 material.attachUniforms(name, uniform); 37 }) : "array" == uniforms.type ? uniforms.value.forEach((uniform, i) => material.attachUniforms(`${name}[${i}]`, uniform)) : "struct" == uniforms.type ? Object.entries(uniforms.value).forEach(([uniform, i]) => material.attachUniforms(`${name}.${uniform}`, i)) : (_miniGl.debug("Material.attachUniforms", { 38 name: name, 39 uniform: uniforms 40 }), material.uniformInstances.push({ 41 uniform: uniforms, 42 location: context.getUniformLocation(material.program, name) 43 })); 44 } 45 } 46 }, 47 Uniform: { 48 enumerable: !1, 49 value: class { 50 constructor(e) { 51 this.type = "float", Object.assign(this, e); 52 this.typeFn = { 53 float: "1f", 54 int: "1i", 55 vec2: "2fv", 56 vec3: "3fv", 57 vec4: "4fv", 58 mat4: "Matrix4fv" 59 }[this.type] || "1f", this.update(); 60 } 61 update(value) { 62 void 0 !== this.value && context[`uniform${this.typeFn}`](value, 0 === this.typeFn.indexOf("Matrix") ? this.transpose : this.value, 0 === this.typeFn.indexOf("Matrix") ? this.value : null); 63 } 64 //e - name 65 //t - type 66 //n - length 67 getDeclaration(name, type, length) { 68 const uniform = this; 69 if (uniform.excludeFrom !== type) { 70 if ("array" === uniform.type) return uniform.value[0].getDeclaration(name, type, uniform.value.length) + `\nconst int ${name}_length = ${uniform.value.length};`; 71 if ("struct" === uniform.type) {
72 let name_no_prefix = name.replace("u_", ""); 73 return name_no_prefix = name_no_prefix.charAt(0).toUpperCase() + name_no_prefix.slice(1), `uniform struct ${name_no_prefix} 74 {\n` + Object.entries(uniform.value).map(([name, uniform]) => uniform.getDeclaration(name, type).replace(/^uniform/, "")).join("") + `\n} ${name}${length > 0 ? `[${length}]` : ""};`; 75 } 76 return `uniform ${uniform.type} ${name}${length > 0 ? `[${length}]` : ""};`; 77 } 78 } 79 } 80 }, 81 PlaneGeometry: { 82 enumerable: !1, 83 value: class { 84 constructor(width, height, n, i, orientation) { 85 context.createBuffer(), this.attributes = { 86 position: new _miniGl.Attribute({ 87 target: context.ARRAY_BUFFER, 88 size: 3 89 }), 90 uv: new _miniGl.Attribute({ 91 target: context.ARRAY_BUFFER, 92 size: 2 93 }), 94 uvNorm: new _miniGl.Attribute({ 95 target: context.ARRAY_BUFFER, 96 size: 2 97 }), 98 index: new _miniGl.Attribute({ 99 target: context.ELEMENT_ARRAY_BUFFER, 100 size: 3, 101 type: context.UNSIGNED_SHORT 102 }) 103 }, this.setTopology(n, i), this.setSize(width, height, orientation); 104 } 105 setTopology(e = 1, t = 1) { 106 const n = this; 107 n.xSegCount = e, n.ySegCount = t, n.vertexCount = (n.xSegCount + 1) * (n.ySegCount + 1), n.quadCount = n.xSegCount * n.ySegCount * 2, n.attributes.uv.values = new Float32Array(2 * n.vertexCount), n.attributes.uvNorm.values = new Float32Array(2 * n.vertexCount), n.attributes.index.values = new Uint16Array(3 * n.quadCount); 108 for (let e = 0; e <= n.ySegCount; e++) for (let t = 0; t <= n.xSegCount; t++) { 109 const i = e * (n.xSegCount + 1) + t; 110 if (n.attributes.uv.values[2 * i] = t / n.xSegCount, n.attributes.uv.values[2 * i + 1] = 1 - e / n.ySegCount, n.attributes.uvNorm.values[2 * i] = t / n.xSegCount * 2 - 1, n.attributes.uvNorm.values[2 * i + 1] = 1 - e / n.ySegCount * 2, t < n.xSegCount && e < n.ySegCount) { 111 const s = e * n.xSegCount + t; 112 n.attributes.index.values[6 * s] = i, n.attributes.index.values[6 * s + 1] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 2] = i + 1, n.attributes.index.values[6 * s + 3] = i + 1, n.attributes.index.values[6 * s + 4] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 5] = i + 2 + n.xSegCount; 113 } 114 } 115 n.attributes.uv.update(), n.attributes.uvNorm.update(), n.attributes.index.update(), _miniGl.debug("Geometry.setTopology", { 116 uv: n.attributes.uv, 117 uvNorm: n.attributes.uvNorm, 118 index: n.attributes.index 119 }); 120 } 121 setSize(width = 1, height = 1, orientation = "xz") { 122 const geometry = this; 123 geometry.width = width, geometry.height = height, geometry.orientation = orientation, geometry.attributes.position.values && geometry.attributes.position.values.length === 3 * geometry.vertexCount || (geometry.attributes.position.values = new Float32Array(3 * geometry.vertexCount)); 124 const o = width / -2, 125 r = height / -2, 126 segment_width = width / geometry.xSegCount, 127 segment_height = height / geometry.ySegCount; 128 for (let yIndex = 0; yIndex <= geometry.ySegCount; yIndex++) { 129 const t = r + yIndex * segment_height; 130 for (let xIndex = 0; xIndex <= geometry.xSegCount; xIndex++) { 131 const r = o + xIndex * segment_width, 132 l = yIndex * (geometry.xSegCount + 1) + xIndex; 133 geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[0])] = r, geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[1])] = -t; 134 } 135 } 136 geometry.attributes.position.update(), _miniGl.debug("Geometry.setSize", { 137 position: geometry.attributes.position 138 }); 139 } 140 } 141 }, 142 Mesh: { 143 enumerable: !1, 144 value: class { 145 constructor(geometry, material) { 146 const mesh = this; 147 mesh.geometry = geometry, mesh.material = material, mesh.wireframe = !1, mesh.attributeInstances = [], Object.entries(mesh.geometry.attributes).forEac
147h(([e, attribute]) => { 148 mesh.attributeInstances.push({ 149 attribute: attribute, 150 location: attribute.attach(e, mesh.material.program) 151 }); 152 }), _miniGl.meshes.push(mesh), _miniGl.debug("Mesh.constructor", { 153 mesh: mesh 154 }); 155 } 156 draw() { 157 context.useProgram(this.material.program), this.material.uniformInstances.forEach(({ 158 uniform: e, 159 location: t 160 }) => e.update(t)), this.attributeInstances.forEach(({ 161 attribute: e, 162 location: t 163 }) => e.use(t)), context.drawElements(this.wireframe ? context.LINES : context.TRIANGLES, this.geometry.attributes.index.values.length, context.UNSIGNED_SHORT, 0); 164 } 165 remove() { 166 _miniGl.meshes = _miniGl.meshes.filter(e => e != this); 167 } 168 } 169 }, 170 Attribute: { 171 enumerable: !1, 172 value: class { 173 constructor(e) { 174 this.type = context.FLOAT, this.normalized = !1, this.buffer = context.createBuffer(), Object.assign(this, e), this.update(); 175 } 176 update() { 177 void 0 !== this.values && (context.bindBuffer(this.target, this.buffer), context.bufferData(this.target, this.values, context.STATIC_DRAW)); 178 } 179 attach(e, t) { 180 const n = context.getAttribLocation(t, e); 181 return this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(n), context.vertexAttribPointer(n, this.size, this.type, this.normalized, 0, 0)), n; 182 } 183 use(e) { 184 context.bindBuffer(this.target, this.buffer), this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(e), context.vertexAttribPointer(e, this.size, this.type, this.normalized, 0, 0)); 185 } 186 } 187 } 188 }); 189 const a = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; 190 _miniGl.commonUniforms = { 191 projectionMatrix: new _miniGl.Uniform({ 192 type: "mat4", 193 value: a 194 }), 195 modelViewMatrix: new _miniGl.Uniform({ 196 type: "mat4", 197 value: a 198 }), 199 resolution: new _miniGl.Uniform({ 200 type: "vec2", 201 value: [1, 1] 202 }), 203 aspectRatio: new _miniGl.Uniform({ 204 type: "float", 205 value: 1 206 }) 207 }; 208 } 209 setSize(e = 640, t = 480) { 210 this.width = e, this.height = t, this.canvas.width = e, this.canvas.height = t, this.gl.viewport(0, 0, e, t), this.commonUniforms.resolution.value = [e, t], this.commonUniforms.aspectRatio.value = e / t, this.debug("MiniGL.setSize", { 211 width: e, 212 height: t 213 }); 214 } 215 //left, right, top, bottom, near, far 216 setOrthographicCamera(e = 0, t = 0, n = 0, i = -2e3, s = 2e3) { 217 this.commonUniforms.projectionMatrix.value = [2 / this.width, 0, 0, 0, 0, 2 / this.height, 0, 0, 0, 0, 2 / (i - s), 0, e, t, n, 1], this.debug("setOrthographicCamera", this.commonUniforms.projectionMatrix.value); 218 } 219 render() { 220 this.gl.clearColor(0, 0, 0, 0), this.gl.clearDepth(1), this.meshes.forEach(e => e.draw()); 221 } 222} 223class r { 224 constructor({ 225 threshold: r, 226 requireThreshold: s, 227 onlyOnce: t, 228 rootMargin: o, 229 root: n 230 }) { 231 e(this, "__intersectHandlers", []), e(this, "__separateHandlers", []), e(this, "__observer", void 0), this.__observer = new IntersectionObserver(e => { 232 !s || e[0].intersectionRatio >= r ? (this.__intersectHandlers.forEach(r => { 233 r(e); 234 }), t && this.disconnect()) : this.__separateHandlers.forEach(r => { 235 r(e); 236 }); 237 }, { 238 threshold: r, 239 rootMargin: o, 240 root: n 241 }); 242 } 243 observe(e) { 244 this.__observer.observe(e); 245 } 246 onIntersect(e) { 247 this.__intersectHandlers.push(e); 248 } 249 onSeparate(e) { 250 this.__separateHandlers.push(e); 251 } 252 disconnect() { 253 this.__observer.disconnect(); 254 } 255} 256const s = { 257 create: function (e = 1, s = !1, t = !0, o = "0px 0px 0px 0px", n = null) { 258 return new Promise(i => { 259 function c() { 260 i(new r({ 261 threshold: e, 262 requireThreshold: t, 263 onlyOnce: s, 264 rootMargin: o, 265 root: n 266 })); 267 } 268 c(); 269 }); 270 } 271}; 272const e = (object, propertyName, val) => { 273 return propertyName in object ? Object.defineProperty(object, propertyName, { 274 value: val, 275 enumerable: !0, 276 configurable: !0, 277 writable: !0 278 }) : object[propertyName] = val, object; 279}; 280class Gradient { 281 constructor(...t) { 282 e(this, "el", void 0), e(this, "cssVarRetries", 0), e(this, "maxCssVarRetries", 200), e(this, "angle", 0), e(this, "isLoadedClass", !1), e(this, "isScrolling", !1), /*e(this, "isStatic", o.disableAmbientAnimations()),*/e(this, "scrollingTimeout", void 0), e(this, "scrollingRefreshDelay", 200), e(this, "isIntersecting", !1), e(this, "shaderFiles", void 0), e(this, "vertexShader", void 0), e(this, "sectionColors", void 0), e(this, "computedCanvasStyle", void 0), e(this, "conf", void 0), e(this, "uniforms", void 0), e(this, "t", 1253106), e(this, "last", 0), e(this, "width", void 0), e(this, "minWidth", 1111), e(this, "height", 600), e(this, "xSegCount", void 0), e(this, "ySegCount", void 0), e(this, "mesh", void 0), e(this, "material", void 0), e(this, "geometry", void 0), e(this, "minigl", void 0), e(this, "scrollObserver", void 0), e(this, "amp", 320), e(this, "seed", 5), e(this, "freqX", 14e-5), e(this, "freqY", 29e-5), e(this, "freqDelta", 1e-5), e(this, "activeColors", [1, 1, 1, 1]), e(this, "isMetaKey", !1), e(this, "isGradientLegendVisible", !1), e(this, "isMouseDown", !1), e(this, "handleScroll", () => { 283 clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause()); 284 }), e(this, "handleScrollEnd", () => { 285 this.isScrolling = !1, this.isIntersecting && this.play(); 286 }), e(this, "resize", () => { 287 this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthogra
287phicCamera(), this.xSegCount = Math.ceil(this.width * this.conf.density[0]), this.ySegCount = Math.ceil(this.height * this.conf.density[1]), this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount), this.mesh.geometry.setSize(this.width, this.height), this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6; 288 }), e(this, "handleMouseDown", e => { 289 this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate)); 290 }), e(this, "handleMouseUp", () => { 291 this.isMouseDown = !1; 292 }), e(this, "animate", e => { 293 if (!this.shouldSkipFrame(e) || this.isMouseDown) { 294 if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) { 295 let e = 160; 296 this.isMetaKey && (e = -160), this.t += e; 297 } 298 this.mesh.material.uniforms.u_time.value = this.t, this.minigl.render(); 299 } 300 if (0 !== this.last && this.isStatic) return this.minigl.render(), void this.disconnect(); 301 (this.isIntersecting && this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate); 302 }), e(this, "addIsLoadedClass", () => { 303 this.isIntersecting && !this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(() => { 304 this.el.parentElement.classList.add("isLoaded"); 305 }, 3e3)); 306 }), e(this, "pause", () => { 307 this.conf.playing = false; 308 }), e(this, "play", () => { 309 requestAnimationFrame(this.animate), this.conf.playing = true; 310 }), e(this, "initGradient", (selector, colors) => { 311 this.el = document.querySelector(selector); 312 this.connect(); 313 this.sectionColors = colors; 314 return this; 315 }); 316 } 317 async connect() { 318 this.shaderFiles = { 319 vertex: "varying vec3 v_color;\n\nvoid main() {\n float time = u_global.noiseSpeed == 0.01 ? u_static_time + u_mouse_time : u_mouse_time + u_time * u_global.noiseSpeed;\n\n vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;\n\n vec2 st = 1. - uvNorm.xy;\n\n //\n // Tilting the plane\n //\n\n // Front-to-back tilt\n float tilt = resolution.y / 2.0 * uvNorm.y;\n\n // Left-to-right angle\n float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline;\n\n // Up-down shift to offset incline\n float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y);\n\n //\n // Vertex noise\n //\n\n float noise = snoise(vec3(\n noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow,\n noiseCoord.y * u_vertDeform.noiseFreq.y,\n time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed\n )) * u_vertDeform.noiseAmp;\n\n // Fade noise to zero at edges\n noise *= 1.0 - pow(abs(uvNorm.y), 2.0);\n\n // Clamp to 0\n noise = max(0.0, noise);\n\n vec3 pos = vec3(\n position.x,\n position.y + tilt + incline + noise - offset,\n position.z\n );\n\n //\n // Vertex color, to be passed to fragment shader\n //\n\n if (u_active_colors[0] == 1.) {\n v_color = u_baseColor;\n }\n\n for (int i = 0; i < u_waveLayers_length; i++) {\n if (u_active_colors[i + 1] == 1.) {\n WaveLayers layer = u_waveLayers[i];\n\n float noise = smoothstep(\n layer.noiseFloor,\n layer.noiseCeil,\n snoise(vec3(\n noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow,\n noiseCoord.y * layer.noiseFreq.y,\n time * layer.noiseSpeed + layer.noiseSeed\n )) / 2.0 + 0.5\n );\n\n v_color = blendNormal(v_color, layer.color, pow(noise, 4.));\n }\n }\n\n //\n // Finish\n //\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n}", 320 noise: "//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : stegu\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n// https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}
320\n\nvec4 mod289(vec4 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise(vec3 v)\n{\n const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;\n const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n vec3 i = floor(v + dot(v, C.yyy) );\n vec3 x0 = v - i + dot(i, C.xxx) ;\n\n// Other corners\n vec3 g = step(x0.yzx, x0.xyz);\n vec3 l = 1.0 - g;\n vec3 i1 = min( g.xyz, l.zxy );\n vec3 i2 = max( g.xyz, l.zxy );\n\n // x0 = x0 - 0.0 + 0.0 * C.xxx;\n // x1 = x0 - i1 + 1.0 * C.xxx;\n // x2 = x0 - i2 + 2.0 * C.xxx;\n // x3 = x0 - 1.0 + 3.0 * C.xxx;\n vec3 x1 = x0 - i1 + C.xxx;\n vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n i = mod289(i);\n vec4 p = permute( permute( permute(\n i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n float n_ = 0.142857142857; // 1.0/7.0\n vec3 ns = n_ * D.wyz - D.xzx;\n\n vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)\n\n vec4 x_ = floor(j * ns.z);\n vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)\n\n vec4 x = x_ *ns.x + ns.yyyy;\n vec4 y = y_ *ns.x + ns.yyyy;\n vec4 h = 1.0 - abs(x) - abs(y);\n\n vec4 b0 = vec4( x.xy, y.xy );\n vec4 b1 = vec4( x.zw, y.zw );\n\n //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n vec4 s0 = floor(b0)*2.0 + 1.0;\n vec4 s1 = floor(b1)*2.0 + 1.0;\n vec4 sh = -step(h, vec4(0.0));\n\n vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n vec3 p0 = vec3(a0.xy,h.x);\n vec3 p1 = vec3(a0.zw,h.y);\n vec3 p2 = vec3(a1.xy,h.z);\n vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n\n// Mix final noise value\n vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n m = m * m;\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}", 321 blend: "//\n// https://github.com/jamieowen/glsl-blend\n//\n\n// Normal\n\nvec3 blendNormal(vec3 base, vec3 blend) {\n\treturn blend;\n}\n\nvec3 blendNormal(vec3 base, vec3 blend, float opacity) {\n\treturn (blendNormal(base, blend) * opacity + base * (1.0 - opacity));\n}\n", 322 fragment: "varying vec3 v_color;\n\nvoid main() {\n vec3 color = v_color;\n if (u_darken_top == 1.0) {\n vec2 st = gl_FragCoord.xy/resolution.xy;\n color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4;\n }\n gl_FragColor = vec4(color, 1.0);\n}" 323 }, this.conf = { 324 presetName: "", 325 wireframe: false, 326 density: [.06, .16], 327 zoom: 1, 328 rotation: 0, 329 playing: true 330 }, this.minigl = new MiniGl(this.el, null, null, !0), 331 // requestAnimationFrame(() => { 332 // this.el && (this.computedCanvasStyle = getComputedStyle(this.el), this.waitForCssVars()) 333 // }), 334 this.scrollObserver = await s.create(0, !1, !1, "150px 0px 150px 0px"), this.scrollObserver.observe(this.el), this.scrollObserver.onSeparate(() => { 335 window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.isIntersecting = !1, this.conf.playing && this.pause(); 336 }), this.scrollObserver.onIntersect(() => { 337 window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play(); 338 }); 339 // */ 340 } 341 disconnect() { 342 this.scrollObserver && (window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener("resize", this.resize); 343 } 344 initMaterial() { 345 this.uniforms = { 346 u_time: new this.minigl.Uniform({ 347 value: 0 348 }), 349 u_static_time: new this.minigl.Uniform({ 350 value: 0 351 }), 352 u_mouse_time: new this.minigl.Uniform({ 353 value: 0 354 }), 355 u_static: new this.minigl.Uniform({ 356 value: 0 357 }), 358 u_shadow_power: new this.minigl.Uniform({ 359 value: 5 360 }), 361 u_darken_top: new this.minigl.Uniform({ 362 value: "" === this.el.dataset.jsDarkenTop ? 1 : 0 363 }), 364 u_active_colors: new this.minigl.Uniform({ 365 value: this.activeColors, 366 type: "vec4" 367 }), 368 u_global: new this.minigl.Uniform({ 369 value: { 370 noiseFreq: new this.minigl.Uniform({ 371 value: [this.freqX, this.freqY], 372 type: "vec2" 373 }), 374 noiseSpeed: new this.minigl.Uniform({ 375 value: 5e-6 376 }) 377 }, 378 type: "struct" 379 }), 380 u_vertDeform: new this.minigl.Uniform({ 381 value: { 382 incline: new this.minigl.Uniform({ 383 value: Math.sin(this.angle) / Math.cos(this.angle) 384 }), 385 offsetTop: new this.minigl.Uniform({ 386 value: -.5 387 }), 388 offsetBottom: new this.minigl.Uniform({ 389 value: -.5 390 }), 391 noiseFreq: new this.minigl.Uniform({ 392 value: [3, 4], 393 type: "vec2" 394 }), 395 noiseAmp: new this.minigl.Uniform({ 396 value: this.amp 397 }), 398 noiseSpeed: new this.minigl.Uniform({ 399 value: 10 400 }),
401 noiseFlow: new this.minigl.Uniform({ 402 value: 3 403 }), 404 noiseSeed: new this.minigl.Uniform({ 405 value: this.seed 406 }) 407 }, 408 type: "struct", 409 excludeFrom: "fragment" 410 }), 411 u_baseColor: new this.minigl.Uniform({ 412 value: this.sectionColors[0], 413 type: "vec3", 414 excludeFrom: "fragment" 415 }), 416 u_waveLayers: new this.minigl.Uniform({ 417 value: [], 418 excludeFrom: "fragment", 419 type: "array" 420 }) 421 }; 422 for (let e = 1; e < this.sectionColors.length; e += 1) this.uniforms.u_waveLayers.value.push(new this.minigl.Uniform({ 423 value: { 424 color: new this.minigl.Uniform({ 425 value: this.sectionColors[e], 426 type: "vec3" 427 }), 428 noiseFreq: new this.minigl.Uniform({ 429 value: [2 + e / this.sectionColors.length, 3 + e / this.sectionColors.length], 430 type: "vec2" 431 }), 432 noiseSpeed: new this.minigl.Uniform({ 433 value: 11 + .3 * e 434 }), 435 noiseFlow: new this.minigl.Uniform({ 436 value: 6.5 + .3 * e 437 }), 438 noiseSeed: new this.minigl.Uniform({ 439 value: this.seed + 10 * e 440 }), 441 noiseFloor: new this.minigl.Uniform({ 442 value: .1 443 }), 444 noiseCeil: new this.minigl.Uniform({ 445 value: .63 + .07 * e 446 }) 447 }, 448 type: "struct" 449 })); 450 return this.vertexShader = [this.shaderFiles.noise, this.shaderFiles.blend, this.shaderFiles.vertex].join("\n\n"), new this.minigl.Material(this.vertexShader, this.shaderFiles.fragment, this.uniforms); 451 } 452 initMesh() { 453 this.material = this.initMaterial(), this.geometry = new this.minigl.PlaneGeometry(), this.mesh = new this.minigl.Mesh(this.geometry, this.material); 454 } 455 shouldSkipFrame(e) { 456 return !!window.document.hidden || !this.conf.playing || parseInt(e, 10) % 2 == 0 || void 0; 457 } 458 updateFrequency(e) { 459 this.freqX += e, this.freqY += e; 460 } 461 toggleColor(index) { 462 this.activeColors[index] = 0 === this.activeColors[index] ? 1 : 0; 463 } 464 showGradientLegend() { 465 this.width > this.minWidth && (this.isGradientLegendVisible = !0, document.body.classList.add("isGradientLegendVisible")); 466 } 467 hideGradientLegend() { 468 this.isGradientLegendVisible = !1, document.body.classList.remove("isGradientLegendVisible"); 469 } 470 init() { 471 this.initMesh(), this.resize(), requestAnimationFrame(this.animate), window.addEventListener("resize", this.resize); 472 } 473 474 //TODO: cleanup next 2 methods 475 /* 476 * Waiting for the css variables to become available, usually on page load before we can continue. 477 * Using default colors assigned below if no variables have been found after maxCssVarRetries 478 */ 479 waitForCssVars() { 480 if (this.computedCanvasStyle && -1 !== this.computedCanvasStyle.getPropertyValue("--ui-fluid-1").indexOf("#")) this.init(), this.addIsLoadedClass();else { 481 if (this.cssVarRetries += 1, this.cssVarRetries > this.maxCssVarRetries) { 482 return this.sectionColors = [16711680, 16711680, 16711935, 65280, 255], void this.init(); 483 } 484 requestAnimationFrame(() => this.waitForCssVars()); 485 } 486 } 487 /* 488 * Initializes the four section colors by retrieving them from css variables. 489 */ 490 initGradientColors() { 491 this.sectionColors = ["--ui-fluid-1", "--ui-fluid-2", "--ui-fluid-3", "--ui-fluid-4"].map(cssPropertyName => { 492 let hex = this.computedCanvasStyle.getPropertyValue(cssPropertyName).trim(); 493 //Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work. 494 if (4 === hex.length) { 495 const hexTemp = hex.substr(1).split("").map(hexTemp => hexTemp + hexTemp).join(""); 496 hex = `#${hexTemp}`; 497 } 498 return hex && `0x${hex.substr(1)}`; 499 }).filter(Boolean); 500 } 501} 502window['uiAnimated_Animation-6'] = (el, canvas, userSettings) => { 503 var id = Math.floor(1000 + Math.random() * 9000); 504 canvas.setAttribute('id', 'ui-fluid-canvas-' + id); 505 canvas.setAttribute('data-transition-in', ''); 506 const normalizeSettings = raw => { 507 return raw; 508 }; 509 const gradient = new Gradient(); 510 gradient.initGradient("#ui-fluid-canvas-" + id, userSettings.colorArray); 511 gradient.init(); 512 let mouse = [0, 0]; 513 const updateMousePosition = e => { 514 const rect = el.getBoundingClientRect(); 515 mouse[0] = (e.clientX - rect.left) / rect.width; 516 mouse[1] = 1 - (e.clientY - rect.top) / rect.height; 517 gradient.material.uniforms.u_mouse_time.value = (mouse[0] + mouse[1]) * 0.003; 518 }; 519 const customUpdateSettings = raw => { 520 // const normalized = normalizeSettings(raw); 521 for (const [k, v] of Object.entries(raw)) { 522 switch (k) { 523 case "colorArray": 524 gradient.material.uniforms.u_baseColor.value = v[0]; 525 for (let i = 1; i < v.length; i++) { 526 if (gradient.material.uniforms.u_waveLayers.value[i - 1]) { 527 gradient.material.uniforms.u_waveLayers.value[i - 1].value.color.value = v[i]; 528 } 529 } 530 break; 531 case "scale": 532 gradient.material.uniforms.u_vertDeform.value.noiseAmp.value = v * 16; 533 break; 534 case 'static': 535 gradient.material.uniforms.u_static.value = v ? 1 : 0; 536 break; 537 case 'progress': 538 if (gradient.material.uniforms.u_global.value.noiseSpeed.value === 0.01) { 539 gradient.material.uniforms.u_static_time.value = v * 0.003; // 1e5; 540 } 541 break; 542 case "speed": 543 if (v === 0) { 544 gradient.pause(); 545 gradient.material.uniforms.u_global.value.noiseSpeed.value = 0.01; 546 break; 547 } 548 const baseSpeed = 5e-6;
549 const minSpeed = 0; 550 const maxSpeed = 1.2e-5; 551 const speedFactor = (v - 40) / 60; 552 const finalSpeed = baseSpeed + speedFactor * (speedFactor < 0 ? baseSpeed - minSpeed : maxSpeed - baseSpeed); 553 gradient.material.uniforms.u_global.value.noiseSpeed.value = finalSpeed; 554 gradient.play(); 555 break; 556 case "intensity": 557 const base = [0.00014, 0.00028]; // intensity 50 558 const min = [0.00001, 0.00002]; 559 const max = [0.00050, 0.00060]; 560 const factor = (v - 50) / 50; // Normalize intensity between -1 and 1 561 gradient.material.uniforms.u_global.value.noiseFreq.value = [base[0] + factor * (factor < 0 ? base[0] - min[0] : max[0] - base[0]), base[1] + factor * (factor < 0 ? base[1] - min[1] : max[1] - base[1])]; 562 break; 563 case 'mouseInteractive': 564 if (v) { 565 el.addEventListener('mousemove', updateMousePosition); 566 } else { 567 el.removeEventListener('mousemove', updateMousePosition); 568 gradient.material.uniforms.u_mouse_time.value = 0; 569 } 570 break; 571 } 572 } 573 }; 574 customUpdateSettings(userSettings); 575 el.animatedBackground = { 576 normalizeSettings, 577 customUpdateSettings, 578 custom: true 579 }; 580};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.