@paper-design/shaders 0.0.45 → 0.0.47

package/dist/shader-utils.js

@@ -7,34 +7,48 @@ const declarePI = `
 #define TWO_PI 6.28318530718
 #define PI 3.14159265358979323846
 `;
-const declareRotate = `
+const rotation2 = `
 vec2 rotate(vec2 uv, float th) {
   return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
 }
 `;
-const declareRandom = `
-float random(vec2 st) {
-  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
-}
+const proceduralHash11 = `
+  float hash11(float p) {
+    p = fract(p * 0.3183099) + 0.1;
+    p *= p + 19.19;
+    return fract(p * p);
+  }
 `;
-const declareValueNoise = `
-float valueNoise(vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  float a = random(i);
-  float b = random(i + vec2(1.0, 0.0));
-  float c = random(i + vec2(0.0, 1.0));
-  float d = random(i + vec2(1.0, 1.0));
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  float x1 = mix(a, b, u.x);
-  float x2 = mix(c, d, u.x);
-  return mix(x1, x2, u.y);
-}
+const proceduralHash21 = `
+  float hash21(vec2 p) {
+    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+    p += dot(p, p + 19.19);
+    return fract(p.x * p.y);
+  }
+`;
+const proceduralHash22 = `
+  vec2 hash22(vec2 p) {
+    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+    p += dot(p, p.yx + 19.19);
+    return fract(vec2(p.x * p.y, p.x + p.y));
+  }
+`;
+const textureRandomizerR = `
+  float randomR(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).r;
+  }
+`;
+const textureRandomizerGB = `
+  vec2 randomGB(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).gb;
+  }
 `;
 const colorBandingFix = `
   color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
 `;
-const declareSimplexNoise = `
+const simplexNoise = `
 vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
 float snoise(vec2 v) {
   const vec4 C = vec4(0.211324865405187, 0.366025403784439,
@@ -63,50 +77,55 @@ float snoise(vec2 v) {
   return 130.0 * dot(m, g);
 }
 `;
-const declareGrainShape = `
-vec2 grainRandom(vec2 p) {
-  float angle = fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
-  angle *= 6.2831853;
-  return vec2(cos(angle), sin(angle));
+const fiberNoise = `
+float fiberRandom(vec2 p) {
+  vec2 uv = floor(p) / 100.;
+  return texture(u_noiseTexture, fract(uv)).b;
 }
 
-float grainNoise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
+float fiberValueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = fiberRandom(i);
+  float b = fiberRandom(i + vec2(1.0, 0.0));
+  float c = fiberRandom(i + vec2(0.0, 1.0));
+  float d = fiberRandom(i + vec2(1.0, 1.0));
   vec2 u = f * f * (3.0 - 2.0 * f);
