@paper-design/shaders 0.0.32 → 0.0.33

package/dist/shaders/voronoi.d.ts

@@ -1,44 +1,44 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const voronoiMeta: {
     readonly maxColorCount: 5;
 };
 /**
- * Voronoi pattern by Ksenia Kondrashova
- * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez
- * https://www.shadertoy.com/view/ldl3W8
+ * Double-pass Voronoi pattern cell edges
+ * Original algorithm: https://www.shadertoy.com/view/ldl3W8
  *
- * Uniforms include:
+ * Uniforms:
+ * - u_colorBack, u_colorGlow (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_stepsPerColor: discrete color steps between u_colors
+ * - u_distortion (0..0.5): max distance the cell center moves away from regular grid
+ * - u_gap: width of the stroke between the cells
+ * - u_glow: radial glow around each cell center
+ *
+ * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ *
+ * Note: gaps can't be removed completely due to artifacts of Voronoi cells
  *
- * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling
- * - `u_colorsCount` (`float`): Number of active colors in `u_colors`
- * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells
- * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges
- * - `u_distortion` (`float`, 0 – 0.5): Controls how far cell centers can be displaced from the regular grid
- * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)
- * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell
- * - `u_stepsPerColor` (`float`): Discretization of the color transition
- * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance
  */
 export declare const voronoiFragmentShader: string;
 export interface VoronoiUniforms extends ShaderSizingUniforms {
     u_colors: vec4[];
     u_colorsCount: number;
     u_stepsPerColor: number;
-    u_colorBack: [number, number, number, number];
+    u_colorGap: [number, number, number, number];
     u_colorGlow: [number, number, number, number];
     u_distortion: number;
     u_gap: number;
-    u_innerGlow: number;
+    u_glow: number;
     u_noiseTexture?: HTMLImageElement;
 }
 export interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
     stepsPerColor?: number;
-    colorBack?: string;
+    colorGap?: string;
     colorGlow?: string;
     distortion?: number;
     gap?: number;
-    innerGlow?: number;
+    glow?: number;
 }

package/dist/shaders/voronoi.js

@@ -0,0 +1,143 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI } from "../shader-utils.js";
+const voronoiMeta = {
+  maxColorCount: 5
+};
+const voronoiFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform float u_scale;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${voronoiMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_stepsPerColor;
+uniform vec4 u_colorGlow;
+uniform vec4 u_colorGap;
+uniform float u_distortion;
+uniform float u_gap;
+uniform float u_glow;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+vec2 hash(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, uv).gb;
+}
+
+vec4 voronoi(vec2 x, float t) {
+  vec2 ip = floor(x);
+  vec2 fp = fract(x);
+
+  vec2 mg, mr;
+  float md = 8.;
+  float rand = 0.;
+
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 g = vec2(float(i), float(j));
+      vec2 raw_hash = hash(ip + g);
+      vec2 o = hash(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      float d = dot(r, r);
+
+      if (d < md) {
+        md = d;
+        mr = r;
+        mg = g;
+        rand = raw_hash.x;
+      }
+    }
+  }
+
+  md = 8.;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 g = mg + vec2(float(i), float(j));
+      vec2 o = hash(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      if (dot(mr - r, mr - r) > .00001) {
+        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
+      }
+    }
+  }
+
+  return vec4(md, mr, rand);
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .0125;
+
+  float t = u_time;
+
+  vec4 voronoiRes = voronoi(shape_uv, t);
+
+  float shape = clamp(voronoiRes.w, 0., 1.);
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {
+      if (i >= int(u_colorsCount)) break;
+      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+      localT = round(localT * steps) / steps;
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 cellColor = gradient.rgb;
+  float cellOpacity = gradient.a;
+
+  float glows = length(voronoiRes.yz * u_glow + .1);
+  glows = pow(glows, 1.5);
+
+  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);
+  float opacity = cellOpacity + u_colorGlow.a * glows;
+
+  float edge = voronoiRes.x;
+  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
+  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
+
+  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);
+  opacity = mix(u_colorGap.a, opacity, edge);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  voronoiFragmentShader,
+  voronoiMeta
+};
+//# sourceMappingURL=voronoi.js.map

