@firecms/neat 0.2.2 → 0.4.0

package/src/NeatGradient.ts

@@ -32,9 +32,14 @@ export type NeatConfig = {
     colorBrightness?: number;
     colors: NeatColor[];
     colorBlending?: number;
+    grainScale?: number;
+    grainIntensity?: number;
+    grainSparsity?: number;
+    grainSpeed?: number;
     wireframe?: boolean;
     backgroundColor?: string;
     backgroundAlpha?: number;
+    yOffset?: number;
 };
 
 export type NeatColor = {
@@ -68,6 +73,11 @@ export class NeatGradient implements NeatController {
     private _saturation: number = -1;
     private _brightness: number = -1;
 
+    private _grainScale: number = -1;
+    private _grainIntensity: number = -1;
+    private _grainSparsity: number = -1;
+    private _grainSpeed: number = -1;
+
     private _colorBlending: number = -1;
 
     private _colors: NeatColor[] = [];
@@ -80,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 {
@@ -96,11 +108,16 @@ export class NeatGradient implements NeatController {
             colorSaturation = 0,
             colorBrightness = 1,
             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;
 
 
@@ -117,6 +134,10 @@ export class NeatGradient implements NeatController {
         this.waveFrequencyY = waveFrequencyY;
         this.waveAmplitude = waveAmplitude;
         this.colorBlending = colorBlending;
+        this.grainScale = grainScale;
+        this.grainIntensity = grainIntensity;
+        this.grainSparsity = grainSparsity;
+        this.grainSpeed = grainSpeed;
         this.colors = colors;
         this.shadows = shadows;
         this.highlights = highlights;
@@ -125,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);
 
@@ -143,11 +165,15 @@ export class NeatGradient implements NeatController {
                     height = this._ref.height;
 
                 const colors = [
-                    ...this._colors.map(color => ({
-                        is_active: color.enabled,
-                        color: new THREE.Color(color.color),
-                        influence: color.influence
-                    })),
+                    ...this._colors.map(color => {
+                        let threeColor = new THREE.Color();
+                        threeColor.setStyle(color.color, "");
+                        return ({
+                            is_active: color.enabled,
+                            color: threeColor,
+                            influence: color.influence
+                        });
+                    }),
                     ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({
                         is_active: false,
                         color: new THREE.Color(0x000000)
@@ -186,6 +212,16 @@ export class NeatGradient implements NeatController {
                 // @ts-ignore
                 mesh.material.uniforms.u_brightness = { value: this._brightness };
                 // @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;
             });
 
@@ -221,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;
     }
@@ -269,6 +312,22 @@ export class NeatGradient implements NeatController {
         this._colorBlending = colorBlending / 10;
     }
 
+    set grainScale(grainScale: number) {
+        this._grainScale = grainScale == 0 ? 1 : grainScale;
+    }
+
+    set grainIntensity(grainIntensity: number) {
+        this._grainIntensity = grainIntensity;
+    }
+
+    set grainSparsity(grainSparsity: number) {
+        this._grainSparsity = grainSparsity;
+    }
+
+    set grainSpeed(grainSpeed: number) {
+        this._grainSpeed = grainSpeed;
+    }
+
     set wireframe(wireframe: boolean) {
         this._wireframe = wireframe;
     }
@@ -285,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,
@@ -293,6 +356,7 @@ export class NeatGradient implements NeatController {
         const renderer = new THREE.WebGLRenderer({
             // antialias: true,
             alpha: true,
+            preserveDrawingBuffer: true,
             canvas: this._ref
         });
 
@@ -353,12 +417,16 @@ export class NeatGradient implements NeatController {
             u_plane_height: { value: PLANE_HEIGHT },
             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 },
         };
 
         const material = new THREE.ShaderMaterial({
             uniforms: uniforms,
             vertexShader: buildUniforms() + buildNoise() + buildColorFunctions() + buildVertexShader(),
-            fragmentShader: buildUniforms() + buildColorFunctions() + buildFragmentShader()
+            fragmentShader: buildUniforms() + buildColorFunctions() + buildNoise() + buildFragmentShader()
         });
 
         material.wireframe = WIREFRAME;
@@ -417,51 +485,50 @@ 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;
 }
 `;
@@ -469,18 +536,49 @@ void main() {
 
 function buildFragmentShader() {
     return `
+float random(vec2 p) {
+    return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
+}
+
+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(){
+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 buildUniforms = () => `
@@ -492,6 +590,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;
@@ -514,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;
@@ -829,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);
+}