1"use strict"; 2 3window.addEventListener('DOMContentLoaded',() => { 4 5/* 6* Stripe WebGl Gradient Animation 7* All Credits to Stripe.com 8* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and 9* commented out for now. 10* https://kevinhufnagl.com 11*/ 12 13 14//Converting colors to proper format 15function normalizeColor(hexCode) { 16 return [(hexCode >> 16 & 255) / 255, (hexCode >> 8 & 255) / 255, (255 & hexCode) / 255] 17} ["SCREEN", "LINEAR_LIGHT"].reduce((hexCode, t, n) => Object.assign(hexCode, { 18 [t]: n 19}), {}); 20 21//Essential functionality of WebGl 22//t = width 23//n = height 24class MiniGl { 25 constructor(canvas, width, height, debug = false) { 26 const _miniGl = this, 27 debug_output = -1 !== document.location.search.toLowerCase().indexOf("debug=webgl"); 28 _miniGl.canvas = canvas, _miniGl.gl = _miniGl.canvas.getContext("webgl", { 29 antialias: true 30 }), _miniGl.meshes = []; 31 const context = _miniGl.gl; 32 width && height && this.setSize(width, height), _miniGl.lastDebugMsg, _miniGl.debug = debug && debug_output ? function(e) { 33 const t = new Date; 34 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 35 } : () => {}, Object.defineProperties(_miniGl, { 36 Material: { 37 enumerable: false, 38 value: class { 39 constructor(vertexShaders, fragments, uniforms = {}) { 40 const material = this; 41 function getShaderByType(type, source) { 42 const shader = context.createShader(type); 43 return context.shaderSource(shader, source), context.compileShader(shader), context.getShaderParameter(shader, context.COMPILE_STATUS) || console.error(context.getShaderInfoLog(shader)), _miniGl.debug("Material.compileShaderSource", { 44 source: source 45 }), shader 46 } 47 function getUniformVariableDeclarations(uniforms, type) { 48 return Object.entries(uniforms).map(([uniform, value]) => value.getDeclaration(uniform, type)).join("\n") 49 } 50 material.uniforms = uniforms, material.uniformInstances = []; 51 52 const prefix = "\n precision highp float;\n "; 53 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 `, 54 material.Source = `\n ${prefix}\n ${getUniformVariableDeclarations(_miniGl.commonUniforms,"fragment")}\n ${getUniformVariableDeclarations(uniforms,"fragment")}\n ${fragments}\n `, 55 material.vertexShader = getShaderByType(context.VERTEX_SHADER, material.vertexSource), 56 material.fragmentShader = getShaderByType(context.FRAGMENT_SHADER, material.Source), 57 material.program = context.createProgram(), 58 context.attachShader(material.program, material.vertexShader), 59 context.attachShader(material.program, material.fragmentShader), 60 context.linkProgram(material.program), 61 context.getProgramParameter(material.program, context.LINK_STATUS) || console.error(context.getProgramInfoLog(material.program)), 62 context.useProgram(material.program), 63 material.attachUniforms(void 0, _miniGl.commonUniforms), 64 material.attachUniforms(void 0, material.uniforms) 65 } 66 //t = uniform 67 attachUniforms(name, uniforms) { 68 //n = material 69 const material = this; 70 void 0 === name ? Object.entries(uniforms).forEac
70h(([name, uniform]) => { 71 material.attachUniforms(name, uniform) 72 }) : "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", { 73 name: name, 74 uniform: uniforms 75 }), material.uniformInstances.push({ 76 uniform: uniforms, 77 location: context.getUniformLocation(material.program, name) 78 })) 79 } 80 } 81 }, 82 Uniform: { 83 enumerable: !1, 84 value: class { 85 constructor(e) { 86 this.type = "float", Object.assign(this, e); 87 this.typeFn = { 88 float: "1f", 89 int: "1i", 90 vec2: "2fv", 91 vec3: "3fv", 92 vec4: "4fv", 93 mat4: "Matrix4fv" 94 } [this.type] || "1f", this.update() 95 } 96 update(value) { 97 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) 98 } 99 //e - name 100 //t - type 101 //n - length 102 getDeclaration(name, type, length) { 103 const uniform = this; 104 if (uniform.excludeFrom !== type) { 105 if ("array" === uniform.type) return uniform.value[0].getDeclaration(name, type, uniform.value.length) + `\nconst int ${name}_length = ${uniform.value.length};`; 106 if ("struct" === uniform.type) { 107 let name_no_prefix = name.replace("u_", ""); 108 return name_no_prefix = 109 name_no_prefix.charAt(0).toUpperCase() + 110 name_no_prefix.slice(1), 111 `uniform struct ${name_no_prefix} 112 {\n` + 113 Object.entries(uniform.value).map(([name, uniform]) => 114 uniform.getDeclaration(name, type) 115 .replace(/^uniform/, "")) 116 .join("") 117 + `\n} ${name}${length>0?`[${length}]`:""};` 118 } 119 return `uniform ${uniform.type} ${name}${length>0?`[${length}]`:""};` 120 } 121 } 122 } 123 }, 124 PlaneGeometry: { 125 enumerable: !1, 126 value: class { 127 constructor(width, height, n, i, orientation) { 128 context.createBuffer(), this.attributes = { 129 position: new _miniGl.Attribute({ 130 target: context.ARRAY_BUFFER, 131 size: 3 132 }), 133 uv: new _miniGl.Attribute({ 134 target: context.ARRAY_BUFFER, 135 size: 2 136 }), 137 uvNorm: new _miniGl.Attribute({ 138 target: context.ARRAY_BUFFER, 139 size: 2 140 }), 141 index: new _miniGl.Attribute({ 142 target: context.ELEMENT_ARRAY_BUFFER, 143 size: 3, 144 type: context.UNSIGNED_SHORT 145 }) 146 }, this.setTopology(n, i), this.setSize(width, height, orientation) 147 } 148 setTopology(e = 1, t = 1) { 149 const n = this; 150 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); 151 for (let e = 0; e <= n.ySegCount; e++) 152 for (let t = 0; t <= n.xSegCount; t++) { 153 const i = e * (n.xSegCount + 1) + t; 154 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) { 155 const s = e * n.xSegCount + t; 156 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 157 } 158 }
159 n.attributes.uv.update(), n.attributes.uvNorm.update(), n.attributes.index.update(), _miniGl.debug("Geometry.setTopology", { 160 uv: n.attributes.uv, 161 uvNorm: n.attributes.uvNorm, 162 index: n.attributes.index 163 }) 164 } 165 setSize(width = 1, height = 1, orientation = "xz") { 166 const geometry = this; 167 geometry.width = width, 168 geometry.height = height, 169 geometry.orientation = orientation, 170 geometry.attributes.position.values && geometry.attributes.position.values.length === 3 * geometry.vertexCount 171 || (geometry.attributes.position.values = new Float32Array(3 * geometry.vertexCount)); 172 const o = width / -2, 173 r = height / -2, 174 segment_width = width / geometry.xSegCount, 175 segment_height = height / geometry.ySegCount; 176 for (let yIndex= 0; yIndex <= geometry.ySegCount; yIndex++) { 177 const t = r + yIndex * segment_height; 178 for (let xIndex = 0; xIndex <= geometry.xSegCount; xIndex++) { 179 const r = o + xIndex * segment_width, 180 l = yIndex * (geometry.xSegCount + 1) + xIndex; 181 geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[0])] = r, 182 geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[1])] = -t 183 } 184 } 185 geometry.attributes.position.update(), _miniGl.debug("Geometry.setSize", { 186 position: geometry.attributes.position 187 }) 188 } 189 } 190 }, 191 Mesh: { 192 enumerable: !1, 193 value: class { 194 constructor(geometry, material) { 195 const mesh = this; 196 mesh.geometry = geometry, mesh.material = material, mesh.wireframe = !1, mesh.attributeInstances = [], Object.entries(mesh.geometry.attributes).forEach(([e, attribute]) => { 197 mesh.attributeInstances.push({ 198 attribute: attribute, 199 location: attribute.attach(e, mesh.material.program) 200 }) 201 }), _miniGl.meshes.push(mesh), _miniGl.debug("Mesh.constructor", { 202 mesh: mesh 203 }) 204 } 205 draw() { 206 context.useProgram(this.material.program), this.material.uniformInstances.forEach(({ 207 uniform: e, 208 location: t 209 }) => e.update(t)), this.attributeInstances.forEach(({ 210 attribute: e, 211 location: t 212 }) => e.use(t)), context.drawElements(this.wireframe ? context.LINES : context.TRIANGLES, this.geometry.attributes.index.values.length, context.UNSIGNED_SHORT, 0) 213 } 214 remove() { 215 _miniGl.meshes = _miniGl.meshes.filter(e => e != this) 216 } 217 } 218 }, 219 Attribute: { 220 enumerable: !1, 221 value: class { 222 constructor(e) { 223 this.type = context.FLOAT, this.normalized = !1, this.buffer = context.createBuffer(), Object.assign(this, e), this.update() 224 } 225 update() { 226 void 0 !== this.values && (context.bindBuffer(this.target, this.buffer), context.bufferData(this.target, this.values, context.STATIC_DRAW)) 227 } 228 attach(e, t) { 229 const n = context.getAttribLocation(t, e); 230 return this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(n), context.vertexAttribPointer(n, this.size, this.type, this.normalized, 0, 0)), n 231 } 232 use(e) { 233 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)) 234 } 235 } 236 } 237 }); 238 const a = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; 239 _miniGl.commonUniforms = { 240 projectionMatrix: new _miniGl.Uniform({ 241 type: "mat4", 242 value: a 243 }), 244 modelViewMatrix: new _miniGl.Uniform({ 245 type: "mat4", 246 value: a 247 }), 248 resolution: new _miniGl.Uniform({ 249 type: "vec2", 250 value: [1, 1] 251 }), 252 aspectRatio: new _miniGl.Uniform({ 253 type: "float", 254 value: 1 255 }) 256 } 257 } 258 setSize(e = 640, t = 480) { 259 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", { 260 width: e, 261 height: t 262 }) 263 } 264 //left, right, top, bottom, near, far
265 setOrthographicCamera(e = 0, t = 0, n = 0, i = -2e3, s = 2e3) { 266 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) 267 } 268 render() { 269 this.gl.clearColor(0, 0, 0, 0), this.gl.clearDepth(1), this.meshes.forEach(e => e.draw()) 270 } 271} 272 273 274 275//Sets initial properties 276function e(object, propertyName, val) { 277 return propertyName in object ? Object.defineProperty(object, propertyName, { 278 value: val, 279 enumerable: !0, 280 configurable: !0, 281 writable: !0 282 }) : object[propertyName] = val, object 283} 284 285//Gradient object 286class Gradient { 287 constructor(...t) { 288 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", () => { 289 clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause()) 290 }), e(this, "handleScrollEnd", () => { 291 this.isScrolling = !1, this.isIntersecting && this.play() 292 }), e(this, "resize", () => { 293 this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthographicCamera(), 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 294 }), e(this, "handleMouseDown", e => { 295 this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate)) 296 }), e(this, "handleMouseUp", () => { 297 this.isMouseDown = !1 298 }), e(this, "animate", e => { 299 if (!this.shouldSkipFrame(e) || this.isMouseDown) { 300 if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) { 301 let e = 160; 302 this.isMetaKey && (e = -160), this.t += e 303 } 304 this.mesh.material.uniforms.u_time.value = this.t, this.minigl.render() 305 306 } 307 if (0 !== this.last && this.isStatic) return this.minigl.render(), void this.disconnect(); 308 (/*this.isIntersecting && */this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate) 309 }), e(this, "addIsLoadedClass", () => { 310 /*this.isIntersecting && */!this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(() => { 311 this.el.parentElement.classList.add("isLoaded") 312 }, 3e3)) 313 }), e(this, "pause", () => { 314 this.conf.playing = false 315 }), e(this, "play", () => { 316 requestAnimationFrame(this.animate), this.conf.playing = true 317 }), e(this,"initGradient", (selector) => { 318 this.el = document.querySelector(selector); 319 this.connect(); 320 return this; 321 }) 322 } 323 async connect() { 324 this.shaderFiles = { 325 vertex: "varying vec3 v_color;\n\nvoid main() {\n float time = u_time * u_global.noiseSpeed;\n\n vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;
325\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}", 326 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}\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;
326\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}", 327 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\n// Screen\n\nfloat blendScreen(float base, float blend) {\n\treturn 1.0-((1.0-base)*(1.0-blend));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend) {\n\treturn vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend, float opacity) {\n\treturn (blendScreen(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Multiply\n\nvec3 blendMultiply(vec3 base, vec3 blend) {\n\treturn base*blend;\n}\n\nvec3 blendMultiply(vec3 base, vec3 blend, float opacity) {\n\treturn (blendMultiply(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Overlay\n\nfloat blendOverlay(float base, float blend) {\n\treturn base<0.5?(2.0*base*blend):(1.0-2.0*(1.0-base)*(1.0-blend));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend) {\n\treturn vec3(blendOverlay(base.r,blend.r),blendOverlay(base.g,blend.g),blendOverlay(base.b,blend.b));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend, float opacity) {\n\treturn (blendOverlay(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Hard light\n\nvec3 blendHardLight(vec3 base, vec3 blend) {\n\treturn blendOverlay(blend,base);\n}\n\nvec3 blendHardLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendHardLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Soft light\n\nfloat blendSoftLight(float base, float blend) {\n\treturn (blend<0.5)?(2.0*base*blend+base*base*(1.0-2.0*blend)):(sqrt(base)*(2.0*blend-1.0)+2.0*base*(1.0-blend));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend) {\n\treturn vec3(blendSoftLight(base.r,blend.r),blendSoftLight(base.g,blend.g),blendSoftLight(base.b,blend.b));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendSoftLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color dodge\n\nfloat blendColorDodge(float base, float blend) {\n\treturn (blend==1.0)?blend:min(base/(1.0-blend),1.0);\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend) {\n\treturn vec3(blendColorDodge(base.r,blend.r),blendColorDodge(base.g,blend.g),blendColorDodge(base.b,blend.b));\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color burn\n\nfloat blendColorBurn(float base, float blend) {\n\treturn (blend==0.0)?blend:max((1.0-((1.0-base)/blend)),0.0);\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend) {\n\treturn vec3(blendColorBurn(base.r,blend.r),blendColorBurn(base.g,blend.g),blendColorBurn(base.b,blend.b));\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Vivid Light\n\nfloat blendVividLight(float base, float blend) {\n\treturn (blend<0.5)?blendColorBurn(base,(2.0*blend)):blendColorDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend) {\n\treturn vec3(blendVividLight(base.r,blend.r),blendVividLight(base.g,blend.g),blendVividLight(base.b,blend.b));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendVividLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Lighten\n\nfloat blendLighten(float base, float blend) {\n\treturn max(blend,base);\n}\n\nvec3 blendLighten(vec3 base, vec3 blend) {\n\treturn vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));\n}\n\nvec3 blendLighten(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLighten(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear burn\n\nfloat blendLinearBurn(float base, float blend) {\n\t// Note : Same implementation as BlendSubtractf\n\treturn max(base+blend-1.0,0.0);\n}
327\n\nvec3 blendLinearBurn(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendSubtract\n\treturn max(base+blend-vec3(1.0),vec3(0.0));\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear dodge\n\nfloat blendLinearDodge(float base, float blend) {\n\t// Note : Same implementation as BlendAddf\n\treturn min(base+blend,1.0);\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendAdd\n\treturn min(base+blend,vec3(1.0));\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear light\n\nfloat blendLinearLight(float base, float blend) {\n\treturn blend<0.5?blendLinearBurn(base,(2.0*blend)):blendLinearDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend) {\n\treturn vec3(blendLinearLight(base.r,blend.r),blendLinearLight(base.g,blend.g),blendLinearLight(base.b,blend.b));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearLight(base, blend) * opacity + base * (1.0 - opacity));\n}", 328 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}" 329 }, 330 this.conf = { 331 presetName: "", 332 wireframe: false, 333 density: [.06, .16], 334 zoom: 1, 335 rotation: 0, 336 playing: true 337 }, 338 document.querySelectorAll("canvas").length < 1 ? console.log("DID NOT LOAD HERO STRIPE CANVAS") : ( 339 340 this.minigl = new MiniGl(this.el, null, null, !0), 341 requestAnimationFrame(() => { 342 this.el && (this.computedCanvasStyle = getComputedStyle(this.el), this.waitForCssVars()) 343 }) 344 /* 345 this.scrollObserver = await s.create(.1, !1), 346 this.scrollObserver.observe(this.el), 347 this.scrollObserver.onSeparate(() => { 348 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() 349 }), 350 this.scrollObserver.onIntersect(() => { 351 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() 352 })*/ 353 354 ) 355 } 356 disconnect() { 357 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) 358 } 359 initMaterial() { 360 this.uniforms = { 361 u_time: new this.minigl.Uniform({ 362 value: 0 363 }), 364 u_shadow_power: new this.minigl.Uniform({ 365 value: 5 366 }), 367 u_darken_top: new this.minigl.Uniform({ 368 value: "" === this.el.dataset.jsDarkenTop ? 1 : 0 369 }), 370 u_active_colors: new this.minigl.Uniform({ 371 value: this.activeColors, 372 type: "vec4" 373 }), 374 u_global: new this.minigl.Uniform({ 375 value: { 376 noiseFreq: new this.minigl.Uniform({ 377 value: [this.freqX, this.freqY], 378 type: "vec2" 379 }), 380 noiseSpeed: new this.minigl.Uniform({ 381 value: 5e-6 382 }) 383 }, 384 type: "struct" 385 }), 386 u_vertDeform: new this.minigl.Uniform({ 387 value: { 388 incline: new this.minigl.Uniform({ 389 value: Math.sin(this.angle) / Math.cos(this.angle) 390 }), 391 offsetTop: new this.minigl.Uniform({ 392 value: -.5 393 }), 394 offsetBottom: new this.minigl.Uniform({ 395 value: -.5 396 }), 397 noiseFreq: new this.minigl.Uniform({ 398 value: [3, 4], 399 type: "vec2" 400 }), 401 noiseAmp: new this.minigl.Uniform({ 402 value: this.amp 403 }), 404 noiseSpeed: new this.minigl.Uniform({ 405 value: 10 406 }),
407 noiseFlow: new this.minigl.Uniform({ 408 value: 3 409 }), 410 noiseSeed: new this.minigl.Uniform({ 411 value: this.seed 412 }) 413 }, 414 type: "struct", 415 excludeFrom: "fragment" 416 }), 417 u_baseColor: new this.minigl.Uniform({ 418 value: this.sectionColors[0], 419 type: "vec3", 420 excludeFrom: "fragment" 421 }), 422 u_waveLayers: new this.minigl.Uniform({ 423 value: [], 424 excludeFrom: "fragment", 425 type: "array" 426 }) 427 }; 428 for (let e = 1; e < this.sectionColors.length; e += 1) this.uniforms.u_waveLayers.value.push(new this.minigl.Uniform({ 429 value: { 430 color: new this.minigl.Uniform({ 431 value: this.sectionColors[e], 432 type: "vec3" 433 }), 434 noiseFreq: new this.minigl.Uniform({ 435 value: [2 + e / this.sectionColors.length, 3 + e / this.sectionColors.length], 436 type: "vec2" 437 }), 438 noiseSpeed: new this.minigl.Uniform({ 439 value: 11 + .3 * e 440 }), 441 noiseFlow: new this.minigl.Uniform({ 442 value: 6.5 + .3 * e 443 }), 444 noiseSeed: new this.minigl.Uniform({ 445 value: this.seed + 10 * e 446 }), 447 noiseFloor: new this.minigl.Uniform({ 448 value: .1 449 }), 450 noiseCeil: new this.minigl.Uniform({ 451 value: .63 + .07 * e 452 }) 453 }, 454 type: "struct" 455 })); 456 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) 457 } 458 initMesh() { 459 this.material = this.initMaterial(), this.geometry = new this.minigl.PlaneGeometry, this.mesh = new this.minigl.Mesh(this.geometry, this.material) 460 } 461 shouldSkipFrame(e) { 462 return !!window.document.hidden || (!this.conf.playing || (parseInt(e, 10) % 2 == 0 || void 0)) 463 } 464 updateFrequency(e) { 465 this.freqX += e, this.freqY += e 466 } 467 toggleColor(index) { 468 this.activeColors[index] = 0 === this.activeColors[index] ? 1 : 0 469 } 470 showGradientLegend() { 471 this.width > this.minWidth && (this.isGradientLegendVisible = !0, document.body.classList.add("isGradientLegendVisible")) 472 } 473 hideGradientLegend() { 474 this.isGradientLegendVisible = !1, document.body.classList.remove("isGradientLegendVisible") 475 } 476 init() { 477 this.initGradientColors(), this.initMesh(), this.resize(), requestAnimationFrame(this.animate), window.addEventListener("resize", this.resize) 478 } 479 /* 480 * Waiting for the css variables to become available, usually on page load before we can continue. 481 * Using default colors assigned below if no variables have been found after maxCssVarRetries 482 */ 483 waitForCssVars() { 484 if (this.computedCanvasStyle && -1 !== this.computedCanvasStyle.getPropertyValue("--gradient-color-1").indexOf("#")) this.init(), this.addIsLoadedClass(); 485 else { 486 if (this.cssVarRetries += 1, this.cssVarRetries > this.maxCssVarRetries) { 487 return this.sectionColors = [16711680, 16711680, 16711935, 65280, 255],void this.init(); 488 } 489 requestAnimationFrame(() => this.waitForCssVars()) 490 } 491 } 492 /* 493 * Initializes the four section colors by retrieving them from css variables. 494 */ 495 initGradientColors() { 496 this.sectionColors = ["--gradient-color-1", "--gradient-color-2", "--gradient-color-3", "--gradient-color-4"].map(cssPropertyName => { 497 let hex = this.computedCanvasStyle.getPropertyValue(cssPropertyName).trim(); 498 //Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work. 499 if (4 === hex.length) { 500 const hexTemp = hex.substr(1).split("").map(hexTemp => hexTemp + hexTemp).join(""); 501 hex = `#${hexTemp}` 502 } 503 return hex && `0x${hex.substr(1)}` 504 }
504).filter(Boolean).map(normalizeColor) 505 } 506} 507 508 509 510 511/* 512*Finally initializing the Gradient class, assigning a canvas to it and calling Gradient.connect() which initializes everything, 513* Use Gradient.pause() and Gradient.play() for controls. 514* 515* Here are some default property values you can change anytime: 516* Amplitude: Gradient.amp = 0 517* Colors: Gradient.sectionColors (if you change colors, use normalizeColor(#hexValue)) before you assign it. 518* 519* 520* Useful functions 521* Gradient.toggleColor(index) 522* Gradient.updateFrequency(freq) 523*/ 524// var gradient = new Gradient(); 525// gradient.initGradient("#gradient-canvas"); 526 527// ÐÑÐ°Ð´Ð¸ÐµÐ½Ñ Ð´Ð»Ñ Ð²ÑоÑоÑÑепеннÑÑ Ð±Ð»Ð¾ÐºÐ¾Ð² 528 (function(){ 529 class Gradient { 530 constructor(canvas) { 531 this.canvas = canvas; 532 this.gl = canvas.getContext("webgl2"); 533 this.startTime = performance.now(); 534 535 this.resize(); 536 window.addEventListener("resize", () => this.resize()); 537 538 this.colors = this.readColors(); 539 this.initProgram(); 540 requestAnimationFrame(this.animate.bind(this)); 541 } 542 543 readColors() { 544 const style = getComputedStyle(this.canvas); 545 const cols = []; 546 for (let i = 1; i <= 4; i++) { 547 let hex = style.getPropertyValue(`--gradient-color-${i}`).trim(); 548 if (!hex) continue; 549 if (hex.length === 4) { 550 hex = "#" + [...hex.slice(1)].map(c => c+c).join(""); 551 } 552 const bigint = parseInt(hex.slice(1), 16); 553 const r = ((bigint >> 16) & 255) / 255; 554 const g = ((bigint >> 8) & 255) / 255; 555 const b = (bigint & 255) / 255; 556 cols.push([r, g, b]); 557 } 558 while (cols.length < 4) cols.push([1,1,1]); 559 return cols; 560 } 561 562 resize() { 563 this.canvas.width = this.canvas.clientWidth; 564 this.canvas.height = this.canvas.clientHeight; 565 this.gl.viewport(0, 0, this.canvas.width, this.canvas.height); 566 } 567 568 initProgram() { 569 const vs = ` 570 attribute vec2 a_position; 571 void main() { 572 gl_Position = vec4(a_position, 0.0, 1.0); 573 } 574 `; 575 576 const fs = ` 577 precision mediump float; 578 uniform float u_time; 579 uniform vec2 u_resolution; 580 uniform vec3 u_colors[4]; 581 582 void main() { 583 vec2 uv = gl_FragCoord.xy / u_resolution; 584 float wave = sin(uv.x * 8.0 + u_time*0.6) 585 + cos(uv.y * 6.0 + u_time*0.4); 586 587 float mix1 = smoothstep(-1.0,1.0,wave); 588 vec3 colA = mix(u_colors[0], u_colors[1], mix1); 589 590 float mix2 = smoothstep(-1.0,1.0,cos(wave*0.5+u_time*0.3)); 591 vec3 colB = mix(u_colors[2], u_colors[3], mix2); 592 593 vec3 finalCol = mix(colA, colB, 0.5 + 0.5*sin(u_time*0.2)); 594 gl_FragColor = vec4(finalCol, 1.0); 595 } 596 `; 597 598 const gl = this.gl; 599 const vsObj = this.compile(gl.VERTEX_SHADER, vs); 600 const fsObj = this.compile(gl.FRAGMENT_SHADER, fs); 601 this.program = gl.createProgram(); 602 gl.attachShader(this.program, vsObj); 603 gl.attachShader(this.program, fsObj); 604 gl.linkProgram(this.program); 605 gl.useProgram(this.program); 606 607 // fullscreen quad 608 const buffer = gl.createBuffer(); 609 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 610 gl.bufferData(gl.ARRAY_BUFFER, 611 new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), 612 gl.STATIC_DRAW); 613 const posLoc = gl.getAttribLocation(this.program, "a_position"); 614 gl.enableVertexAttribArray(posLoc); 615 gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); 616 617 // uniforms 618 this.uTime = gl.getUniformLocation(this.program, "u_time"); 619 this.uResolution = gl.getUniformLocation(this.program, "u_resolution"); 620 this.uColors = []; 621 for (let i=0; i<4; i++) { 622 this.uColors[i] = gl.getUniformLocation(this.program, `u_colors[${i}]`); 623 } 624 625 this.updateColors(); 626 } 627 628 updateColors() { 629 const gl = this.gl; 630 for (let i=0; i<4; i++) { 631 gl.uniform3fv(this.uColors[i], this.colors[i]); 632 } 633 } 634
635 compile(type, src) { 636 const gl = this.gl; 637 const shader = gl.createShader(type); 638 gl.shaderSource(shader, src); 639 gl.compileShader(shader); 640 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 641 console.error(gl.getShaderInfoLog(shader)); 642 } 643 return shader; 644 } 645 646 animate() { 647 const gl = this.gl; 648 const time = (performance.now() - this.startTime) / 1000.0; 649 650 gl.clearColor(0,0,0,1); 651 gl.clear(gl.COLOR_BUFFER_BIT); 652 653 gl.useProgram(this.program); 654 gl.uniform1f(this.uTime, time); 655 gl.uniform2f(this.uResolution, this.canvas.width, this.canvas.height); 656 657 gl.drawArrays(gl.TRIANGLES, 0, 6); 658 659 requestAnimationFrame(this.animate.bind(this)); 660 } 661 } 662 663 function callGradient(elemID) { 664 try { 665 new Gradient(document.getElementById(elemID)); 666 } catch (error) { 667 console.warn(`ÐÐ»ÐµÐ¼ÐµÐ½Ñ Ð½Ðµ найден ${error}`); 668 } 669 } 670 671 callGradient("decisions-canvas"); 672 callGradient("decisions-platform-canvas"); 673 callGradient("technology-canvas"); 674 // callGradient("achievements-canvas"); 675 callGradient("academy-canvas"); 676 callGradient("statistics-canvas"); 677 callGradient("cooperation-canvas"); 678 callGradient("decisions-core-canvas"); 679 callGradient("copilot-core-canvas"); 680 callGradient("about-core-canvas"); 681 callGradient("casebook-core-canvas"); 682 callGradient("casebook-copilot-canvas"); 683 684 })(); 685});
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.