package/dist/shaders/voronoi.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/voronoi.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Double-pass Voronoi pattern cell edges\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms:\n * - u_colorBack, u_colorGlow (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_distortion (0..0.5): max distance the cell center moves away from regular grid\n * - u_gap: width of the stroke between the cells\n * - u_glow: radial glow around each cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: gaps can't be removed completely due to artifacts of Voronoi cells\n *\n */\n\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 raw_hash = hash(ip + g);\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash.x;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .0125;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float glows = length(voronoiRes.yz * u_glow + .1);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAoBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgEa,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/warp.d.ts

@@ -1,25 +1,23 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 export declare const warpMeta: {
     readonly maxColorCount: 10;
 };
 /**
- * 3d Perlin noise with exposed parameters
+ * Iterative layered + swirl-based distortion applied over different layouts (shapes)
  *
- * Uniforms include:
- * - u_colors (vec4[]): Input RGBA colors
- * - u_colorsCount (float): Number of active colors (`u_colors` length)
- * - u_proportion (0 .. 1): the proportion between colors (on 0.5 colors are equally distributed)
- * - u_softness (0 .. 1): the color blur (0 for pronounced edges, 1 for gradient)
- * - u_shape (0 ... 2): the color pattern to be distorted with noise & swirl
- *    - u_shape = 0 is checks
- *    - u_shape = 1 is stripes
- *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)
- * - u_shapeScale: the scale of color pattern (appies over the global scaling)
- * - u_distortion: the noisy distortion over the UV coordinate (applied before the overlapping swirl)
- * - u_swirl: the power of swirly distortion
- * - u_swirlIterations: the number of swirl iterations (layering curves effect)
+ * Uniforms:
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ * - u_shape (float used as integer):
+ * ---- 0: checks
+ * ---- 1: stripes
+ * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)
+ * - u_shapeScale: the scale of layouts (underlying shapes)
+ * - u_distortion: value noise distortion over the UV coordinate
+ * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)
  *
  */
 export declare const warpFragmentShader: string;

package/dist/shaders/warp.js

@@ -0,0 +1,108 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRandom, declareValueNoise, declareRotate, colorBandingFix } from "../shader-utils.js";
+const warpMeta = {
+  maxColorCount: 10
+};
+const warpFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+uniform float u_scale;
+
+uniform vec4 u_colors[${warpMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_shape;
+uniform float u_shapeScale;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_swirlIterations;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRandom}
+${declareRotate}
+${declareValueNoise}
+
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .005;
+
+  float t = .01 * u_time;
+
+  float n1 = valueNoise(uv * 1. + t);
+  float n2 = valueNoise(uv * 2. - t);
+  float angle = n1 * TWO_PI;
+  uv.x += 4. * u_distortion * n2 * cos(angle);
+  uv.y += 4. * u_distortion * n2 * sin(angle);
+
+  float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));
+  for (float i = 1.; i <= iterationsNumber; i++) {
+    uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);
+    uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);
+  }
+
+  float proportion = clamp(u_proportion, 0., 1.);
+
+  float shape = 0.;
+  if (u_shape < .5) {
+    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
+    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else if (u_shape < 1.5) {
+    vec2 stripesShape_uv = uv * (2. * u_shapeScale);
+    float f = fract(stripesShape_uv.y);
+    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else {
+    float shapeScaling = 5. * (1. - u_shapeScale);
+    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));
+  }
+
+  float mixer = shape * (u_colorsCount - 1.);
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);
+
+    float localMixerStart = floor(localMixer);
+    float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);
+    float localTStepped = localMixerStart + smoothed;
+
+    localMixer = mix(localTStepped, localMixer, u_softness);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localMixer);
+  }
+
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const WarpPatterns = {
+  checks: 0,
+  stripes: 1,
+  edge: 2
+};
+export {
+  WarpPatterns,
+  warpFragmentShader,
+  warpMeta
+};
+//# sourceMappingURL=warp.js.map

