@firecms/neat 0.2.2 → 0.4.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import * as r from "three";
-const g = 50, _ = 80, T = !0, C = 5, V = new r.Clock(), E = U();
-class X {
+import * as i from "three";
+const _ = 50, g = 80, W = !0, S = 5, X = new i.Clock(), R = ee();
+class oe {
   _ref;
   _speed = -1;
   _horizontalPressure = -1;
@@ -12,6 +12,10 @@ class X {
   _highlights = -1;
   _saturation = -1;
   _brightness = -1;
+  _grainScale = -1;
+  _grainIntensity = -1;
+  _grainSparsity = -1;
+  _grainSpeed = -1;
   _colorBlending = -1;
   _colors = [];
   _wireframe = !1;
@@ -20,56 +24,70 @@ class X {
   requestRef = -1;
   sizeObserver;
   sceneState;
+  _yOffset = 0;
   constructor(e) {
     const {
       ref: o,
-      speed: i = 4,
-      horizontalPressure: n = 3,
+      speed: n = 4,
+      horizontalPressure: s = 3,
       verticalPressure: a = 3,
       waveFrequencyX: c = 5,
-      waveFrequencyY: u = 5,
-      waveAmplitude: x = 3,
+      waveFrequencyY: v = 5,
+      waveAmplitude: f = 3,
       colors: l,
-      highlights: v = 4,
-      shadows: m = 4,
+      highlights: u = 4,
+      shadows: h = 4,
       colorSaturation: p = 0,
       colorBrightness: w = 1,
-      colorBlending: b = 5,
-      wireframe: I = !1,
-      backgroundColor: N = "#FFFFFF",
-      backgroundAlpha: O = 1,
-      resolution: R = 1,
-      seed: q
+      colorBlending: z = 5,
+      grainScale: E = 2,
+      grainIntensity: B = 0.55,
+      grainSparsity: D = 0,
+      grainSpeed: k = 0.1,
+      wireframe: K = !1,
+      backgroundColor: L = "#FFFFFF",
+      backgroundAlpha: U = 1,
+      resolution: V = 1,
+      seed: C,
+      yOffset: G = 0
     } = e;
-    this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = i, this.horizontalPressure = n, this.verticalPressure = a, this.waveFrequencyX = c, this.waveFrequencyY = u, this.waveAmplitude = x, this.colorBlending = b, this.colors = l, this.shadows = m, this.highlights = v, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = I, this.backgroundColor = N, this.backgroundAlpha = O, this.sceneState = this._initScene(R);
-    let z = q !== void 0 ? q : G();
-    const S = () => {
-      const { renderer: h, camera: f, scene: d, meshes: y } = this.sceneState;
-      Math.floor(z * 10) % 5 === 0 && W(o), h.setClearColor(this._backgroundColor, this._backgroundAlpha), y.forEach((s) => {
-        const K = this._ref.width, D = this._ref.height, L = [
-          ...this._colors.map((P) => ({
-            is_active: P.enabled,
-            color: new r.Color(P.color),
-            influence: P.influence
-          })),
-          ...Array.from({ length: C - this._colors.length }).map(() => ({
+    this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = n, this.horizontalPressure = s, this.verticalPressure = a, this.waveFrequencyX = c, this.waveFrequencyY = v, this.waveAmplitude = f, this.colorBlending = z, this.grainScale = E, this.grainIntensity = B, this.grainSparsity = D, this.grainSpeed = k, this.colors = l, this.shadows = h, this.highlights = u, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = K, this.backgroundColor = L, this.backgroundAlpha = U, this.yOffset = G, this.sceneState = this._initScene(V);
+    let b = C !== void 0 ? C : $();
+    const q = () => {
+      const { renderer: d, camera: m, scene: y, meshes: x } = this.sceneState;
+      Math.floor(b * 10) % 5 === 0 && Z(o), d.setClearColor(this._backgroundColor, this._backgroundAlpha), x.forEach((r) => {
+        const j = this._ref.width, Y = this._ref.height, H = [
+          ...this._colors.map((P) => {
+            let F = new i.Color();
+            return F.setStyle(P.color, ""), {
+              is_active: P.enabled,
+              color: F,
+              influence: P.influence
+            };
+          }),
+          ...Array.from({ length: S - this._colors.length }).map(() => ({
             is_active: !1,
-            color: new r.Color(0)
+            color: new i.Color(0)
           }))
         ];
-        z += V.getDelta() * this._speed, s.material.uniforms.u_time.value = z, s.material.uniforms.u_resolution = { value: new r.Vector2(K, D) }, s.material.uniforms.u_color_pressure = { value: new r.Vector2(this._horizontalPressure, this._verticalPressure) }, s.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, s.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, s.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, s.material.uniforms.u_plane_width = { value: g }, s.material.uniforms.u_plane_height = { value: _ }, s.material.uniforms.u_color_blending = { value: this._colorBlending }, s.material.uniforms.u_colors = { value: L }, s.material.uniforms.u_colors_count = { value: C }, s.material.uniforms.u_shadows = { value: this._shadows }, s.material.uniforms.u_highlights = { value: this._highlights }, s.material.uniforms.u_saturation = { value: this._saturation }, s.material.uniforms.u_brightness = { value: this._brightness }, s.material.wireframe = this._wireframe;
-      }), h.render(d, f), this.requestRef = requestAnimationFrame(S);
-    }, B = () => {
-      const { renderer: h } = this.sceneState, f = h.domElement, d = f.clientWidth, y = f.clientHeight;
-      this.sceneState.renderer.setSize(d, y, !1), F(this.sceneState.camera, d, y);
+        b += X.getDelta() * this._speed, r.material.uniforms.u_time.value = b, r.material.uniforms.u_resolution = { value: new i.Vector2(j, Y) }, r.material.uniforms.u_color_pressure = { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) }, r.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, r.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, r.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, r.material.uniforms.u_plane_width = { value: _ }, r.material.uniforms.u_plane_height = { value: g }, r.material.uniforms.u_color_blending = { value: this._colorBlending }, r.material.uniforms.u_colors = { value: H }, r.material.uniforms.u_colors_count = { value: S }, r.material.uniforms.u_shadows = { value: this._shadows }, r.material.uniforms.u_highlights = { value: this._highlights }, r.material.uniforms.u_saturation = { value: this._saturation }, r.material.uniforms.u_brightness = { value: this._brightness }, r.material.uniforms.u_grain_intensity = { value: this._grainIntensity }, r.material.uniforms.u_grain_sparsity = { value: this._grainSparsity }, r.material.uniforms.u_grain_speed = { value: this._grainSpeed }, r.material.uniforms.u_grain_scale = { value: this._grainScale }, r.material.uniforms.u_y_offset = { value: this._yOffset }, r.material.wireframe = this._wireframe;
+      }), d.render(y, m), this.requestRef = requestAnimationFrame(q);
+    }, T = () => {
+      const { renderer: d } = this.sceneState, m = d.domElement, y = m.clientWidth, x = m.clientHeight;
+      this.sceneState.renderer.setSize(y, x, !1), A(this.sceneState.camera, y, x);
     };
-    this.sizeObserver = new ResizeObserver((h) => {
-      B();
-    }), this.sizeObserver.observe(o), S();
+    this.sizeObserver = new ResizeObserver((d) => {
+      T();
+    }), this.sizeObserver.observe(o), q();
   }
   destroy() {
     this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect());
   }
+  downloadAsPNG(e = "neat.png") {
+    console.log("Downloading as PNG", this._ref);
+    const o = this._ref.toDataURL("image/png");
+    console.log("data", o), te(o, e);
+  }
   set speed(e) {
     this._speed = e / 20;
   }
@@ -106,6 +124,18 @@ class X {
   set colorBlending(e) {
     this._colorBlending = e / 10;
   }
+  set grainScale(e) {
+    this._grainScale = e == 0 ? 1 : e;
+  }
+  set grainIntensity(e) {
+    this._grainIntensity = e;
+  }
+  set grainSparsity(e) {
+    this._grainSparsity = e;
+  }
+  set grainSpeed(e) {
+    this._grainSpeed = e;
+  }
   set wireframe(e) {
     this._wireframe = e;
   }
@@ -118,60 +148,68 @@ class X {
   set backgroundAlpha(e) {
     this._backgroundAlpha = e;
   }
+  set yOffset(e) {
+    this._yOffset = e;
+  }
   _initScene(e) {
-    const o = this._ref.width, i = this._ref.height, n = new r.WebGLRenderer({
+    const o = this._ref.width, n = this._ref.height, s = new i.WebGLRenderer({
       alpha: !0,
+      preserveDrawingBuffer: !0,
       canvas: this._ref
     });
-    n.setClearColor(16711680, 0.5), n.setSize(o, i, !1);
-    const a = [], c = new r.Scene(), u = this._buildMaterial(o, i), x = new r.PlaneGeometry(g, _, 240 * e, 240 * e), l = new r.Mesh(x, u);
+    s.setClearColor(16711680, 0.5), s.setSize(o, n, !1);
+    const a = [], c = new i.Scene(), v = this._buildMaterial(o, n), f = new i.PlaneGeometry(_, g, 240 * e, 240 * e), l = new i.Mesh(f, v);
     l.rotation.x = -Math.PI / 3.5, l.position.z = -1, a.push(l), c.add(l);
-    const v = new r.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return v.position.z = 5, F(v, o, i), {
-      renderer: n,
-      camera: v,
+    const u = new i.OrthographicCamera(0, 0, 0, 0, 0, 0);
+    return u.position.z = 5, A(u, o, n), {
+      renderer: s,
+      camera: u,
       scene: c,
       meshes: a,
       resolution: e
     };
   }
   _buildMaterial(e, o) {
-    const i = [
+    const n = [
       ...this._colors.map((c) => ({
         is_active: c.enabled,
-        color: new r.Color(c.color),
+        color: new i.Color(c.color),
         influence: c.influence
       })),
-      ...Array.from({ length: C - this._colors.length }).map(() => ({
+      ...Array.from({ length: S - this._colors.length }).map(() => ({
         is_active: !1,
-        color: new r.Color(0)
+        color: new i.Color(0)
       }))
-    ], n = {
+    ], s = {
       u_time: { value: 0 },
-      u_color_pressure: { value: new r.Vector2(this._horizontalPressure, this._verticalPressure) },
+      u_color_pressure: { value: new i.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 r.Vector2(e, o) },
-      u_colors: { value: i },
+      u_resolution: { value: new i.Vector2(e, o) },
+      u_colors: { value: n },
       u_colors_count: { value: this._colors.length },
-      u_plane_width: { value: g },
-      u_plane_height: { value: _ },
+      u_plane_width: { value: _ },
+      u_plane_height: { value: g },
       u_shadows: { value: this._shadows },
-      u_highlights: { value: this._highlights }
-    }, a = new r.ShaderMaterial({
-      uniforms: n,
-      vertexShader: A() + H() + M() + j(),
-      fragmentShader: A() + M() + Y()
+      u_highlights: { value: this._highlights },
+      u_grain_intensity: { value: this._grainIntensity },
+      u_grain_sparsity: { value: this._grainSparsity },
+      u_grain_scale: { value: this._grainScale },
+      u_grain_speed: { value: this._grainSpeed }
+    }, a = new i.ShaderMaterial({
+      uniforms: s,
+      vertexShader: I() + M() + O() + J(),
+      fragmentShader: I() + O() + M() + Q()
     });
-    return a.wireframe = T, a;
+    return a.wireframe = W, a;
   }
 }
-function F(t, e, o) {
-  const a = e * o / 1e6 * g * _ / 1.5, c = e / o, u = Math.sqrt(a * c), x = a / u, l = -g / 2, v = Math.min((l + u) / 1.5, g / 2), m = _ / 4, p = Math.max((m - x) / 2, -_ / 4), w = -100, b = 1e3;
-  t instanceof r.OrthographicCamera ? (t.left = l, t.right = v, t.top = m, t.bottom = p, t.near = w, t.far = b, t.updateProjectionMatrix()) : t instanceof r.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
+function A(t, e, o) {
+  const a = e * o / 1e6 * _ * g / 1.5, c = e / o, v = Math.sqrt(a * c), f = a / v, l = -_ / 2, u = Math.min((l + v) / 1.5, _ / 2), h = g / 4, p = Math.max((h - f) / 2, -g / 4), w = -100, z = 1e3;
+  t instanceof i.OrthographicCamera ? (t.left = l, t.right = u, t.top = h, t.bottom = p, t.near = w, t.far = z, t.updateProjectionMatrix()) : t instanceof i.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
 }
-function j() {
+function J() {
   return `
 
 void main() {
@@ -183,71 +221,101 @@ void main() {
         u_wave_frequency_y * position.y + u_time,
         u_time
     ));
-    
+
     vec3 color;
 
     // float t = mod(u_base_color, 100.0);
     color = u_colors[0].color;
-    
+
+    // Apply y_offset to the noise coordinates
     vec2 noise_cord = vUv * u_color_pressure;
-    
+    // Apply the y-offset to shift the pattern vertically (1:1 pixel ratio)
+    // Scale the offset to match the UV coordinate space
+    float scaledOffset = u_y_offset / u_resolution.y;
+    noise_cord.y -= scaledOffset;
+
     const float minNoise = .0;
     const float maxNoise = .9;
-    
+
     for (int i = 1; i < u_colors_count; i++) {
-    
+
         if(u_colors[i].is_active == 1.0){
             float noiseFlow = (1. + float(i)) / 30.;
             float noiseSpeed = (1. + float(i)) * 0.11;
             float noiseSeed = 13. + float(i) * 7.;
-            
+
+            int reverseIndex = u_colors_count - i;
+
             float noise = snoise(
                 vec3(
                     noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
                     noise_cord.y * u_color_pressure.y,
                     u_time * noiseSpeed
                 ) + noiseSeed
-            );
-            
+            ) - (.1 * float(i)) + (.5 * u_color_blending);
+
             noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
             vec3 nextColor = u_colors[i].color;
-            
-            // vec3 colorOklab = oklab2rgb(color);
-            // vec3 nextColorOklab = oklab2rgb(nextColor);
-            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
-            //
-            // color = rgb2oklab(mixColor);
-            
             color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
         }
-        
     }
-    
+
     v_color = color;
-    
+
     vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
-    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+
     v_new_position = gl_Position;
 }
 `;
 }
-function Y() {
+function Q() {
   return `
+float random(vec2 p) {
+    return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
+}
 
-void main(){
+float fbm(vec3 x) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    float frequency = 1.0;
+    for (int i = 0; i < 4; i++) {
+        value += amplitude * snoise(x * frequency);
+        frequency *= 2.0;
+        amplitude *= 0.5;
+    }
+    return value;
+}
+
+void main() {
     vec3 color = v_color;
-    
-    color.rgb += pow(v_displacement_amount, 1.0) * u_highlights;
-    color.rgb -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
+    color += pow(v_displacement_amount, 1.0) * u_highlights;
+    color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
-    
-    gl_FragColor = vec4(color,1.0);
+
+    // Generate grain using fbm
+    vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
+    float grain = (u_grain_speed != 0.0) ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) : fbm(vec3(noiseCoords, 0.0));
+
+    // Center the grain around zero
+    grain = grain * 0.5 + 0.5;
+    grain -= 0.5;
+
+    // Add sparsity control
+    grain = (grain > u_grain_sparsity) ? grain : 0.0;
+
+    // Apply grain intensity
+    grain *= u_grain_intensity;
+
+    // Add grain to color
+    color += vec3(grain);
+
+    gl_FragColor = vec4(color, 1.0);
 }
-`;
+    `;
 }
-const A = () => `
+const I = () => `
 precision highp float;
 
 struct Color {
@@ -256,6 +324,10 @@ struct Color {
     float value;
 };
 
+uniform float u_grain_intensity; 
+uniform float u_grain_sparsity; 
+uniform float u_grain_scale; 
+uniform float u_grain_speed; 
 uniform float u_time;
 
 uniform float u_wave_amplitude;
@@ -278,12 +350,14 @@ uniform int u_colors_count;
 uniform Color u_colors[5];
 uniform vec2 u_resolution;
 
+uniform float u_y_offset;
+
 varying vec2 vUv;
 varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, H = () => `
+    `, M = () => `
 
 vec3 mod289(vec3 x)
 {
@@ -493,7 +567,7 @@ vec3 rgb2oklab(vec3 oklab)
     return m2 * (lms * lms * lms);
 }
 
-    `, M = () => `
+    `, O = () => `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -536,34 +610,38 @@ 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);
 }
-`, k = (t) => {
-  t.id = E, t.href = "https://neat.firecms.co", t.target = "_blank", t.style.position = "absolute", t.style.display = "block", t.style.bottom = "0", t.style.right = "0", t.style.padding = "10px", t.style.color = "#dcdcdc", t.style.opacity = "0.8", t.style.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "10000", t.innerHTML = "NEAT";
-}, W = (t) => {
+`, N = (t) => {
+  t.id = R, t.href = "https://neat.firecms.co", t.target = "_blank", t.style.position = "absolute", t.style.display = "block", t.style.bottom = "0", t.style.right = "0", t.style.padding = "10px", t.style.color = "#dcdcdc", t.style.opacity = "0.8", t.style.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "10000", t.innerHTML = "NEAT";
+}, Z = (t) => {
   const e = t.parentElement?.getElementsByTagName("a");
   if (e) {
-    for (let i = 0; i < e.length; i++)
-      if (e[i].id === E) {
-        k(e[i]);
+    for (let n = 0; n < e.length; n++)
+      if (e[n].id === R) {
+        N(e[n]);
         return;
       }
   }
   const o = document.createElement("a");
-  k(o), t.parentElement?.appendChild(o);
+  N(o), t.parentElement?.appendChild(o);
 };
-function G() {
+function $() {
   const t = new Date(), e = t.getMinutes(), o = t.getSeconds();
   return e * 60 + o;
 }
-function U(t = 6) {
+function ee(t = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let o = "";
-  for (let i = 0; i < t; i++) {
-    const n = Math.floor(Math.random() * e.length);
-    o += e.charAt(n);
+  for (let n = 0; n < t; n++) {
+    const s = Math.floor(Math.random() * e.length);
+    o += e.charAt(s);
   }
   return o;
 }
+function te(t, e) {
+  const o = document.createElement("a");
+  o.download = e, o.href = t, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+}
 export {
-  X as NeatGradient
+  oe as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map