-
-  float n00 = dot(grainRandom(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));
-  float n10 = dot(grainRandom(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
-  float n01 = dot(grainRandom(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
-  float n11 = dot(grainRandom(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
-
-  float nx0 = mix(n00, n10, u.x);
-  float nx1 = mix(n01, n11, u.x);
-  return mix(nx0, nx1, u.y);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
 }
 
-float grainShape(vec2 uv, vec2 seedOffset) {
-  float total = 0.0;
-  float amp = 0.5;
-  float freq = .6;
-
+float fiberNoiseFbm(in vec2 n, vec2 seedOffset) {
+  float total = 0.0, amplitude = 1.;
   for (int i = 0; i < 4; i++) {
-    total += amp * grainNoise(uv * freq + seedOffset);
-    freq *= 2.;
-    amp *= .5;
+    n = rotate(n, .7);
+    total += fiberValueNoise(n + seedOffset) * amplitude;
+    n *= 2.;
+    amplitude *= 0.6;
   }
+  return total;
+}
 
-  total = .5 + .5 * total;
-  return 10. * u_scale * length(vec2(dFdx(total), dFdy(total)));
+float fiberNoise(vec2 uv, vec2 seedOffset) {
+  float epsilon = 0.001;
+  float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);
+  float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);
+  float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);
+  float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);
+  return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);
 }
 `;
 export {
   colorBandingFix,
-  declareGrainShape,
   declarePI,
-  declareRandom,
-  declareRotate,
-  declareSimplexNoise,
-  declareValueNoise
+  fiberNoise,
+  proceduralHash11,
+  proceduralHash21,
+  proceduralHash22,
+  rotation2,
+  simplexNoise,
+  textureRandomizerGB,
+  textureRandomizerR
 };
 //# sourceMappingURL=shader-utils.js.map

package/dist/shader-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-utils.ts"],
-  "sourcesContent": ["// language=GLSL\nexport const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\n// language=GLSL\nexport const declareRotate = `\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\n// language=GLSL\nexport const declareRandom = `\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n`;\n\n// language=GLSL\nexport const declareValueNoise = `\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n`;\n\n// It does use the standard random function but we don't call it to keep\n// colorBandingFix insertion independent from declareRandom\nexport const colorBandingFix = `\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\n// language=GLSL\nexport const declareSimplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n`;\n\n// language=GLSL\nexport const declareGrainShape = `\nvec2 grainRandom(vec2 p) {\n  float angle = fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\n  angle *= 6.2831853;\n  return vec2(cos(angle), sin(angle));\n}\n\nfloat grainNoise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  float n00 = dot(grainRandom(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));\n  float n10 = dot(grainRandom(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\n  float n01 = dot(grainRandom(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\n  float n11 = dot(grainRandom(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\n\n  float nx0 = mix(n00, n10, u.x);\n  float nx1 = mix(n01, n11, u.x);\n  return mix(nx0, nx1, u.y);\n}\n\nfloat grainShape(vec2 uv, vec2 seedOffset) {\n  float total = 0.0;\n  float amp = 0.5;\n  float freq = .6;\n\n  for (int i = 0; i < 4; i++) {\n    total += amp * grainNoise(uv * freq + seedOffset);\n    freq *= 2.;\n    amp *= .5;\n  }\n\n  total = .5 + .5 * total;\n  return 10. * u_scale * length(vec2(dFdx(total), dFdy(total)));\n}\n`;\n"],
-  "mappings": ";;;;;AACO,MAAM,YAAY;AAAA;AAAA;AAAA;AAMlB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAOtB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAOtB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1B,MAAM,kBAAkB;AAAA;AAAA;AAKxB,MAAM,sBAAsB;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;AA+B5B,MAAM,oBAAoB;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;",
+  "sourcesContent": ["// language=GLSL\nexport const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\n// language=GLSL\nexport const rotation2 = `\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\n// language=GLSL\nexport const proceduralHash11 = `\n  float hash11(float p) {\n    p = fract(p * 0.3183099) + 0.1;\n    p *= p + 19.19;\n    return fract(p * p);\n  }\n`;\n\n// language=GLSL\nexport const proceduralHash21 = `\n  float hash21(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p + 19.19);\n    return fract(p.x * p.y);\n  }\n`;\n\n// language=GLSL\nexport const proceduralHash22 = `\n  vec2 hash22(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p.yx + 19.19);\n    return fract(vec2(p.x * p.y, p.x + p.y));\n  }\n`;\n\n// language=GLSL\nexport const textureRandomizerR = `\n  float randomR(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).r;\n  }\n`;\n\n// language=GLSL\nexport const textureRandomizerGB = `\n  vec2 randomGB(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).gb;\n  }\n`;\n\n// language=GLSL\nexport const colorBandingFix = `\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\n// language=GLSL\nexport const simplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n`;\n\n// language=GLSL\nexport const fiberNoise = `\nfloat fiberRandom(vec2 p) {\n  vec2 uv = floor(p) / 100.;\n  return texture(u_noiseTexture, fract(uv)).b;\n}\n\nfloat fiberValueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = fiberRandom(i);\n  float b = fiberRandom(i + vec2(1.0, 0.0));\n  float c = fiberRandom(i + vec2(0.0, 1.0));\n  float d = fiberRandom(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat fiberNoiseFbm(in vec2 n, vec2 seedOffset) {\n  float total = 0.0, amplitude = 1.;\n  for (int i = 0; i < 4; i++) {\n    n = rotate(n, .7);\n    total += fiberValueNoise(n + seedOffset) * amplitude;\n    n *= 2.;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat fiberNoise(vec2 uv, vec2 seedOffset) {\n  float epsilon = 0.001;\n  float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);\n  float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);\n  float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);\n  float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);\n  return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);\n}\n`;\n"],
+  "mappings": ";;;;;AACO,MAAM,YAAY;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAOlB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,kBAAkB;AAAA;AAAA;AAKxB,MAAM,eAAe;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;AA+BrB,MAAM,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/color-panels.js

@@ -53,12 +53,12 @@ vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
   float zOffset = zRatio - .5;
   float left = -.5 + zOffset * u_angle1;
   float right = .5 - zOffset * u_angle2;
-  float blurX = aa + panelMap * u_blur;
+  float blurX = aa + 2. * panelMap * u_blur;
 
-  float leftEdge1 = left - .5 * blurX;
-  float leftEdge2 = left + blurX;
-  float rightEdge1 = right - blurX;
-  float rightEdge2 = right + .5 * blurX;
+  float leftEdge1 = left - blurX;
+  float leftEdge2 = left + .25 * blurX;
+  float rightEdge1 = right - .25 * blurX;
+  float rightEdge2 = right + blurX;
 
   float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
   panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));

