@firecms/neat 0.3.0 → 0.4.0

package/src/NeatGradient.ts

@@ -34,10 +34,12 @@ export type NeatConfig = {
     colorBlending?: number;
     grainScale?: number;
     grainIntensity?: number;
+    grainSparsity?: number;
     grainSpeed?: number;
     wireframe?: boolean;
     backgroundColor?: string;
     backgroundAlpha?: number;
+    yOffset?: number;
 };
 
 export type NeatColor = {
@@ -73,6 +75,7 @@ export class NeatGradient implements NeatController {
 
     private _grainScale: number = -1;
     private _grainIntensity: number = -1;
+    private _grainSparsity: number = -1;
     private _grainSpeed: number = -1;
 
     private _colorBlending: number = -1;
@@ -87,6 +90,8 @@ export class NeatGradient implements NeatController {
     private sizeObserver: ResizeObserver;
     private sceneState: SceneState;
 
+    private _yOffset: number = 0;
+
     constructor(config: NeatConfig & { ref: HTMLCanvasElement, resolution?: number, seed?: number }) {
 
         const {
@@ -105,12 +110,14 @@ export class NeatGradient implements NeatController {
             colorBlending = 5,
             grainScale = 2,
             grainIntensity = 0.55,
+            grainSparsity = 0.0,
             grainSpeed = 0.1,
             wireframe = false,
             backgroundColor = "#FFFFFF",
             backgroundAlpha = 1.0,
             resolution = 1,
-            seed
+            seed,
+            yOffset = 0
         } = config;
 
 
@@ -129,6 +136,7 @@ export class NeatGradient implements NeatController {
         this.colorBlending = colorBlending;
         this.grainScale = grainScale;
         this.grainIntensity = grainIntensity;
+        this.grainSparsity = grainSparsity;
         this.grainSpeed = grainSpeed;
         this.colors = colors;
         this.shadows = shadows;
@@ -138,6 +146,7 @@ export class NeatGradient implements NeatController {
         this.wireframe = wireframe;
         this.backgroundColor = backgroundColor;
         this.backgroundAlpha = backgroundAlpha;
+        this.yOffset = yOffset;
 
         this.sceneState = this._initScene(resolution);
 
@@ -205,10 +214,14 @@ export class NeatGradient implements NeatController {
                 // @ts-ignore
                 mesh.material.uniforms.u_grain_intensity = { value: this._grainIntensity };
                 // @ts-ignore
+                mesh.material.uniforms.u_grain_sparsity = { value: this._grainSparsity };
+                // @ts-ignore
                 mesh.material.uniforms.u_grain_speed = { value: this._grainSpeed };
                 // @ts-ignore
                 mesh.material.uniforms.u_grain_scale = { value: this._grainScale };
                 // @ts-ignore
+                mesh.material.uniforms.u_y_offset = { value: this._yOffset };
+                // @ts-ignore
                 mesh.material.wireframe = this._wireframe;
             });
 
@@ -244,6 +257,13 @@ export class NeatGradient implements NeatController {
         }
     }
 
+    downloadAsPNG(filename = "neat.png") {
+        console.log("Downloading as PNG", this._ref);
+        const dataURL = this._ref.toDataURL("image/png");
+        console.log("data", dataURL);
+        downloadURI(dataURL, filename);
+    }
+
     set speed(speed: number) {
         this._speed = speed / 20;
     }
@@ -300,6 +320,10 @@ export class NeatGradient implements NeatController {
         this._grainIntensity = grainIntensity;
     }
 
+    set grainSparsity(grainSparsity: number) {
+        this._grainSparsity = grainSparsity;
+    }
+
     set grainSpeed(grainSpeed: number) {
         this._grainSpeed = grainSpeed;
     }
@@ -320,6 +344,10 @@ export class NeatGradient implements NeatController {
         this._backgroundAlpha = backgroundAlpha;
     }
 
+    set yOffset(yOffset: number) {
+        this._yOffset = yOffset;
+    }
+
     _initScene(resolution: number): SceneState {
 
         const width = this._ref.width,
@@ -328,6 +356,7 @@ export class NeatGradient implements NeatController {
         const renderer = new THREE.WebGLRenderer({
             // antialias: true,
             alpha: true,
+            preserveDrawingBuffer: true,
             canvas: this._ref
         });
 
@@ -389,6 +418,7 @@ export class NeatGradient implements NeatController {
             u_shadows: { value: this._shadows },
             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 },
         };
@@ -455,26 +485,31 @@ 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.,
@@ -482,25 +517,18 @@ void main() {
                     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;
             color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
-            
-            // vec3 colorOklab = oklab2rgb(color);
-            // vec3 nextColorOklab = oklab2rgb(nextColor);
-            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
-            // color = rgb2oklab(mixColor);
-            
         }
-        
     }
-    
+
     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;
 }
 `;
@@ -516,7 +544,6 @@ 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;
@@ -524,35 +551,34 @@ float fbm(vec3 x) {
     }
     return value;
 }
-    
-void main(){
+
+void main() {
     vec3 color = v_color;
-    
     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;
-    
+
     // 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));
+    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);
+
+    gl_FragColor = vec4(color, 1.0);
 }
-`;
+    `;
 }
 
 const buildUniforms = () => `
@@ -565,6 +591,7 @@ struct Color {
 };
 
 uniform float u_grain_intensity; 
+uniform float u_grain_sparsity; 
 uniform float u_grain_scale; 
 uniform float u_grain_speed; 
 uniform float u_time;
@@ -589,6 +616,8 @@ 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;
@@ -904,3 +933,12 @@ function generateRandomString(length: number = 6): string {
     }
     return result;
 }
+
+function downloadURI(uri: string, name: string) {
+    const link = document.createElement("a");
+    link.download = name;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}