package/dist/shaders/warp.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/warp.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRandom, declareValueNoise, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n */\n\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n${declareValueNoise}\n\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .005;\n\n  float t = .01 * u_time;\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));\n  for (float i = 1.; i <= iterationsNumber; i++) {\n    uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n    uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(localMixer);\n    float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);\n    float localTStepped = localMixerStart + smoothed;\n\n    localMixer = mix(localTStepped, localMixer, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localMixer);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,mBAAmB,eAAe,uBAAuB;AAErF,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAmBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAyCK,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
+  "names": []
+}

package/dist/shaders/waves.d.ts

@@ -1,26 +1,23 @@
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
- * Waves static pattern on the transparent background
+ * Waveform pattern
  *
- * Uniforms include:
- * u_color1 - the first color
- * u_color2 - the second color
- * u_shape (0 ... 3) - the line shaping coefficient, non-integer
-   values allowed and produce mixed shapes
-   - u_shape = 0 is zigzag
-   - u_shape = 1 is perfect sine wave
-   - u_shape = 2 is irregular wave #1
-   - u_shape = 3 is irregular wave #2
- * u_frequency - the wave frequency
- * u_amplitude - the wave amplitude
- * u_spacing - the density of pattern lines
- * u_proportion (0 ... 1) - the proportion of stroke width to the pattern step
- * u_softness (0 ... 1) - the blur applied to the lines edges
- */
+ * Uniforms:
+ * - u_colorBack, u_colorFront (RGBA)
+ * - u_shape (float, fractional numbers allowed):
+ *   ---- 0: zigzag
+ *   ---- 1: sine wave
+ *   ---- 2: irregular wave
+ *   ---- 3: irregular wave
+ * - u_amplitude, u_frequency, u_spacing: wave settings
+ * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ *
+ * */
 export declare const wavesFragmentShader: string;
 export interface WavesUniforms extends ShaderSizingUniforms {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
     u_shape: number;
     u_frequency: number;
     u_amplitude: number;
@@ -29,8 +26,8 @@ export interface WavesUniforms extends ShaderSizingUniforms {
     u_softness: number;
 }
 export interface WavesParams extends ShaderSizingParams {
-    color1?: string;
-    color2?: string;
+    colorFront?: string;
+    colorBack?: string;
     rotation?: number;
     shape?: number;
     frequency?: number;

package/dist/shaders/waves.js

@@ -0,0 +1,68 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRotate } from "../shader-utils.js";
+const wavesFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_scale;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_shape;
+uniform float u_frequency;
+uniform float u_amplitude;
+uniform float u_spacing;
+uniform float u_proportion;
+uniform float u_softness;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${declareRotate}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= .05;
+
+  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
+  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
+  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
+  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
+
+  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
+  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
+  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
+  offset *= 2. * u_amplitude;
+
+  float spacing = .02 + .98 * u_spacing;
+  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
+
+  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);
+  edge_width += .5 * max(0., u_softness);
+  float dc = 1. - clamp(u_proportion, 0., 1.);
+  float res = smoothstep(dc - edge_width, dc + edge_width, shape);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  wavesFragmentShader
+};
+//# sourceMappingURL=waves.js.map

package/dist/shaders/waves.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/waves.ts"],
+  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate } from '../shader-utils.js';\n\n/**\n * Waveform pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_shape (float, fractional numbers allowed):\n *   ---- 0: zigzag\n *   ---- 1: sine wave\n *   ---- 2: irregular wave\n *   ---- 3: irregular wave\n * - u_amplitude, u_frequency, u_spacing: wave settings\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n * */\n\nexport const wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_scale;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_proportion;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .05;\n\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n\n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_softness);\n  float dc = 1. - clamp(u_proportion, 0., 1.);\n  float res = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_proportion: number;\n  u_softness: number;\n}\n\nexport interface WavesParams extends ShaderSizingParams {\n  colorFront?: string;\n  colorBack?: string;\n  rotation?: number;\n  shape?: number;\n  frequency?: number;\n  amplitude?: number;\n  spacing?: number;\n  proportion?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB;AAkBlC,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/types.js

@@ -0,0 +1,6 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,4 +24,4 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {}
-}
+}