@fjandin/react-shader 0.0.7 → 0.0.9

package/dist/example/shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QA4FnB,CAAA"}
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAwCnB,CAAA"}

package/dist/index.cjs

@@ -29,7 +29,10 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
+  generateUtilsFunction: () => generateUtilsFunction,
   generateSimplexNoiseFunction: () => generateSimplexNoiseFunction,
+  generateSceneCirclesFunction: () => generateSceneCirclesFunction,
+  generateDistortionRippleFunction: () => generateDistortionRippleFunction,
   generateColorPaletteFunction: () => generateColorPaletteFunction,
   ReactShader: () => ReactShader
 });
@@ -550,6 +553,63 @@ function generateColorPaletteFunction(name, paletteString) {
         }
       `;
 }
+// src/shaders/distortion-ripple.ts
+function generateDistortionRippleFunction() {
+  return `
+      vec2 DistortionRipple(vec2 uv, vec2 center, float radius, float intensity, float thickness) {
+        // 1. Calculate vector and distance from center
+        vec2 dir = uv - center;
+        float dist = length(dir);
+        
+        // 2. Create a mask so the ripple only exists near the radius Z
+        // Using smoothstep creates a soft edge for the ripple
+        float mask = smoothstep(radius + thickness, radius, dist) * smoothstep(radius - thickness, radius, dist);
+      
+        // 3. Calculate the displacement amount using a Sine wave
+        // We subtract dist from radius to orient the wave correctly
+        float wave = sin((dist - radius) * 20.0); 
+        
+        // 4. Apply intensity and mask, then offset the UV
+        vec2 offset = normalize(dir) * wave * intensity * mask;
+        
+        return offset;
+      }
+    `;
+}
+// src/shaders/scene-circles.ts
+function generateSceneCirclesFunction(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
+  return `
+        ${generateColorPaletteFunction("circlesPalette", paletteString)}
+
+        vec3 SceneCircles(
+            vec2 uv0,
+            float iterations,
+            float fractMultiplier,
+            float time,
+            float waveLength,
+            float edgeBlur,
+            float contrast
+        ) {
+            vec3 col = vec3(0.0);
+            vec2 uv = uv0;
+        
+            for (float i = 0.0; i < iterations; i++) {
+                uv = fract(uv * fractMultiplier) - 0.5;
+            
+                float d = length(uv) * exp(-length(uv0));
+            
+                vec3 color = circlesPalette(length(uv0) + i * 0.4 + time * 0.4);
+            
+                d = sin(d * waveLength + time) / waveLength;
+                d = abs(d);
+                d = pow(edgeBlur / d, contrast);
+            
+                col += color * d;
+            }
+            return col;
+        }
+    `;
+}
 // src/shaders/simplex-noise.ts
 function generateSimplexNoiseFunction() {
   return `
@@ -659,7 +719,7 @@ function generateSimplexNoiseFunction() {
                    + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
     }
     
