@firecms/neat 0.5.0 → 0.5.1

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as l from "three";
-const D = 50, E = 80, pe = !0, k = 6, xe = new l.Clock(), G = be();
-class ze {
+const U = 50, D = 80, be = !0, j = 6, ze = new l.Clock(), Q = Te();
+class Be {
   _ref;
   _speed = -1;
   _horizontalPressure = -1;
@@ -61,104 +61,119 @@ class ze {
   _yOffsetColorMultiplier = 4e-3;
   _yOffsetFlowMultiplier = 4e-3;
   _tempClearColor = new l.Color();
+  _resizeTimeoutId = null;
+  _textureNeedsUpdate = !1;
+  _lastColorUpdate = 0;
+  _linkCheckCounter = 0;
+  _mouseUpdateScheduled = !1;
+  _pendingMousePosition = null;
+  _colorsChanged = !0;
   constructor(e) {
     const {
-      ref: o,
+      ref: s,
       speed: t = 4,
       horizontalPressure: f = 3,
-      verticalPressure: u = 3,
-      waveFrequencyX: s = 5,
-      waveFrequencyY: d = 5,
-      waveAmplitude: x = 3,
-      colors: p,
-      highlights: y = 4,
-      shadows: c = 4,
-      colorSaturation: m = 0,
-      colorBrightness: P = 1,
+      verticalPressure: c = 3,
+      waveFrequencyX: o = 5,
+      waveFrequencyY: p = 5,
+      waveAmplitude: g = 3,
+      colors: d,
+      highlights: v = 4,
+      shadows: u = 4,
+      colorSaturation: x = 0,
+      colorBrightness: O = 1,
       colorBlending: M = 5,
-      grainScale: T = 2,
-      grainIntensity: C = 0.55,
-      grainSparsity: B = 0,
-      grainSpeed: z = 0.1,
+      grainScale: z = 2,
+      grainIntensity: y = 0.55,
+      grainSparsity: F = 0,
+      grainSpeed: C = 0.1,
       wireframe: a = !1,
       backgroundColor: n = "#FFFFFF",
       backgroundAlpha: h = 1,
       resolution: _ = 1,
-      seed: b,
-      yOffset: F = 0,
-      yOffsetWaveMultiplier: A = 4,
-      yOffsetColorMultiplier: R = 4,
-      yOffsetFlowMultiplier: X = 4,
-      flowDistortionA: K = 0,
-      flowDistortionB: H = 0,
-      flowScale: Y = 1,
-      flowEase: J = 0,
-      flowEnabled: Q = !0,
-      mouseDistortionStrength: Z = 0,
-      mouseDistortionRadius: $ = 0.25,
-      mouseDecayRate: ee = 0.96,
-      mouseDarken: te = 0,
-      enableProceduralTexture: oe = !1,
-      textureVoidLikelihood: se = 0.45,
-      textureVoidWidthMin: ie = 200,
-      textureVoidWidthMax: re = 486,
-      textureBandDensity: ae = 2.15,
-      textureColorBlending: le = 0.01,
-      textureSeed: ne = 333,
-      textureEase: ue = 0.5,
-      proceduralBackgroundColor: ce = "#000000",
-      textureShapeTriangles: _e = 20,
-      textureShapeCircles: he = 15,
-      textureShapeBars: fe = 15,
-      textureShapeSquiggles: de = 10
+      seed: S,
+      yOffset: B = 0,
+      yOffsetWaveMultiplier: N = 4,
+      yOffsetColorMultiplier: V = 4,
+      yOffsetFlowMultiplier: $ = 4,
+      flowDistortionA: ee = 0,
+      flowDistortionB: te = 0,
+      flowScale: oe = 1,
+      flowEase: se = 0,
+      flowEnabled: ie = !0,
+      mouseDistortionStrength: re = 0,
+      mouseDistortionRadius: ae = 0.25,
+      mouseDecayRate: le = 0.96,
+      mouseDarken: ne = 0,
+      enableProceduralTexture: ue = !1,
+      textureVoidLikelihood: ce = 0.45,
+      textureVoidWidthMin: _e = 200,
+      textureVoidWidthMax: he = 486,
+      textureBandDensity: fe = 2.15,
+      textureColorBlending: de = 0.01,
+      textureSeed: pe = 333,
+      textureEase: ve = 0.5,
+      proceduralBackgroundColor: xe = "#000000",
+      textureShapeTriangles: ge = 20,
+      textureShapeCircles: me = 15,
+      textureShapeBars: ye = 15,
+      textureShapeSquiggles: we = 10
     } = e;
-    this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = t, this.horizontalPressure = f, this.verticalPressure = u, this.waveFrequencyX = s, this.waveFrequencyY = d, this.waveAmplitude = x, this.colorBlending = M, this.grainScale = T, this.grainIntensity = C, this.grainSparsity = B, this.grainSpeed = z, this.colors = p, this.shadows = c, this.highlights = y, this.colorSaturation = m, this.colorBrightness = P, this.wireframe = a, this.backgroundColor = n, this.backgroundAlpha = h, this.yOffset = F, this.yOffsetWaveMultiplier = A, this.yOffsetColorMultiplier = R, this.yOffsetFlowMultiplier = X, this.flowDistortionA = K, this.flowDistortionB = H, this.flowScale = Y, this.flowEase = J, this.flowEnabled = Q, this.mouseDistortionStrength = Z, this.mouseDistortionRadius = $, this.mouseDecayRate = ee, this.mouseDarken = te, this.enableProceduralTexture = oe, this.textureVoidLikelihood = se, this.textureVoidWidthMin = ie, this.textureVoidWidthMax = re, this.textureBandDensity = ae, this.textureColorBlending = le, this.textureSeed = ne, this.textureEase = ue, this._proceduralBackgroundColor = ce, this._textureShapeTriangles = _e, this._textureShapeCircles = he, this._textureShapeBars = fe, this._textureShapeSquiggles = de, this._setupMouseInteraction(), this.sceneState = this._initScene(_);
-    let U = b !== void 0 ? b : we();
-    const I = () => {
-      const { renderer: g, camera: q, scene: O } = this.sceneState;
-      if (Math.floor(U * 10) % 5 === 0 && (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = ye(o)), this._cachedUniforms) {
+    this._ref = s, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = t, this.horizontalPressure = f, this.verticalPressure = c, this.waveFrequencyX = o, this.waveFrequencyY = p, this.waveAmplitude = g, this.colorBlending = M, this.grainScale = z, this.grainIntensity = y, this.grainSparsity = F, this.grainSpeed = C, this.colors = d, this.shadows = u, this.highlights = v, this.colorSaturation = x, this.colorBrightness = O, this.wireframe = a, this.backgroundColor = n, this.backgroundAlpha = h, this.yOffset = B, this.yOffsetWaveMultiplier = N, this.yOffsetColorMultiplier = V, this.yOffsetFlowMultiplier = $, this.flowDistortionA = ee, this.flowDistortionB = te, this.flowScale = oe, this.flowEase = se, this.flowEnabled = ie, this.mouseDistortionStrength = re, this.mouseDistortionRadius = ae, this.mouseDecayRate = le, this.mouseDarken = ne, this.enableProceduralTexture = ue, this.textureVoidLikelihood = ce, this.textureVoidWidthMin = _e, this.textureVoidWidthMax = he, this.textureBandDensity = fe, this.textureColorBlending = de, this.textureSeed = pe, this.textureEase = ve, this._proceduralBackgroundColor = xe, this._textureShapeTriangles = ge, this._textureShapeCircles = me, this._textureShapeBars = ye, this._textureShapeSquiggles = we, this._setupMouseInteraction(), this.sceneState = this._initScene(_);
+    let G = S !== void 0 ? S : Oe();
+    const X = () => {
+      const { renderer: w, camera: E, scene: T } = this.sceneState;
+      if (this._linkCheckCounter++, this._linkCheckCounter >= 300 && (this._linkCheckCounter = 0, (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = Pe(s))), this._cachedUniforms) {
         const i = this._cachedUniforms;
-        U += xe.getDelta() * this._speed, i.u_time.value = U, i.u_resolution.value.set(this._ref.width, this._ref.height), i.u_color_pressure.value.set(this._horizontalPressure, this._verticalPressure), i.u_wave_frequency_x.value = this._waveFrequencyX, i.u_wave_frequency_y.value = this._waveFrequencyY, i.u_wave_amplitude.value = this._waveAmplitude, i.u_color_blending.value = this._colorBlending, i.u_shadows.value = this._shadows, i.u_highlights.value = this._highlights, i.u_saturation.value = this._saturation, i.u_brightness.value = this._brightness, i.u_grain_intensity.value = this._grainIntensity, i.u_grain_sparsity.value = this._grainSparsity, i.u_grain_speed.value = this._grainSpeed, i.u_grain_scale.value = this._grainScale, i.u_y_offset.value = this._yOffset, i.u_y_offset_wave_multiplier.value = this._yOffsetWaveMultiplier, i.u_y_offset_color_multiplier.value = this._yOffsetColorMultiplier, i.u_y_offset_flow_multiplier.value = this._yOffsetFlowMultiplier, i.u_flow_distortion_a.value = this._flowDistortionA, i.u_flow_distortion_b.value = this._flowDistortionB, i.u_flow_scale.value = this._flowScale, i.u_flow_ease.value = this._flowEase, i.u_flow_enabled.value = this._flowEnabled ? 1 : 0, i.u_mouse_distortion_strength.value = this._mouseDistortionStrength, i.u_mouse_distortion_radius.value = this._mouseDistortionRadius, i.u_mouse_darken.value = this._mouseDarken, i.u_enable_procedural_texture.value = this._enableProceduralTexture ? 1 : 0, i.u_procedural_texture.value = this._proceduralTexture, i.u_texture_ease.value = this._textureEase;
-        const w = i.u_colors.value;
-        for (let v = 0; v < k; v++)
-          if (v < this._colors.length) {
-            const S = this._colors[v];
-            w[v].is_active = S.enabled ? 1 : 0, w[v].color.setStyle(S.color, ""), w[v].influence = S.influence || 0;
-          } else
-            w[v].is_active = 0;
-        i.u_colors_count.value = k, this.sceneState.meshes[0].material.wireframe = this._wireframe;
+        G += ze.getDelta() * this._speed, i.u_time.value = G, i.u_resolution.value.set(this._ref.width, this._ref.height), i.u_color_pressure.value.set(this._horizontalPressure, this._verticalPressure), i.u_wave_frequency_x.value = this._waveFrequencyX, i.u_wave_frequency_y.value = this._waveFrequencyY, i.u_wave_amplitude.value = this._waveAmplitude, i.u_color_blending.value = this._colorBlending, i.u_shadows.value = this._shadows, i.u_highlights.value = this._highlights, i.u_saturation.value = this._saturation, i.u_brightness.value = this._brightness, i.u_grain_intensity.value = this._grainIntensity, i.u_grain_sparsity.value = this._grainSparsity, i.u_grain_speed.value = this._grainSpeed, i.u_grain_scale.value = this._grainScale, i.u_y_offset.value = this._yOffset, i.u_y_offset_wave_multiplier.value = this._yOffsetWaveMultiplier, i.u_y_offset_color_multiplier.value = this._yOffsetColorMultiplier, i.u_y_offset_flow_multiplier.value = this._yOffsetFlowMultiplier, i.u_flow_distortion_a.value = this._flowDistortionA, i.u_flow_distortion_b.value = this._flowDistortionB, i.u_flow_scale.value = this._flowScale, i.u_flow_ease.value = this._flowEase, i.u_flow_enabled.value = this._flowEnabled ? 1 : 0, i.u_mouse_distortion_strength.value = this._mouseDistortionStrength, i.u_mouse_distortion_radius.value = this._mouseDistortionRadius, i.u_mouse_darken.value = this._mouseDarken, i.u_enable_procedural_texture.value = this._enableProceduralTexture ? 1 : 0, this._textureNeedsUpdate && this._enableProceduralTexture && (this._proceduralTexture && this._proceduralTexture.dispose(), this._proceduralTexture = this._createProceduralTexture(), this._textureNeedsUpdate = !1), i.u_procedural_texture.value = this._proceduralTexture, i.u_texture_ease.value = this._textureEase, this.sceneState.meshes[0].material.wireframe = this._wireframe;
+        const m = Date.now();
+        if (this._colorsChanged || m - this._lastColorUpdate > 100) {
+          this._lastColorUpdate = m, this._colorsChanged = !1;
+          const q = i.u_colors.value;
+          for (let P = 0; P < j; P++)
+            if (P < this._colors.length) {
+              const L = this._colors[P];
+              q[P].is_active = L.enabled ? 1 : 0, q[P].color.setStyle(L.color, ""), q[P].influence = L.influence || 0;
+            } else
+              q[P].is_active = 0;
+          i.u_colors_count.value = j;
+        }
       }
-      if (this._mouseFBO && this._sceneMouse && this._cameraMouse) {
+      if (this._mouseFBO && this._sceneMouse && this._cameraMouse && this._mouseDistortionStrength > 0) {
         let i = !1;
-        for (let v = 0; v < this._mouseObjects.length; v++) {
-          const S = this._mouseObjects[v];
-          S.mesh.visible && (i = !0, S.mesh.rotation.z += 0.01, S.mesh.material instanceof l.MeshBasicMaterial && (S.mesh.material.opacity *= this._mouseDecayRate, S.mesh.material.opacity < 0.01 && (S.mesh.visible = !1)));
+        for (let m = 0; m < this._mouseObjects.length; m++) {
+          const b = this._mouseObjects[m];
+          b.mesh.visible && (i = !0, b.mesh.rotation.z += 0.01, b.mesh.material instanceof l.MeshBasicMaterial && (b.mesh.material.opacity *= this._mouseDecayRate, b.mesh.material.opacity < 0.01 && (b.mesh.visible = !1)));
+        }
+        if (i) {
+          w.getClearColor(this._tempClearColor);
+          const m = w.getClearAlpha();
+          w.setClearColor(0, 0), w.setRenderTarget(this._mouseFBO), w.clear(), w.render(this._sceneMouse, this._cameraMouse), w.setRenderTarget(null), w.setClearColor(this._tempClearColor, m), this._cachedUniforms && (this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture);
         }
-        g.getClearColor(this._tempClearColor);
-        const w = g.getClearAlpha();
-        g.setClearColor(0, 0), g.setRenderTarget(this._mouseFBO), g.clear(), i && g.render(this._sceneMouse, this._cameraMouse), g.setRenderTarget(null), g.setClearColor(this._tempClearColor, w), this._cachedUniforms && (this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture);
       }
-      g.setClearColor(this._backgroundColor, this._backgroundAlpha), g.render(O, q), this.requestRef = requestAnimationFrame(I);
-    }, ve = () => {
-      const { renderer: g } = this.sceneState, q = g.domElement, O = q.clientWidth, i = q.clientHeight;
-      if (this.sceneState.renderer.setSize(O, i, !1), W(this.sceneState.camera, O, i), this._mouseFBO && this._cameraMouse) {
-        const w = i / 2, v = O / i;
-        this._mouseFBO.setSize(O / 2, i / 2), this._cameraMouse.left = -w * v, this._cameraMouse.right = w * v, this._cameraMouse.top = w, this._cameraMouse.bottom = -w, this._cameraMouse.updateProjectionMatrix();
+      w.setClearColor(this._backgroundColor, this._backgroundAlpha), w.render(T, E), this.requestRef = requestAnimationFrame(X);
+    }, Se = () => {
+      const { renderer: w } = this.sceneState, E = w.domElement, T = E.clientWidth, i = E.clientHeight;
+      if (this.sceneState.renderer.setSize(T, i, !1), K(this.sceneState.camera, T, i), this._mouseFBO && this._cameraMouse) {
+        const m = i / 2, b = T / i;
+        this._mouseFBO.setSize(T / 2, i / 2), this._cameraMouse.left = -m * b, this._cameraMouse.right = m * b, this._cameraMouse.top = m, this._cameraMouse.bottom = -m, this._cameraMouse.updateProjectionMatrix();
       }
     };
-    this.sizeObserver = new ResizeObserver((g) => {
-      ve();
-    }), this.sizeObserver.observe(o), I();
+    this.sizeObserver = new ResizeObserver(() => {
+      this._resizeTimeoutId !== null && clearTimeout(this._resizeTimeoutId), this._resizeTimeoutId = window.setTimeout(() => {
+        Se(), this._resizeTimeoutId = null;
+      }, 100);
+    }), this.sizeObserver.observe(s), X();
   }
   destroy() {
-    this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect(), this.sceneState && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((e) => {
-      e.geometry.dispose(), Array.isArray(e.material) ? e.material.forEach((o) => o.dispose()) : e.material.dispose();
+    this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect(), this._resizeTimeoutId !== null && (clearTimeout(this._resizeTimeoutId), this._resizeTimeoutId = null), this.sceneState && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((e) => {
+      e.geometry.dispose(), Array.isArray(e.material) ? e.material.forEach((s) => s.dispose()) : e.material.dispose();
     })), this._mouseFBO && this._mouseFBO.dispose(), this._proceduralTexture && this._proceduralTexture.dispose());
   }
   downloadAsPNG(e = "neat.png") {
     console.log("Downloading as PNG", this._ref);
-    const o = this._ref.toDataURL("image/png");
-    console.log("data", o), Se(o, e);
+    const s = this._ref.toDataURL("image/png");
+    console.log("data", s), Fe(s, e);
   }
   set speed(e) {
     this._speed = e / 20;
@@ -179,7 +194,7 @@ class ze {
     this._waveAmplitude = e * 0.75;
   }
   set colors(e) {
-    this._colors = e;
+    this._colors = e, this._colorsChanged = !0;
   }
   set highlights(e) {
     this._highlights = e / 100;
@@ -275,25 +290,25 @@ class ze {
     this._mouseDarken = e;
   }
   set enableProceduralTexture(e) {
-    this._enableProceduralTexture = e, e && !this._proceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._enableProceduralTexture = e, e && !this._proceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidLikelihood(e) {
-    this._textureVoidLikelihood = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidLikelihood = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidWidthMin(e) {
-    this._textureVoidWidthMin = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidWidthMin = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidWidthMax(e) {
-    this._textureVoidWidthMax = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidWidthMax = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureBandDensity(e) {
-    this._textureBandDensity = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureBandDensity = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureColorBlending(e) {
-    this._textureColorBlending = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureColorBlending = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureSeed(e) {
-    this._textureSeed = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureSeed = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   get textureEase() {
     return this._textureEase;
@@ -302,58 +317,58 @@ class ze {
     this._textureEase = e;
   }
   set proceduralBackgroundColor(e) {
-    this._proceduralBackgroundColor = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._proceduralBackgroundColor = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeTriangles(e) {
-    this._textureShapeTriangles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeTriangles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeCircles(e) {
-    this._textureShapeCircles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeCircles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeBars(e) {
-    this._textureShapeBars = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeBars = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeSquiggles(e) {
-    this._textureShapeSquiggles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeSquiggles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   _initScene(e) {
-    const o = this._ref.width, t = this._ref.height;
-    this.sceneState && this.sceneState.renderer && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((c) => {
-      c.geometry.dispose(), Array.isArray(c.material) ? c.material.forEach((m) => m.dispose()) : c.material.dispose();
+    const s = this._ref.width, t = this._ref.height;
+    this.sceneState && this.sceneState.renderer && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((u) => {
+      u.geometry.dispose(), Array.isArray(u.material) ? u.material.forEach((x) => x.dispose()) : u.material.dispose();
     }));
     const f = new l.WebGLRenderer({
       alpha: !0,
       preserveDrawingBuffer: !0,
       canvas: this._ref
     });
-    f.setClearColor(16711680, 0.5), f.setSize(o, t, !1);
-    const u = [], s = new l.Scene(), d = this._buildMaterial(o, t), x = new l.PlaneGeometry(D, E, 240 * e, 240 * e), p = new l.Mesh(x, d);
-    p.rotation.x = -Math.PI / 3.5, p.position.z = -1, u.push(p), s.add(p);
-    const y = new l.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return y.position.z = 5, W(y, o, t), {
+    f.setClearColor(16711680, 0.5), f.setSize(s, t, !1);
+    const c = [], o = new l.Scene(), p = this._buildMaterial(s, t), g = new l.PlaneGeometry(U, D, 240 * e, 240 * e), d = new l.Mesh(g, p);
+    d.rotation.x = -Math.PI / 3.5, d.position.z = -1, c.push(d), o.add(d);
+    const v = new l.OrthographicCamera(0, 0, 0, 0, 0, 0);
+    return v.position.z = 5, K(v, s, t), {
       renderer: f,
-      camera: y,
-      scene: s,
-      meshes: u,
+      camera: v,
+      scene: o,
+      meshes: c,
       resolution: e
     };
   }
-  _buildMaterial(e, o) {
-    const t = Array.from({ length: k }).map((s, d) => ({
-      is_active: d < this._colors.length && this._colors[d].enabled ? 1 : 0,
-      color: new l.Color(d < this._colors.length ? this._colors[d].color : 0),
-      influence: d < this._colors.length && this._colors[d].influence || 0
+  _buildMaterial(e, s) {
+    const t = Array.from({ length: j }).map((o, p) => ({
+      is_active: p < this._colors.length && this._colors[p].enabled ? 1 : 0,
+      color: new l.Color(p < this._colors.length ? this._colors[p].color : 0),
+      influence: p < this._colors.length && this._colors[p].influence || 0
     })), f = {
       u_time: { value: 0 },
       u_color_pressure: { value: new l.Vector2(this._horizontalPressure, this._verticalPressure) },
       u_wave_frequency_x: { value: this._waveFrequencyX },
       u_wave_frequency_y: { value: this._waveFrequencyY },
       u_wave_amplitude: { value: this._waveAmplitude },
-      u_resolution: { value: new l.Vector2(e, o) },
+      u_resolution: { value: new l.Vector2(e, s) },
       u_colors: { value: t },
       u_colors_count: { value: this._colors.length },
-      u_plane_width: { value: D },
-      u_plane_height: { value: E },
+      u_plane_width: { value: U },
+      u_plane_height: { value: D },
       u_shadows: { value: this._shadows },
       u_highlights: { value: this._highlights },
       u_grain_intensity: { value: this._grainIntensity },
@@ -379,19 +394,19 @@ class ze {
       u_saturation: { value: this._saturation },
       u_brightness: { value: this._brightness },
       u_color_blending: { value: this._colorBlending }
-    }, u = new l.ShaderMaterial({
+    }, c = new l.ShaderMaterial({
       uniforms: f,
-      vertexShader: V() + L() + N() + ge(),
-      fragmentShader: V() + N() + L() + me()
+      vertexShader: H() + Y() + Z() + Ce(),
+      fragmentShader: H() + Z() + Y() + Me()
     });
-    return this._cachedUniforms = f, u.wireframe = pe, u;
+    return this._cachedUniforms = f, c.wireframe = be, c;
   }
   _setupMouseInteraction() {
     if (!this._ref)
       return;
-    const e = this._ref.width, o = this._ref.height;
-    this._mouseFBO = new l.WebGLRenderTarget(e / 2, o / 2), this._sceneMouse = new l.Scene();
-    const t = o / 2, f = e / o;
+    const e = this._ref.width, s = this._ref.height;
+    this._mouseFBO = new l.WebGLRenderTarget(e / 2, s / 2), this._sceneMouse = new l.Scene();
+    const t = s / 2, f = e / s;
     this._cameraMouse = new l.OrthographicCamera(
       -t * f,
       t * f,
@@ -400,52 +415,59 @@ class ze {
       0,
       1e4
     ), this._cameraMouse.position.set(0, 0, 100);
-    const u = document.createElement("canvas");
-    u.width = 128, u.height = 128;
-    const s = u.getContext("2d");
-    if (s) {
-      const c = s.createRadialGradient(64, 64, 0, 64, 64, 64);
-      c.addColorStop(0, "rgba(255,255,255,0.8)"), c.addColorStop(0.5, "rgba(255,255,255,0.4)"), c.addColorStop(1, "rgba(255,255,255,0)"), s.fillStyle = c, s.fillRect(0, 0, 128, 128);
+    const c = document.createElement("canvas");
+    c.width = 128, c.height = 128;
+    const o = c.getContext("2d");
+    if (o) {
+      const u = o.createRadialGradient(64, 64, 0, 64, 64, 64);
+      u.addColorStop(0, "rgba(255,255,255,0.8)"), u.addColorStop(0.5, "rgba(255,255,255,0.4)"), u.addColorStop(1, "rgba(255,255,255,0)"), o.fillStyle = u, o.fillRect(0, 0, 128, 128);
     }
-    const d = new l.CanvasTexture(u), x = new l.MeshBasicMaterial({
-      map: d,
+    const p = new l.CanvasTexture(c), g = new l.MeshBasicMaterial({
+      map: p,
       transparent: !0,
       opacity: 1,
       depthTest: !1,
       blending: l.AdditiveBlending
-    }), p = new l.PlaneGeometry(200, 200), y = 50;
-    for (let c = 0; c < y; c++) {
-      const m = new l.Mesh(p, x.clone());
-      m.visible = !1, this._sceneMouse.add(m), this._mouseObjects.push({ mesh: m, active: !1 });
+    }), d = new l.PlaneGeometry(200, 200), v = 50;
+    for (let u = 0; u < v; u++) {
+      const x = new l.Mesh(d, g.clone());
+      x.visible = !1, this._sceneMouse.add(x), this._mouseObjects.push({ mesh: x, active: !1 });
     }
     this._updateBrushScale(), this._ref.addEventListener("mousemove", this._onMouseMove.bind(this));
   }
   _onMouseMove(e) {
     if (!this._ref || !this._sceneMouse)
       return;
-    const o = this._ref.getBoundingClientRect(), t = this._ref.width, f = this._ref.height;
-    this._mouse.x = e.clientX - o.left - t / 2, this._mouse.y = -(e.clientY - o.top - f / 2);
-    const u = this._mouseObjects[this._currentBrush];
-    u.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1), u.active = !0, u.mesh.visible = !0, u.mesh.position.set(this._mouse.x, this._mouse.y, 0), u.mesh.rotation.z = Math.random() * Math.PI * 2, u.mesh.material instanceof l.MeshBasicMaterial && (u.mesh.material.opacity = 1), this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length;
+    const s = this._ref.getBoundingClientRect(), t = this._ref.width, f = this._ref.height;
+    this._pendingMousePosition = {
+      x: e.clientX - s.left - t / 2,
+      y: -(e.clientY - s.top - f / 2)
+    }, this._mouseUpdateScheduled || (this._mouseUpdateScheduled = !0, requestAnimationFrame(() => {
+      if (this._mouseUpdateScheduled = !1, !this._pendingMousePosition)
+        return;
+      this._mouse.x = this._pendingMousePosition.x, this._mouse.y = this._pendingMousePosition.y;
+      const c = this._mouseObjects[this._currentBrush];
+      c.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1), c.active = !0, c.mesh.visible = !0, c.mesh.position.set(this._mouse.x, this._mouse.y, 0), c.mesh.rotation.z = Math.random() * Math.PI * 2, c.mesh.material instanceof l.MeshBasicMaterial && (c.mesh.material.opacity = 1), this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length, this._pendingMousePosition = null;
+    }));
   }
   _createProceduralTexture() {
-    const o = document.createElement("canvas");
-    o.width = 1024, o.height = 1024;
-    const t = o.getContext("2d");
+    const s = document.createElement("canvas");
+    s.width = 1024, s.height = 1024;
+    const t = s.getContext("2d", { willReadFrequently: !0 });
     if (!t)
       return new l.Texture();
     let f = this._textureSeed;
-    const u = this._textureSeed;
-    function s() {
+    const c = this._textureSeed;
+    function o() {
       const a = Math.sin(f++) * 1e4;
       return a - Math.floor(a);
     }
-    const d = (a) => {
-      f = u + a;
-    }, x = this._colors.filter((a) => a.enabled).map((a) => a.color);
-    if (x.length === 0)
+    const p = (a) => {
+      f = c + a;
+    }, g = this._colors.filter((a) => a.enabled).map((a) => a.color);
+    if (g.length === 0)
       return new l.Texture();
-    function p(a) {
+    function d(a) {
       const n = parseInt(a.replace("#", ""), 16);
       return {
         r: n >> 16 & 255,
@@ -453,90 +475,99 @@ class ze {
         b: n & 255
       };
     }
-    function y(a, n, h) {
+    function v(a, n, h) {
       return "#" + ((1 << 24) + (Math.round(a) << 16) + (Math.round(n) << 8) + Math.round(h)).toString(16).slice(1);
     }
-    const c = () => {
-      const a = x[Math.floor(s() * x.length)], n = x[Math.floor(s() * x.length)], h = s() * this._textureColorBlending, _ = p(a), b = p(n), F = _.r + (b.r - _.r) * h, A = _.g + (b.g - _.g) * h, R = _.b + (b.b - _.b) * h;
-      return y(F, A, R);
-    }, m = this._proceduralBackgroundColor || "#000000";
-    t.fillStyle = m, t.fillRect(0, 0, 1024, 1024);
-    const P = t.createLinearGradient(0, 0, 0, 1024);
-    P.addColorStop(0, c()), P.addColorStop(1, c()), t.fillStyle = P, t.fillRect(0, 0, 1024, 1024);
+    const u = () => {
+      const a = g[Math.floor(o() * g.length)], n = g[Math.floor(o() * g.length)], h = o() * this._textureColorBlending, _ = d(a), S = d(n), B = _.r + (S.r - _.r) * h, N = _.g + (S.g - _.g) * h, V = _.b + (S.b - _.b) * h;
+      return v(B, N, V);
+    }, x = this._proceduralBackgroundColor || "#000000";
+    t.fillStyle = x, t.fillRect(0, 0, 1024, 1024);
+    const O = t.createLinearGradient(0, 0, 0, 1024);
+    O.addColorStop(0, u()), O.addColorStop(1, u()), t.fillStyle = O, t.fillRect(0, 0, 1024, 1024);
     for (let a = 0; a < this._textureShapeTriangles; a++) {
-      t.fillStyle = c(), t.beginPath();
-      const n = s() * 1024, h = s() * 1024, _ = 100 + s() * 300;
-      t.moveTo(n, h), t.lineTo(n + (s() - 0.5) * _, h + (s() - 0.5) * _), t.lineTo(n + (s() - 0.5) * _, h + (s() - 0.5) * _), t.fill();
+      t.fillStyle = u(), t.beginPath();
+      const n = o() * 1024, h = o() * 1024, _ = 100 + o() * 300;
+      t.moveTo(n, h), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.fill();
     }
     for (let a = 0; a < this._textureShapeCircles; a++) {
-      t.strokeStyle = c(), t.lineWidth = 10 + s() * 50, t.beginPath();
-      const n = s() * 1024, h = s() * 1024, _ = 50 + s() * 150;
+      t.strokeStyle = u(), t.lineWidth = 10 + o() * 50, t.beginPath();
+      const n = o() * 1024, h = o() * 1024, _ = 50 + o() * 150;
       t.arc(n, h, _, 0, Math.PI * 2), t.stroke();
     }
     for (let a = 0; a < this._textureShapeBars; a++)
-      t.fillStyle = c(), t.save(), t.translate(s() * 1024, s() * 1024), t.rotate(s() * Math.PI), t.fillRect(-150, -25, 300, 50), t.restore();
+      t.fillStyle = u(), t.save(), t.translate(o() * 1024, o() * 1024), t.rotate(o() * Math.PI), t.fillRect(-150, -25, 300, 50), t.restore();
     t.lineWidth = 15, t.lineCap = "round";
     for (let a = 0; a < this._textureShapeSquiggles; a++) {
-      t.strokeStyle = c(), t.beginPath();
-      let n = s() * 1024, h = s() * 1024;
+      t.strokeStyle = u(), t.beginPath();
+      let n = o() * 1024, h = o() * 1024;
       t.moveTo(n, h);
       for (let _ = 0; _ < 4; _++)
         t.bezierCurveTo(
-          n + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300,
-          n + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300,
-          n + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300
-        ), n += (s() - 0.5) * 300, h += (s() - 0.5) * 300;
+          n + (o() - 0.5) * 300,
+          h + (o() - 0.5) * 300,
+          n + (o() - 0.5) * 300,
+          h + (o() - 0.5) * 300,
+          n + (o() - 0.5) * 300,
+          h + (o() - 0.5) * 300
+        ), n += (o() - 0.5) * 300, h += (o() - 0.5) * 300;
       t.stroke();
     }
-    d(5e4);
+    p(5e4);
     const M = document.createElement("canvas");
     M.width = 1024, M.height = 1024;
-    const T = M.getContext("2d");
-    if (!T)
+    const z = M.getContext("2d", { willReadFrequently: !0 });
+    if (!z)
       return new l.Texture();
-    T.fillStyle = m, T.fillRect(0, 0, 1024, 1024);
-    let C = 0;
-    const B = [];
-    for (; C < 1024; )
-      if (s() < this._textureVoidLikelihood) {
-        const n = this._textureVoidWidthMin + s() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
-        B.push({ type: "void", x: C, width: n }), C += n;
+    z.fillStyle = x, z.fillRect(0, 0, 1024, 1024);
+    let y = 0;
+    const F = [];
+    for (; y < 1024; )
+      if (o() < this._textureVoidLikelihood) {
+        const n = this._textureVoidWidthMin + o() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
+        F.push({ type: "void", x: y, width: n }), y += n;
       } else {
-        const n = 50 + s() * 200;
-        B.push({ type: "matter", x: C, width: n }), C += n;
+        const n = 50 + o() * 200;
+        F.push({ type: "matter", x: y, width: n }), y += n;
       }
-    for (const a of B)
+    for (const a of F)
       if (a.type === "matter") {
         const n = a.x, h = Math.min(a.x + a.width, 1024);
         let _ = n;
         for (; _ < h; ) {
-          const b = (2 + s() * 20) / this._textureBandDensity, F = Math.floor(s() * 1024);
-          T.drawImage(
-            o,
-            F,
+          const S = (2 + o() * 20) / this._textureBandDensity, B = Math.floor(o() * 1024);
+          z.drawImage(
+            s,
+            B,
             0,
-            b,
+            S,
             1024,
             _,
             0,
-            b,
+            S,
             1024
-          ), _ += b;
+          ), _ += S;
         }
       }
-    const z = new l.CanvasTexture(M);
-    return z.minFilter = l.LinearMipmapLinearFilter, z.magFilter = l.LinearFilter, z.wrapS = l.RepeatWrapping, z.wrapT = l.RepeatWrapping, z.anisotropy = 16, z.needsUpdate = !0, z;
+    const C = new l.CanvasTexture(M);
+    return C.minFilter = l.LinearMipmapLinearFilter, C.magFilter = l.LinearFilter, C.wrapS = l.RepeatWrapping, C.wrapT = l.RepeatWrapping, C.anisotropy = 16, C.needsUpdate = !0, C;
   }
 }
-function W(r, e, o) {
-  const u = e * o / 1e6 * D * E / 1.5, s = e / o, d = Math.sqrt(u * s), x = u / d, p = -D / 2, y = Math.min((p + d) / 1.5, D / 2), c = E / 4, m = Math.max((c - x) / 2, -E / 4), P = -100, M = 1e3;
-  r instanceof l.OrthographicCamera ? (r.left = p, r.right = y, r.top = c, r.bottom = m, r.near = P, r.far = M, r.updateProjectionMatrix()) : r instanceof l.PerspectiveCamera && (r.aspect = e / o, r.updateProjectionMatrix());
+function K(r, e, s) {
+  const c = e * s / 1e6 * U * D / 1.5, o = e / s, p = Math.sqrt(c * o), g = c / p;
+  let d = -U / 2, v = Math.min((d + p) / 1.5, U / 2), u = D / 4, x = Math.max((u - g) / 2, -D / 4);
+  if (o < 1) {
+    const z = o;
+    d = d * z, v = v * z;
+    const y = 1.05;
+    d = d * y, v = v * y, u = u * y, x = x * y;
+  }
+  const O = -100, M = 1e3;
+  r instanceof l.OrthographicCamera ? (r.left = d, r.right = v, r.top = u, r.bottom = x, r.near = O, r.far = M, r.updateProjectionMatrix()) : r instanceof l.PerspectiveCamera && (r.aspect = e / s, r.updateProjectionMatrix());
 }
-function ge() {
-  return `
+let R = null, A = null;
+function Ce() {
+  return R || (R = `
 void main() {
     vUv = uv;
 
@@ -613,10 +644,10 @@ void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`;
+`, R);
 }
-function me() {
-  return `
+function Me() {
+  return A || (A = `
 float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
@@ -698,9 +729,10 @@ void main() {
 
     gl_FragColor = vec4(color, 1.0);
 }
-    `;
+    `, A);
 }
-const V = () => `
+let k = null;
+const H = () => k || (k = `
 precision highp float;
 
 struct Color {
@@ -764,7 +796,9 @@ varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, L = () => `
+    `, k);
+let I = null;
+const Y = () => I || (I = `
 
 // 1. REPLACEMENT PERMUTE: 
 // Uses a hash function (fract/sin) instead of a modular lookup table.
@@ -917,7 +951,9 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`, N = () => `
+`, I);
+let W = null;
+const Z = () => W || (W = `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -960,36 +996,36 @@ vec3 hsv2rgb(vec3 c)
     vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
     return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
 }
-`, j = (r) => {
-  r.id = G, r.href = "https://neat.firecms.co", r.target = "_blank", r.style.position = "absolute", r.style.display = "block", r.style.bottom = "0", r.style.right = "0", r.style.padding = "10px", r.style.color = "#dcdcdc", r.style.opacity = "0.8", r.style.fontFamily = "sans-serif", r.style.fontSize = "16px", r.style.fontWeight = "bold", r.style.textDecoration = "none", r.style.zIndex = "10000", r.innerHTML = "NEAT";
-}, ye = (r) => {
+`, W), J = (r) => {
+  r.id = Q, r.href = "https://neat.firecms.co", r.target = "_blank", r.style.position = "absolute", r.style.display = "block", r.style.bottom = "0", r.style.right = "0", r.style.padding = "10px", r.style.color = "#dcdcdc", r.style.opacity = "0.8", r.style.fontFamily = "sans-serif", r.style.fontSize = "16px", r.style.fontWeight = "bold", r.style.textDecoration = "none", r.style.zIndex = "10000", r.innerHTML = "NEAT";
+}, Pe = (r) => {
   const e = r.parentElement?.getElementsByTagName("a");
   if (e) {
     for (let t = 0; t < e.length; t++)
-      if (e[t].id === G)
-        return j(e[t]), e[t];
+      if (e[t].id === Q)
+        return J(e[t]), e[t];
   }
-  const o = document.createElement("a");
-  return j(o), r.parentElement?.appendChild(o), o;
+  const s = document.createElement("a");
+  return J(s), r.parentElement?.appendChild(s), s;
 };
-function we() {
-  const r = new Date(), e = r.getMinutes(), o = r.getSeconds();
-  return e * 60 + o;
+function Oe() {
+  const r = new Date(), e = r.getMinutes(), s = r.getSeconds();
+  return e * 60 + s;
 }
-function be(r = 6) {
+function Te(r = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let o = "";
+  let s = "";
   for (let t = 0; t < r; t++) {
     const f = Math.floor(Math.random() * e.length);
-    o += e.charAt(f);
+    s += e.charAt(f);
   }
-  return o;
+  return s;
 }
-function Se(r, e) {
-  const o = document.createElement("a");
-  o.download = e, o.href = r, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+function Fe(r, e) {
+  const s = document.createElement("a");
+  s.download = e, s.href = r, document.body.appendChild(s), s.click(), document.body.removeChild(s);
 }
 export {
-  ze as NeatGradient
+  Be as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map