package/dist/shaders/color-panels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/color-panels.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, colorBandingFix } from '../shader-utils.js';\n\nexport const colorPanelsMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Pseudo-3D panels rotating around a central axis\n *\n * Uniforms include:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_density: angle between every 2 panels\n * - u_angle1, u_angle2: skew angle applied to all panes\n * - u_length: panel length (relative to total height)\n * - u_edges: faking edges effect\n * - u_blur: side blur (0 for sharp edges)\n * - u_fadeIn: transparency near central axis\n * - u_fadeOut: transparency near viewer\n * - u_gradient: color mixing within panes (0 = single color, 1 = two colors)\n *\n */\n\n// language=GLSL\nexport const colorPanelsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\nuniform mediump float u_scale;\n\nuniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform bool u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nconst float zLimit = .5;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n  \n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + panelMap * u_blur;\n\n  float leftEdge1 = left - .5 * blurX;\n  float leftEdge2 = left + blurX;\n  float rightEdge1 = right - blurX;\n  float rightEdge2 = right + .5 * blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges == true) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n  \n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = smoothstep(1., .97 - .97 * u_fadeIn, panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv *= 1.25;\n\n  float t = .02 * u_time;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / u_scale;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];\n  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / (u_length + 0.001);\n\n  float totalColorWeight = 0.;\n  int panelsNumber = 12;\n\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n\n  float totalPanelsShape = 0.;\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_colorBack: [number, number, number, number];\n  u_angle1: number;\n  u_angle2: number;\n  u_length: number;\n  u_edges: boolean;\n  u_blur: number;\n  u_fadeIn: number;\n  u_fadeOut: number;\n  u_density: number;\n  u_gradient: number;\n}\n\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  angle1?: number;\n  angle2?: number;\n  length?: number;\n  edges?: boolean;\n  blur?: number;\n  fadeIn?: number;\n  fadeOut?: number;\n  density?: number;\n  gradient?: number;\n}\n"],
+  "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, colorBandingFix } from '../shader-utils.js';\n\nexport const colorPanelsMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Pseudo-3D panels rotating around a central axis\n *\n * Uniforms include:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_density: angle between every 2 panels\n * - u_angle1, u_angle2: skew angle applied to all panes\n * - u_length: panel length (relative to total height)\n * - u_edges: faking edges effect\n * - u_blur: side blur (0 for sharp edges)\n * - u_fadeIn: transparency near central axis\n * - u_fadeOut: transparency near viewer\n * - u_gradient: color mixing within panes (0 = single color, 1 = two colors)\n *\n */\n\n// language=GLSL\nexport const colorPanelsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\nuniform mediump float u_scale;\n\nuniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform bool u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nconst float zLimit = .5;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n  \n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + 2. * panelMap * u_blur;\n\n  float leftEdge1 = left - blurX;\n  float leftEdge2 = left + .25 * blurX;\n  float rightEdge1 = right - .25 * blurX;\n  float rightEdge2 = right + blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges == true) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n  \n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = smoothstep(1., .97 - .97 * u_fadeIn, panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv *= 1.25;\n\n  float t = .02 * u_time;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / u_scale;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];\n  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / (u_length + 0.001);\n\n  float totalColorWeight = 0.;\n  int panelsNumber = 12;\n\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n\n  float totalPanelsShape = 0.;\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_colorBack: [number, number, number, number];\n  u_angle1: number;\n  u_angle2: number;\n  u_length: number;\n  u_edges: boolean;\n  u_blur: number;\n  u_fadeIn: number;\n  u_fadeOut: number;\n  u_density: number;\n  u_gradient: number;\n}\n\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  angle1?: number;\n  angle2?: number;\n  length?: number;\n  edges?: boolean;\n  blur?: number;\n  fadeIn?: number;\n  fadeOut?: number;\n  density?: number;\n  gradient?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AACjB;AAoBO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMzB,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAanD,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;AAAA;AAAA,6BAkEkB,gBAAgB,aAAa;AAAA,wBAClC,gBAAgB,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;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,IAiHjD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/dithering.d.ts