-    float SimplexNoise(vec3 v) {
+    float SimplexNoise3D(vec3 v) {
       const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
       const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
     
@@ -734,3 +794,15 @@ function generateSimplexNoiseFunction() {
     }
     `;
 }
+// src/shaders/utils.ts
+function generateUtilsFunction() {
+  return `
+    vec2 GetUv(vec2 fragCoord, vec2 resolution) {
+      return (fragCoord - 0.5 * resolution) / resolution.y;
+    }
+
+    vec2 GetMouse(vec2 mouse, vec2 resolution) {
+      return (mouse - 0.5 * resolution) / resolution.y;
+    }
+  `;
+}

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 export { ReactShader } from "./ReactShader";
 export { generateColorPaletteFunction } from "./shaders/color-palette";
+export { generateDistortionRippleFunction } from "./shaders/distortion-ripple";
+export { generateSceneCirclesFunction } from "./shaders/scene-circles";
 export { generateSimplexNoiseFunction } from "./shaders/simplex-noise";
+export { generateUtilsFunction } from "./shaders/utils";
 export type { DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -513,6 +513,63 @@ function generateColorPaletteFunction(name, paletteString) {
         }
       `;
 }
+// src/shaders/distortion-ripple.ts
+function generateDistortionRippleFunction() {
+  return `
+      vec2 DistortionRipple(vec2 uv, vec2 center, float radius, float intensity, float thickness) {
+        // 1. Calculate vector and distance from center
+        vec2 dir = uv - center;
+        float dist = length(dir);
+        
+        // 2. Create a mask so the ripple only exists near the radius Z
+        // Using smoothstep creates a soft edge for the ripple
+        float mask = smoothstep(radius + thickness, radius, dist) * smoothstep(radius - thickness, radius, dist);
+      
+        // 3. Calculate the displacement amount using a Sine wave
+        // We subtract dist from radius to orient the wave correctly
+        float wave = sin((dist - radius) * 20.0); 
+        
+        // 4. Apply intensity and mask, then offset the UV
+        vec2 offset = normalize(dir) * wave * intensity * mask;
+        
+        return offset;
+      }
+    `;
+}
+// src/shaders/scene-circles.ts
+function generateSceneCirclesFunction(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
+  return `
+        ${generateColorPaletteFunction("circlesPalette", paletteString)}
+
+        vec3 SceneCircles(
+            vec2 uv0,
+            float iterations,
+            float fractMultiplier,
+            float time,
+            float waveLength,
+            float edgeBlur,
+            float contrast
+        ) {
+            vec3 col = vec3(0.0);
+            vec2 uv = uv0;
+        
+            for (float i = 0.0; i < iterations; i++) {
+                uv = fract(uv * fractMultiplier) - 0.5;
+            
+                float d = length(uv) * exp(-length(uv0));
+            
+                vec3 color = circlesPalette(length(uv0) + i * 0.4 + time * 0.4);
+            
+                d = sin(d * waveLength + time) / waveLength;
+                d = abs(d);
+                d = pow(edgeBlur / d, contrast);
+            
+                col += color * d;
+            }
+            return col;
+        }
+    `;
+}
 // src/shaders/simplex-noise.ts
 function generateSimplexNoiseFunction() {
   return `
@@ -622,7 +679,7 @@ function generateSimplexNoiseFunction() {
                    + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
     }
     
-    float SimplexNoise(vec3 v) {
+    float SimplexNoise3D(vec3 v) {
       const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
       const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
     
@@ -697,8 +754,23 @@ function generateSimplexNoiseFunction() {
     }
     `;
 }
+// src/shaders/utils.ts
+function generateUtilsFunction() {
+  return `
+    vec2 GetUv(vec2 fragCoord, vec2 resolution) {
+      return (fragCoord - 0.5 * resolution) / resolution.y;
+    }
+
+    vec2 GetMouse(vec2 mouse, vec2 resolution) {
+      return (mouse - 0.5 * resolution) / resolution.y;
+    }
+  `;
+}
 export {
+  generateUtilsFunction,
   generateSimplexNoiseFunction,
+  generateSceneCirclesFunction,
+  generateDistortionRippleFunction,
   generateColorPaletteFunction,
   ReactShader
 };

package/dist/shaders/distortion-ripple.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @returns glsl function for distortion ripple
+ *
+ * vec2 uv: uv coordinates
+ *
+ * vec2 center: center of the ripple
+ *
+ * float radius: radius of the ripple
+ *
+ * float intensity: intensity of the ripple
+ *
+ * float thickness: thickness of the ripple
+ */
+export declare function generateDistortionRippleFunction(): string;
+//# sourceMappingURL=distortion-ripple.d.ts.map

package/dist/shaders/distortion-ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distortion-ripple.d.ts","sourceRoot":"","sources":["../../src/shaders/distortion-ripple.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gCAAgC,WAqB/C"}

package/dist/shaders/scene-circles.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ * @param paletteString
+ * @returns glsl function for rendering circles
+ *
+ * vec2 uv0: uv coordinates
+ *
+ * float iterations: number of iterations
+ *
+ * float fractMultiplier: fract multiplier
+ *
+ * float time: time
+ *
+ * float waveLength: wave length
+ *
+ * float edgeBlur: edge blur
+ *
+ * float contrast: contrast
+ */
+export declare function generateSceneCirclesFunction(paletteString?: string): string;
+//# sourceMappingURL=scene-circles.d.ts.map

package/dist/shaders/scene-circles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene-circles.d.ts","sourceRoot":"","sources":["../../src/shaders/scene-circles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,4BAA4B,CAC1C,aAAa,SAAoE,UAiClF"}

package/dist/shaders/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function generateUtilsFunction(): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/shaders/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/shaders/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,WAUpC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",