shaders-oneshot 0.0.81-shared.1

package/dist/shaders/dot-grid.js

@@ -0,0 +1,110 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, simplexNoise } from "../shader-utils.js";
+const dotGridFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFill;
+uniform vec4 u_colorStroke;
+uniform float u_dotSize;
+uniform float u_gapX;
+uniform float u_gapY;
+uniform float u_strokeWidth;
+uniform float u_sizeRange;
+uniform float u_opacityRange;
+uniform float u_shape;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${simplexNoise}
+
+float polygon(vec2 p, float N, float rot) {
+  float a = atan(p.x, p.y) + rot;
+  float r = TWO_PI / float(N);
+
+  return cos(floor(.5 + a / r) * r - a) * length(p);
+}
+
+void main() {
+
+  // x100 is a default multiplier between vertex and fragmant shaders
+  // we use it to avoid UV presision issues
+  vec2 shape_uv = 100. * v_patternUV;
+
+  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
+  vec2 grid = fract(shape_uv / gap) + 1e-4;
+  vec2 grid_idx = floor(shape_uv / gap);
+  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
+  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+
+  vec2 center = vec2(0.5) - 1e-3;
+  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
+
+  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
+  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
+
+  float dist;
+  if (u_shape < 0.5) {
+    // Circle
+    dist = length(p);
+  } else if (u_shape < 1.5) {
+    // Diamond
+    strokeWidth *= 1.5;
+    dist = polygon(1.5 * p, 4., .25 * PI);
+  } else if (u_shape < 2.5) {
+    // Square
+    dist = polygon(1.03 * p, 4., 1e-3);
+  } else {
+    // Triangle
+    strokeWidth *= 1.5;
+    p = p * 2. - 1.;
+    p *= .9;
+    p.y = 1. - p.y;
+    p.y -= .75 * baseSize;
+    dist = polygon(p, 3., 1e-3);
+  }
+
+  float edgeWidth = fwidth(dist);
+  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
+  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
+  float stroke = shapeOuter - shapeInner;
+
+  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+  stroke *= dotOpacity;
+  shapeInner *= dotOpacity;
+
+  stroke *= u_colorStroke.a;
+  shapeInner *= u_colorFill.a;
+
+  vec3 color = vec3(0.);
+  color += stroke * u_colorStroke.rgb;
+  color += shapeInner * u_colorFill.rgb;
+  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
+
+  float opacity = 0.;
+  opacity += stroke;
+  opacity += shapeInner;
+  opacity += (1. - opacity) * u_colorBack.a;
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const DotGridShapes = {
+  circle: 0,
+  diamond: 1,
+  square: 2,
+  triangle: 3
+};
+export {
+  DotGridShapes,
+  dotGridFragmentShader
+};
+//# sourceMappingURL=dot-grid.js.map

package/dist/shaders/dot-grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-grid.ts"],
+  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, simplexNoise } from '../shader-utils.js';\r\n\r\n/**\r\n * Static grid pattern made of circles, diamonds, squares or triangles.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_colorFill (vec4): Shape fill color in RGBA\r\n * - u_colorStroke (vec4): Shape stroke color in RGBA, needs strokeWidth > 0\r\n * - u_dotSize (float): Base size of each shape in pixels (1 to 100)\r\n * - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)\r\n * - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)\r\n * - u_strokeWidth (float): Outline stroke width in pixels, needs colorStroke alpha > 0 (0 to 50)\r\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\r\n * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)\r\n * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const dotGridFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorFill;\r\nuniform vec4 u_colorStroke;\r\nuniform float u_dotSize;\r\nuniform float u_gapX;\r\nuniform float u_gapY;\r\nuniform float u_strokeWidth;\r\nuniform float u_sizeRange;\r\nuniform float u_opacityRange;\r\nuniform float u_shape;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ simplexNoise }\r\n\r\nfloat polygon(vec2 p, float N, float rot) {\r\n  float a = atan(p.x, p.y) + rot;\r\n  float r = TWO_PI / float(N);\r\n\r\n  return cos(floor(.5 + a / r) * r - a) * length(p);\r\n}\r\n\r\nvoid main() {\r\n\r\n  // x100 is a default multiplier between vertex and fragmant shaders\r\n  // we use it to avoid UV presision issues\r\n  vec2 shape_uv = 100. * v_patternUV;\r\n\r\n  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));\r\n  vec2 grid = fract(shape_uv / gap) + 1e-4;\r\n  vec2 grid_idx = floor(shape_uv / gap);\r\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\r\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\r\n\r\n  vec2 center = vec2(0.5) - 1e-3;\r\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\r\n\r\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\r\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\r\n\r\n  float dist;\r\n  if (u_shape < 0.5) {\r\n    // Circle\r\n    dist = length(p);\r\n  } else if (u_shape < 1.5) {\r\n    // Diamond\r\n    strokeWidth *= 1.5;\r\n    dist = polygon(1.5 * p, 4., .25 * PI);\r\n  } else if (u_shape < 2.5) {\r\n    // Square\r\n    dist = polygon(1.03 * p, 4., 1e-3);\r\n  } else {\r\n    // Triangle\r\n    strokeWidth *= 1.5;\r\n    p = p * 2. - 1.;\r\n    p *= .9;\r\n    p.y = 1. - p.y;\r\n    p.y -= .75 * baseSize;\r\n    dist = polygon(p, 3., 1e-3);\r\n  }\r\n\r\n  float edgeWidth = fwidth(dist);\r\n  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);\r\n  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);\r\n  float stroke = shapeOuter - shapeInner;\r\n\r\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\r\n  stroke *= dotOpacity;\r\n  shapeInner *= dotOpacity;\r\n\r\n  stroke *= u_colorStroke.a;\r\n  shapeInner *= u_colorFill.a;\r\n\r\n  vec3 color = vec3(0.);\r\n  color += stroke * u_colorStroke.rgb;\r\n  color += shapeInner * u_colorFill.rgb;\r\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\r\n\r\n  float opacity = 0.;\r\n  opacity += stroke;\r\n  opacity += shapeInner;\r\n  opacity += (1. - opacity) * u_colorBack.a;\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface DotGridUniforms extends ShaderSizingUniforms {\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorFill: [number, number, number, number];\r\n  u_colorStroke: [number, number, number, number];\r\n  u_dotSize: number;\r\n  u_gapX: number;\r\n  u_gapY: number;\r\n  u_strokeWidth: number;\r\n  u_sizeRange: number;\r\n  u_opacityRange: number;\r\n  u_shape: (typeof DotGridShapes)[DotGridShape];\r\n}\r\n\r\nexport interface DotGridParams extends ShaderSizingParams {\r\n  colorBack?: string;\r\n  colorFill?: string;\r\n  colorStroke?: string;\r\n  size?: number;\r\n  gapX?: number;\r\n  gapY?: number;\r\n  strokeWidth?: number;\r\n  sizeRange?: number;\r\n  opacityRange?: number;\r\n  shape?: DotGridShape;\r\n}\r\n\r\nexport const DotGridShapes = {\r\n  circle: 0,\r\n  diamond: 1,\r\n  square: 2,\r\n  triangle: 3,\r\n} as const;\r\n\r\nexport type DotGridShape = keyof typeof DotGridShapes;\r\n"],
+  "mappings": ";;;;;AAAA,eAAmE;AACnE,SAAS,WAAW,oBAAoB;AAoCjC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB1C,SAAU;AAAA,EACV,YAAa;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoGT,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "names": []
+}

package/dist/shaders/dot-orbit.d.ts

@@ -0,0 +1,57 @@
+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 dotOrbitMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ * Animated multi-color dots pattern with each dot orbiting around its cell center.
+ * Supports up to 10 colors and various shape and motion controls.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colors (vec4[]): Up to 10 base colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 4)
+ * - u_size (float): Dot radius relative to cell size (0 to 1)
+ * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
+ * - u_spreading (float): Maximum orbit distance around cell center, dots are static at 0 (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const dotOrbitFragmentShader: string;
+export interface DotOrbitUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_size: number;
+    u_sizeRange: number;
+    u_spreading: number;
+    u_stepsPerColor: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    size?: number;
+    sizeRange?: number;
+    spreading?: number;
+    stepsPerColor?: number;
+}

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,123 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from "../shader-utils.js";
+const dotOrbitMeta = {
+  maxColorCount: 10
+};
+const dotOrbitFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_stepsPerColor;
+uniform float u_size;
+uniform float u_sizeRange;
+uniform float u_spreading;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${textureRandomizerR}
+${textureRandomizerGB}
+
+
+vec3 voronoiShape(vec2 uv, float time) {
+  vec2 i_uv = floor(uv);
+  vec2 f_uv = fract(uv);
+
+  float spreading = .25 * clamp(u_spreading, 0., 1.);
+
+  float minDist = 1.;
+  vec2 randomizer = vec2(0.);
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 tileOffset = vec2(float(x), float(y));
+      vec2 rand = randomGB(i_uv + tileOffset);
+      vec2 cellCenter = vec2(.5 + 1e-4);
+      cellCenter += spreading * cos(time + TWO_PI * rand);
+      cellCenter -= .5;
+      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);
+      cellCenter += .5;
+      float dist = length(tileOffset + cellCenter - f_uv);
+      if (dist < minDist) {
+        minDist = dist;
+        randomizer = rand;
+      }
+    }
+  }
+
+  return vec3(minDist, randomizer);
+}
+
+void main() {
+
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 1.5;
+
+  const float firstFrameOffset = -10.;
+  float t = u_time + firstFrameOffset;
+
+  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
+
+  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];
+  float dist = voronoi[0];
+  float edgeWidth = fwidth(dist);
+  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);
+
+  float shape = voronoi[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 < ${dotOrbitMeta.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 color = gradient.rgb * dots;
+  float opacity = gradient.a * dots;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  dotOrbitFragmentShader,
+  dotOrbitMeta
+};
+//# sourceMappingURL=dot-orbit.js.map

package/dist/shaders/dot-orbit.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-orbit.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\r\nimport type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';\r\n\r\nexport const dotOrbitMeta = {\r\n  maxColorCount: 10,\r\n} as const;\r\n\r\n/**\r\n * Animated multi-color dots pattern with each dot orbiting around its cell center.\r\n * Supports up to 10 colors and various shape and motion controls.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_colors (vec4[]): Up to 10 base colors in RGBA\r\n * - u_colorsCount (float): Number of active colors\r\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc., needs 2+ colors (1 to 4)\r\n * - u_size (float): Dot radius relative to cell size (0 to 1)\r\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\r\n * - u_spreading (float): Maximum orbit distance around cell center, dots are static at 0 (0 to 1)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const dotOrbitFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform sampler2D u_noiseTexture;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colors[${ dotOrbitMeta.maxColorCount }];\r\nuniform float u_colorsCount;\r\nuniform float u_stepsPerColor;\r\nuniform float u_size;\r\nuniform float u_sizeRange;\r\nuniform float u_spreading;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ rotation2 }\r\n${ textureRandomizerR }\r\n${ textureRandomizerGB }\r\n\r\n\r\nvec3 voronoiShape(vec2 uv, float time) {\r\n  vec2 i_uv = floor(uv);\r\n  vec2 f_uv = fract(uv);\r\n\r\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\r\n\r\n  float minDist = 1.;\r\n  vec2 randomizer = vec2(0.);\r\n  for (int y = -1; y <= 1; y++) {\r\n    for (int x = -1; x <= 1; x++) {\r\n      vec2 tileOffset = vec2(float(x), float(y));\r\n      vec2 rand = randomGB(i_uv + tileOffset);\r\n      vec2 cellCenter = vec2(.5 + 1e-4);\r\n      cellCenter += spreading * cos(time + TWO_PI * rand);\r\n      cellCenter -= .5;\r\n      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);\r\n      cellCenter += .5;\r\n      float dist = length(tileOffset + cellCenter - f_uv);\r\n      if (dist < minDist) {\r\n        minDist = dist;\r\n        randomizer = rand;\r\n      }\r\n    }\r\n  }\r\n\r\n  return vec3(minDist, randomizer);\r\n}\r\n\r\nvoid main() {\r\n\r\n  vec2 shape_uv = v_patternUV;\r\n  shape_uv *= 1.5;\r\n\r\n  const float firstFrameOffset = -10.;\r\n  float t = u_time + firstFrameOffset;\r\n\r\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\r\n\r\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\r\n  float dist = voronoi[0];\r\n  float edgeWidth = fwidth(dist);\r\n  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);\r\n\r\n  float shape = voronoi[1];\r\n\r\n  float mixer = shape * (u_colorsCount - 1.);\r\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\r\n  float steps = max(1., u_stepsPerColor);\r\n\r\n  vec4 gradient = u_colors[0];\r\n  gradient.rgb *= gradient.a;\r\n  for (int i = 1; i < ${ dotOrbitMeta.maxColorCount }; i++) {\r\n    if (i >= int(u_colorsCount)) break;\r\n    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\r\n    localT = round(localT * steps) / steps;\r\n    vec4 c = u_colors[i];\r\n    c.rgb *= c.a;\r\n    gradient = mix(gradient, c, localT);\r\n  }\r\n\r\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\r\n    float localT = mixer + 1.;\r\n    if (mixer > (u_colorsCount - 1.)) {\r\n      localT = mixer - (u_colorsCount - 1.);\r\n    }\r\n    localT = round(localT * steps) / steps;\r\n    vec4 cFst = u_colors[0];\r\n    cFst.rgb *= cFst.a;\r\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\r\n    cLast.rgb *= cLast.a;\r\n    gradient = mix(cLast, cFst, localT);\r\n  }\r\n\r\n  vec3 color = gradient.rgb * dots;\r\n  float opacity = gradient.a * dots;\r\n\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n  color = color + bgColor * (1. - opacity);\r\n  opacity = opacity + u_colorBack.a * (1. - opacity);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\r\n  u_colorBack: [number, number, number, number];\r\n  u_colors: vec4[];\r\n  u_colorsCount: number;\r\n  u_size: number;\r\n  u_sizeRange: number;\r\n  u_spreading: number;\r\n  u_stepsPerColor: number;\r\n  u_noiseTexture?: HTMLImageElement;\r\n}\r\n\r\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colorBack?: string;\r\n  colors?: string[];\r\n  size?: number;\r\n  sizeRange?: number;\r\n  spreading?: number;\r\n  stepsPerColor?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB,2BAA2B;AAEvE,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAoCO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQrB,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWjD,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA,EACnB,mBAAoB;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,wBAsDE,aAAa,aAAc;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/fluted-glass.d.ts

@@ -0,0 +1,112 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Fluted glass image filter that transforms an image into streaked, ribbed distortions,
+ * giving a mix of clarity and obscurity.
+ *
+ * Fragment shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_image (sampler2D): Source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorShadow (vec4): Shadows color in RGBA, needs shadows > 0
+ * - u_colorHighlight (vec4): Highlights color in RGBA, needs highlights > 0
+ * - u_shadows (float): Color gradient added over image and background, following distortion shape, needs colorShadow alpha > 0 (0 to 1)
+ * - u_highlights (float): Thin strokes along distortion shape, useful for antialiasing on small grid (0 to 1)
+ * - u_size (float): Size of the distortion shape grid (0 to 1)
+ * - u_shape (float): Grid shape (1 = lines, 2 = linesIrregular, 3 = wave, 4 = zigzag, 5 = pattern)
+ * - u_angle (float): Direction of the grid relative to the image in degrees (0 to 180)
+ * - u_distortionShape (float): Shape of distortion (1 = prism, 2 = lens, 3 = contour, 4 = cascade, 5 = flat)
+ * - u_distortion (float): Power of distortion applied within each stripe (0 to 1)
+ * - u_shift (float): Texture shift in direction opposite to the grid, needs distortion > 0 (-1 to 1)
+ * - u_stretch (float): Extra distortion along the grid lines (0 to 1)
+ * - u_blur (float): One-directional blur over the image and extra blur around edges (0 to 1)
+ * - u_edges (float): Glass distortion and softness on the image edges (0 to 1)
+ * - u_marginLeft (float): Distance from the left edge to the effect (0 to 1)
+ * - u_marginRight (float): Distance from the right edge to the effect (0 to 1)
+ * - u_marginTop (float): Distance from the top edge to the effect (0 to 1)
+ * - u_marginBottom (float): Distance from the bottom edge to the effect (0 to 1)
+ * - u_grainMixer (float): Strength of grain distortion applied to shape edges, needs distortion > 0 (0 to 1)
+ * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ *
+ */
+export declare const flutedGlassFragmentShader: string;
+export interface FlutedGlassUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorBack: [number, number, number, number];
+    u_colorShadow: [number, number, number, number];
+    u_colorHighlight: [number, number, number, number];
+    u_shadows: number;
+    u_size: number;
+    u_angle: number;
+    u_distortion: number;
+    u_shift: number;
+    u_blur: number;
+    u_edges: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_stretch: number;
+    u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];
+    u_highlights: number;
+    u_shape: (typeof GlassGridShapes)[GlassGridShape];
+    u_grainMixer: number;
+    u_grainOverlay: number;
+}
+export interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorBack?: string;
+    colorShadow?: string;
+    colorHighlight?: string;
+    shadows?: number;
+    size?: number;
+    angle?: number;
+    distortion?: number;
+    shift?: number;
+    blur?: number;
+    edges?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    stretch?: number;
+    distortionShape?: GlassDistortionShape;
+    highlights?: number;
+    shape?: GlassGridShape;
+    grainMixer?: number;
+    grainOverlay?: number;
+}
+export declare const GlassGridShapes: {
+    readonly lines: 1;
+    readonly linesIrregular: 2;
+    readonly wave: 3;
+    readonly zigzag: 4;
+    readonly pattern: 5;
+};
+export declare const GlassDistortionShapes: {
+    readonly prism: 1;
+    readonly lens: 2;
+    readonly contour: 3;
+    readonly cascade: 4;
+    readonly flat: 5;
+};
+export type GlassDistortionShape = keyof typeof GlassDistortionShapes;
+export type GlassGridShape = keyof typeof GlassGridShapes;