@@ -9,7 +9,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_shape (float used as integer):
  * ---- 1: simplex noise pattern
  * ---- 2: warp noise pattern
- * ---- 3: columns if dots moving vertically
+ * ---- 3: columns of dots moving vertically
  * ---- 4: sine wave
  * ---- 5: ripple effect
  * ---- 6: swirl animation

package/dist/shaders/dithering.js

@@ -8,7 +8,7 @@ import {
   sizingUV,
   drawSizingHelpers
 } from "../shader-sizing.js";
-import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils.js";
+import { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from "../shader-utils.js";
 const ditheringFragmentShader = `#version 300 es
 precision mediump float;
 
@@ -26,9 +26,10 @@ uniform float u_pxSize;
 
 out vec4 fragColor;
 
-${declareSimplexNoise}
+${simplexNoise}
 ${declarePI}
-${declareRandom}
+${proceduralHash11}
+${proceduralHash21}
 
 float getSimplexNoise(vec2 uv, float t) {
   float noise = .5 * snoise(uv - vec2(0., .3 * t));
@@ -82,7 +83,7 @@ void main() {
   ${sizingUV}
 
   vec2 dithering_uv = pxSizeUv;
-  vec2 ditheringNoise_uv = uv;
+  vec2 ditheringNoise_uv = uv * u_resolution;
   vec2 shape_uv = objectUV;
   if (u_shape < 3.5) {
     shape_uv = patternUV;
@@ -113,11 +114,10 @@ void main() {
     shape_uv *= .05;
 
     float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
-    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
-
-    float speed = sign(rand - .5) * ceil(2. + rand);
-    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
-    shape = pow(shape, 6.);
+    float rand = hash11(stripeIdx * 10.);
+    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);
+    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);
+    shape = pow(abs(shape), 6.);
 
   } else if (u_shape < 4.5) {
     // Sine wave
@@ -147,9 +147,11 @@ void main() {
     // Sphere
     shape_uv *= 2.;
 
-    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));
+    float d = 1. - pow(length(shape_uv), 2.);
+    vec3 pos = vec3(shape_uv, sqrt(d));
     vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
     shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
   }
 
 
@@ -158,7 +160,7 @@ void main() {
 
   switch (type) {
     case 1: {
-      dithering = step(random(ditheringNoise_uv), shape);
+      dithering = step(hash21(ditheringNoise_uv), shape);
     } break;
     case 2:
       dithering = getBayerValue(dithering_uv, 2);

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns if dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);\n    shape = pow(shape, 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(random(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\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  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
-  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA0BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,mBAAmB;AAAA,EACnB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;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;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,MAiHN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns of dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${simplexNoise}\n${declarePI}\n${proceduralHash11}\n${proceduralHash21}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv * u_resolution;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\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  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AA0BrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;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,IAmDd,QAAQ;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;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,MAkHN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/dot-grid.js

@@ -4,7 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareSimplexNoise } from "../shader-utils.js";
+import { declarePI, simplexNoise } from "../shader-utils.js";
 const dotGridFragmentShader = `#version 300 es
 precision mediump float;
 
@@ -24,7 +24,7 @@ ${sizingVariablesDeclaration}
 out vec4 fragColor;
 
 ${declarePI}
-${declareSimplexNoise}
+${simplexNoise}
 
 float polygon(vec2 p, float N, float rot) {
   float a = atan(p.x, p.y) + rot;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-grid.ts"],
-  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareSimplexNoise } from '../shader-utils.js';\n\n/**\n * Static grid pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFill, u_colorStroke (vec4 RGBA)\n * - u_dotSize (px): base shape size\n * - u_sizeRange (0..1): randomizes the size of shape between 0 and u_dotSize\n * - u_strokeWidth (px): the stroke (to be added to u_dotSize)\n * - u_gapX, u_gapY (px): pattern spacing\n * - u_opacityRange (0..1): variety of shape opacity\n * - u_shape (float used as integer):\n *   ---- 1: circle\n *   ---- 2: square\n *   ---- 3: triangle\n *   ---- 4: diamond\n *   ---- 5: cross\n *\n */\n\n// language=GLSL\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  vec2 shape_uv = 100. * v_patternUV;\n\n  vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y = 1. - p.y;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
-  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAsBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;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;AAmGd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, simplexNoise } from '../shader-utils.js';\n\n/**\n * Static grid pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFill, u_colorStroke (vec4 RGBA)\n * - u_dotSize (px): base shape size\n * - u_sizeRange (0..1): randomizes the size of shape between 0 and u_dotSize\n * - u_strokeWidth (px): the stroke (to be added to u_dotSize)\n * - u_gapX, u_gapY (px): pattern spacing\n * - u_opacityRange (0..1): variety of shape opacity\n * - u_shape (float used as integer):\n *   ---- 1: circle\n *   ---- 2: square\n *   ---- 3: triangle\n *   ---- 4: diamond\n *   ---- 5: cross\n *\n */\n\n// language=GLSL\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  vec2 shape_uv = 100. * v_patternUV;\n\n  vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y = 1. - p.y;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist - strokeWidth);\n  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
+  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,oBAAoB;AAsBjC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,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;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;AAmGP,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
   "names": []
 }

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

@@ -15,6 +15,8 @@ export declare const dotOrbitMeta: {
  * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size
  * - u_spreading (0..1): max orbit distance of each dot around the cell center
  *
+ * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ *
  */
 export declare const dotOrbitFragmentShader: string;
 export interface DotOrbitUniforms extends ShaderSizingUniforms {
@@ -25,6 +27,7 @@ export interface DotOrbitUniforms extends ShaderSizingUniforms {
     u_sizeRange: number;
     u_spreading: number;
     u_stepsPerColor: number;
+    u_noiseTexture?: HTMLImageElement;
 }
 export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
     colorBack?: string;

package/dist/shaders/dot-orbit.js

@@ -4,7 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareRandom, declareRotate } from "../shader-utils.js";
+import { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from "../shader-utils.js";
 const dotOrbitMeta = {
   maxColorCount: 10
 };
@@ -13,6 +13,8 @@ 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;
@@ -26,12 +28,10 @@ ${sizingVariablesDeclaration}
 out vec4 fragColor;
 
 ${declarePI}
-${declareRandom}
-${declareRotate}
+${rotation2}
+${textureRandomizerR}
+${textureRandomizerGB}
 
-vec2 random2(vec2 p) {
-  return vec2(random(p), random(200. * p));
-}
 
 vec3 voronoiShape(vec2 uv, float time) {
   vec2 i_uv = floor(uv);
@@ -44,11 +44,11 @@ vec3 voronoiShape(vec2 uv, float time) {
   for (int y = -1; y <= 1; y++) {
     for (int x = -1; x <= 1; x++) {
       vec2 tileOffset = vec2(float(x), float(y));
-      vec2 rand = random2(i_uv + tileOffset);
+      vec2 rand = randomGB(i_uv + tileOffset);
       vec2 cellCenter = vec2(.5 + 1e-4);
       cellCenter += spreading * cos(time + TWO_PI * rand);
       cellCenter -= .5;
-      cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);
+      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);
       cellCenter += .5;
       float dist = length(tileOffset + cellCenter - f_uv);
       if (dist < minDist) {
@@ -67,7 +67,7 @@ void main() {
   vec2 shape_uv = v_patternUV;
   shape_uv *= 1.5;
 
-  float t = u_time;
+  float t = u_time - 10.;
 
   vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-orbit.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, declareRotate } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated dot pattern with dots orbiting around their grid positions\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_size (0..1): dot radius (relative to cell size)\n * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size\n * - u_spreading (0..1): max orbit distance of each dot around the cell center\n *\n */\n\n// language=GLSL\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nvec2 random2(vec2 p) {\n  return vec2(random(p), random(200. * p));\n}\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = random2(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, random(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.5;\n\n  float t = u_time;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);\n\n  float shape = voronoi[1];\n\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 < ${dotOrbitMeta.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 color = gradient.rgb * dots;\n  float opacity = gradient.a * dots;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB;AAEjD,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAgBO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,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,wBAyDS,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;",
+  "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, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated dot pattern with dots orbiting around their grid positions\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_size (0..1): dot radius (relative to cell size)\n * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size\n * - u_spreading (0..1): max orbit distance of each dot around the cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${dotOrbitMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${textureRandomizerR}\n${textureRandomizerGB}\n\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = randomGB(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.5;\n\n  float t = u_time - 10.;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = smoothstep(radius + edgeWidth, radius - edgeWidth, dist);\n\n  float shape = voronoi[1];\n\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 < ${dotOrbitMeta.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 color = gradient.rgb * dots;\n  float opacity = gradient.a * dots;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB,2BAA2B;AAEvE,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAkBO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,mBAAmB;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,wBAsDG,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/fluted-glass.d.ts

@@ -0,0 +1,72 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Mimicking glass surface distortion over the image by distorting the texture
+ * coordinates within line patterns
+ *
+ * Uniforms:
+ * - u_count, u_angle - number and direction of grid relative to the image
+ * - u_shape (float used as integer):
+ * ---- 1: uniformly spaced stripes
+ * ---- 2: randomly spaced stripes
+ * ---- 3: sine wave stripes
+ * ---- 4: zigzag stripes
+ * ---- 5: wave-based pattern
+ * - u_distortion - the power of distortion applied along within each stripe
+ * - u_distortionShape (float used as integer):
+ * ---- 5 shapes available
+ * - u_shift - texture shift in direction opposite to the grid
+ * - u_blur - one-directional blur applied over the main distortion
+ * - u_highlights - thin color lines along the grid (independent from distortion)
+ * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings
+ *   within picture to be shown without any distortion
+ *
+ */
+export declare const flutedGlassFragmentShader: string;
+export interface FlutedGlassUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_count: number;
+    u_angle: number;
+    u_distortion: number;
+    u_shift: number;
+    u_blur: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_highlights: number;
+    u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];
+    u_shape: (typeof GlassGridShapes)[GlassGridShape];
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string | undefined;
+    count?: number;
+    angle?: number;
+    distortion?: number;
+    shift?: number;
+    blur?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    highlights?: number;
+    distortionShape?: GlassDistortionShape;
+    shape?: GlassGridShape;
+}
+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 сontour: 3;
+    readonly сascade: 4;
+    readonly facete: 5;
+};
+export type GlassDistortionShape = keyof typeof GlassDistortionShapes;
+export type GlassGridShape = keyof typeof GlassGridShapes;