shaders-oneshot 0.0.81-shared.1

package/dist/shaders/color-panels.js

@@ -0,0 +1,224 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, colorBandingFix } from "../shader-utils.js";
+const colorPanelsMeta = {
+  maxColorCount: 7
+};
+const colorPanelsFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float u_time;
+uniform mediump float u_scale;
+
+uniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform float u_density;
+uniform float u_angle1;
+uniform float u_angle2;
+uniform float u_length;
+uniform bool u_edges;
+uniform float u_blur;
+uniform float u_fadeIn;
+uniform float u_fadeOut;
+uniform float u_gradient;
+
+in vec2 v_objectUV;
+
+out vec4 fragColor;
+
+${declarePI}
+
+const float zLimit = .5;
+
+vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
+  float sinA = sin(angle);
+  float cosA = cos(angle);
+
+  float denom = sinA - uv.y * cosA;
+  if (abs(denom) < .01) return vec2(0.);
+
+  float z = uv.y / denom;
+
+  if (z <= 0. || z > zLimit) return vec2(0.);
+
+  float zRatio = z / zLimit;
+  float panelMap = 1. - zRatio;
+  float x = uv.x * (cosA * z + 1.) * invLength;
+
+  float zOffset = zRatio - .5;
+  float left = -.5 + zOffset * u_angle1;
+  float right = .5 - zOffset * u_angle2;
+  float blurX = aa + 2. * panelMap * u_blur;
+
+  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));
+
+  float midScreen = abs(sinA);
+  if (u_edges == true) {
+    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
+  } else if (midScreen < .07) {
+    panel *= (midScreen * 15.);
+  }
+
+  return vec2(panel, panelMap);
+}
+
+vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
+  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
+
+  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
+
+  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
+  float blendedAlpha = mix(0., colorA.a, fade);
+
+  return vec4(blendedRGB, blendedAlpha) * panelMask;
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv *= 1.25;
+
+  float t = .02 * u_time;
+  t = fract(t);
+  bool reverseTime = (t < 0.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  float aa = .005 / u_scale;
+  int colorsCount = int(u_colorsCount);
+
+  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];
+  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {
+    if (i >= colorsCount) break;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    premultipliedColors[i] = c;
+  }
+
+  float invLength = 1.5 / max(u_length, .001);
+
+  float totalColorWeight = 0.;
+  int panelsNumber = 12;
+
+  float densityNormalizer = 1.;
+  if (colorsCount == 4) {
+    panelsNumber = 16;
+    densityNormalizer = 1.34;
+  } else if (colorsCount == 5) {
+    panelsNumber = 20;
+    densityNormalizer = 1.67;
+  } else if (colorsCount == 7) {
+    panelsNumber = 14;
+    densityNormalizer = 1.17;
+  }
+
+  float fPanelsNumber = float(panelsNumber);
+
+  float totalPanelsShape = 0.;
+  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
+
+  for (int set = 0; set < 2; set++) {
+    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
+    if (!isForward) continue;
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 1) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(t + offset);
+      float angleNorm = densityFract / u_density;
+      if (densityFract >= .5 || angleNorm >= .3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      if (angleNorm > .5) {
+        angleNorm = 0.5;
+      }
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      if (panel[0] <= .001) continue;
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      float panelMap = panel[1];
+
+      int colorIdx = idx % colorsCount;
+      int nextColorIdx = (idx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 0) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(-t + offset);
+      float angleNorm = -densityFract / u_density;
+      if (densityFract >= .5 || angleNorm < -.3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
+      if (colorIdx < 0) colorIdx += colorsCount;
+      int nextColorIdx = (colorIdx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  colorPanelsFragmentShader,
+  colorPanelsMeta
+};
+//# sourceMappingURL=color-panels.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/color-panels.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, colorBandingFix } from '../shader-utils.js';\r\n\r\nexport const colorPanelsMeta = {\r\n  maxColorCount: 7,\r\n} as const;\r\n\r\n/**\r\n * Pseudo-3D semi-transparent panels rotating around a central axis\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\r\n * - u_colors (vec4[]): Up to 7 RGBA colors used to color the panels\r\n * - u_colorsCount (float): Number of active colors\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_density (float): Angle between every 2 panels (0.25 to 7)\r\n * - u_angle1 (float): Skew angle applied to all panes (-1 to 1)\r\n * - u_angle2 (float): Skew angle applied to all panes (-1 to 1)\r\n * - u_length (float): Panel length relative to total height (0 to 3)\r\n * - u_edges (bool): Color highlight on the panels edges\r\n * - u_blur (float): Side blur, 0 for sharp edges (0 to 0.5)\r\n * - u_fadeIn (float): Transparency near central axis (0 to 1)\r\n * - u_fadeOut (float): Transparency near viewer (0 to 1)\r\n * - u_gradient (float): Color mixing within a panel, 0 = solid, 1 = gradient, needs 2+ colors (0 to 1)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) 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 colorPanelsFragmentShader: string = `#version 300 es\r\nprecision lowp float;\r\n\r\nuniform float u_time;\r\nuniform mediump float u_scale;\r\n\r\nuniform vec4 u_colors[${ colorPanelsMeta.maxColorCount }];\r\nuniform float u_colorsCount;\r\nuniform vec4 u_colorBack;\r\nuniform float u_density;\r\nuniform float u_angle1;\r\nuniform float u_angle2;\r\nuniform float u_length;\r\nuniform bool u_edges;\r\nuniform float u_blur;\r\nuniform float u_fadeIn;\r\nuniform float u_fadeOut;\r\nuniform float u_gradient;\r\n\r\nin vec2 v_objectUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n\r\nconst float zLimit = .5;\r\n\r\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\r\n  float sinA = sin(angle);\r\n  float cosA = cos(angle);\r\n\r\n  float denom = sinA - uv.y * cosA;\r\n  if (abs(denom) < .01) return vec2(0.);\r\n\r\n  float z = uv.y / denom;\r\n\r\n  if (z <= 0. || z > zLimit) return vec2(0.);\r\n\r\n  float zRatio = z / zLimit;\r\n  float panelMap = 1. - zRatio;\r\n  float x = uv.x * (cosA * z + 1.) * invLength;\r\n\r\n  float zOffset = zRatio - .5;\r\n  float left = -.5 + zOffset * u_angle1;\r\n  float right = .5 - zOffset * u_angle2;\r\n  float blurX = aa + 2. * panelMap * u_blur;\r\n\r\n  float leftEdge1 = left - blurX;\r\n  float leftEdge2 = left + .25 * blurX;\r\n  float rightEdge1 = right - .25 * blurX;\r\n  float rightEdge2 = right + blurX;\r\n\r\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\r\n  panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));\r\n\r\n  float midScreen = abs(sinA);\r\n  if (u_edges == true) {\r\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\r\n  } else if (midScreen < .07) {\r\n    panel *= (midScreen * 15.);\r\n  }\r\n\r\n  return vec2(panel, panelMap);\r\n}\r\n\r\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\r\n  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\r\n\r\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\r\n\r\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\r\n  float blendedAlpha = mix(0., colorA.a, fade);\r\n\r\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\r\n}\r\n\r\nvoid main() {\r\n  vec2 uv = v_objectUV;\r\n  uv *= 1.25;\r\n\r\n  float t = .02 * u_time;\r\n  t = fract(t);\r\n  bool reverseTime = (t < 0.5);\r\n\r\n  vec3 color = vec3(0.);\r\n  float opacity = 0.;\r\n\r\n  float aa = .005 / u_scale;\r\n  int colorsCount = int(u_colorsCount);\r\n\r\n  vec4 premultipliedColors[${ colorPanelsMeta.maxColorCount }];\r\n  for (int i = 0; i < ${ colorPanelsMeta.maxColorCount }; i++) {\r\n    if (i >= colorsCount) break;\r\n    vec4 c = u_colors[i];\r\n    c.rgb *= c.a;\r\n    premultipliedColors[i] = c;\r\n  }\r\n\r\n  float invLength = 1.5 / max(u_length, .001);\r\n\r\n  float totalColorWeight = 0.;\r\n  int panelsNumber = 12;\r\n\r\n  float densityNormalizer = 1.;\r\n  if (colorsCount == 4) {\r\n    panelsNumber = 16;\r\n    densityNormalizer = 1.34;\r\n  } else if (colorsCount == 5) {\r\n    panelsNumber = 20;\r\n    densityNormalizer = 1.67;\r\n  } else if (colorsCount == 7) {\r\n    panelsNumber = 14;\r\n    densityNormalizer = 1.17;\r\n  }\r\n\r\n  float fPanelsNumber = float(panelsNumber);\r\n\r\n  float totalPanelsShape = 0.;\r\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\r\n\r\n  for (int set = 0; set < 2; set++) {\r\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\r\n    if (!isForward) continue;\r\n\r\n    for (int i = 0; i <= 20; i++) {\r\n      if (i >= panelsNumber) break;\r\n\r\n      int idx = panelsNumber - 1 - i;\r\n\r\n      float offset = float(idx) / fPanelsNumber;\r\n      if (set == 1) {\r\n        offset += .5;\r\n      }\r\n\r\n      float densityFract = densityNormalizer * fract(t + offset);\r\n      float angleNorm = densityFract / u_density;\r\n      if (densityFract >= .5 || angleNorm >= .3) continue;\r\n\r\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\r\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\r\n      if (smoothDensity * smoothAngle < .001) continue;\r\n\r\n      if (angleNorm > .5) {\r\n        angleNorm = 0.5;\r\n      }\r\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\r\n      if (panel[0] <= .001) continue;\r\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\r\n      float panelMap = panel[1];\r\n\r\n      int colorIdx = idx % colorsCount;\r\n      int nextColorIdx = (idx + 1) % colorsCount;\r\n\r\n      vec4 colorA = premultipliedColors[colorIdx];\r\n      vec4 colorB = premultipliedColors[nextColorIdx];\r\n\r\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\r\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\r\n      color = blended.rgb + color * (1. - blended.a);\r\n      opacity = blended.a + opacity * (1. - blended.a);\r\n    }\r\n\r\n\r\n    for (int i = 0; i <= 20; i++) {\r\n      if (i >= panelsNumber) break;\r\n\r\n      int idx = panelsNumber - 1 - i;\r\n\r\n      float offset = float(idx) / fPanelsNumber;\r\n      if (set == 0) {\r\n        offset += .5;\r\n      }\r\n\r\n      float densityFract = densityNormalizer * fract(-t + offset);\r\n      float angleNorm = -densityFract / u_density;\r\n      if (densityFract >= .5 || angleNorm < -.3) continue;\r\n\r\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\r\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\r\n      if (smoothDensity * smoothAngle < .001) continue;\r\n\r\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\r\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\r\n      if (panelMask <= .001) continue;\r\n      float panelMap = panel[1];\r\n\r\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\r\n      if (colorIdx < 0) colorIdx += colorsCount;\r\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\r\n\r\n      vec4 colorA = premultipliedColors[colorIdx];\r\n      vec4 colorB = premultipliedColors[nextColorIdx];\r\n\r\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\r\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\r\n      color = blended.rgb + color * (1. - blended.a);\r\n      opacity = blended.a + opacity * (1. - blended.a);\r\n    }\r\n  }\r\n\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n  color = color + bgColor * (1.0 - opacity);\r\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\r\n\r\n  ${ colorBandingFix }\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\r\n  u_colors: vec4[];\r\n  u_colorsCount: number;\r\n  u_colorBack: [number, number, number, number];\r\n  u_angle1: number;\r\n  u_angle2: number;\r\n  u_length: number;\r\n  u_edges: boolean;\r\n  u_blur: number;\r\n  u_fadeIn: number;\r\n  u_fadeOut: number;\r\n  u_density: number;\r\n  u_gradient: number;\r\n}\r\n\r\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colors?: string[];\r\n  colorBack?: string;\r\n  angle1?: number;\r\n  angle2?: number;\r\n  length?: number;\r\n  edges?: boolean;\r\n  blur?: number;\r\n  fadeIn?: number;\r\n  fadeOut?: number;\r\n  density?: number;\r\n  gradient?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,uBAAuB;AAEpC,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AACjB;AAwCO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,gBAAgB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBpD,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAmEiB,gBAAgB,aAAc;AAAA,wBACnC,gBAAgB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiHlD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/dithering.d.ts

@@ -0,0 +1,62 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).
+ *
+ * SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep
+ * u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any
+ * transforms, so scaling/rotating only affects the underlying pattern shape.
+ * No vertex shader outputs (v_objectUV, v_patternUV, etc.) are used.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - 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)
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorFront (vec4): Foreground (ink) color in RGBA
+ * - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)
+ * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)
+ * - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)
+ *
+ * */
+export declare const ditheringFragmentShader: string;
+export interface DitheringUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
+    u_shape: (typeof DitheringShapes)[DitheringShape];
+    u_type: (typeof DitheringTypes)[DitheringType];
+    u_pxSize: number;
+}
+export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colorFront?: string;
+    shape?: DitheringShape;
+    type?: DitheringType;
+    size?: number;
+}
+export declare const DitheringShapes: {
+    readonly simplex: 1;
+    readonly warp: 2;
+    readonly dots: 3;
+    readonly wave: 4;
+    readonly ripple: 5;
+    readonly swirl: 6;
+    readonly sphere: 7;
+};
+export type DitheringShape = keyof typeof DitheringShapes;
+export declare const DitheringTypes: {
+    readonly random: 1;
+    readonly '2x2': 2;
+    readonly '4x4': 3;
+    readonly '8x8': 4;
+};
+export type DitheringType = keyof typeof DitheringTypes;

package/dist/shaders/dithering.js

@@ -0,0 +1,271 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+} from "../shader-sizing.js";
+import { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from "../shader-utils.js";
+const ditheringFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+uniform float u_pxSize;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
+uniform float u_shape;
+uniform float u_type;
+
+out vec4 fragColor;
+
+${simplexNoise}
+${declarePI}
+${proceduralHash11}
+${proceduralHash21}
+
+float getSimplexNoise(vec2 uv, float t) {
+  float noise = .5 * snoise(uv - vec2(0., .3 * t));
+  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
+
+  return noise;
+}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+0, 8, 2, 10,
+12, 4, 14, 6,
+3, 11, 1, 9,
+15, 7, 13, 5
+);
+
+const int bayer8x8[64] = int[64](
+0, 32, 8, 40, 2, 34, 10, 42,
+48, 16, 56, 24, 50, 18, 58, 26,
+12, 44, 4, 36, 14, 46, 6, 38,
+60, 28, 52, 20, 62, 30, 54, 22,
+3, 35, 11, 43, 1, 33, 9, 41,
+51, 19, 59, 27, 49, 17, 57, 25,
+15, 47, 7, 39, 13, 45, 5, 37,
+63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+
+
+void main() {
+  float t = .5 * u_time;
+
+  float pxSize = u_pxSize * u_pixelRatio;
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / u_resolution;
+
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec2 shapeUV = normalizedUV;
+
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * PI / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+  vec2 boxSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  
+  if (u_shape > 3.5) {
+    vec2 objectBoxSize = vec2(0.);
+    // fit = none
+    objectBoxSize.x = min(boxSize.x, boxSize.y);
+    if (u_fit == 1.) { // fit = contain
+      objectBoxSize.x = min(u_resolution.x, u_resolution.y);
+    } else if (u_fit == 2.) { // fit = cover
+      objectBoxSize.x = max(u_resolution.x, u_resolution.y);
+    }
+    objectBoxSize.y = objectBoxSize.x;
+    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
+
+    shapeUV *= objectWorldScale;
+    shapeUV += boxOrigin * (objectWorldScale - 1.);
+    shapeUV += vec2(-u_offsetX, u_offsetY);
+    shapeUV /= u_scale;
+    shapeUV = graphicRotation * shapeUV;
+  } else {
+    vec2 patternBoxSize = vec2(0.);
+    // fit = none
+    patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y);
+    float patternWorldNoFitBoxWidth = patternBoxSize.x;
+    if (u_fit == 1.) { // fit = contain
+      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);
+    } else if (u_fit == 2.) { // fit = cover
+      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);
+    }
+    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
+    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
+
+    shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
+    shapeUV += boxOrigin;
+    shapeUV -= boxOrigin / patternWorldScale;
+    shapeUV *= u_resolution.xy;
+    shapeUV /= u_pixelRatio;
+    if (u_fit > 0.) {
+      shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
+    }
+    shapeUV /= u_scale;
+    shapeUV = graphicRotation * shapeUV;
+    shapeUV += boxOrigin / patternWorldScale;
+    shapeUV -= boxOrigin;
+    shapeUV += .5;
+  }
+
+  float shape = 0.;
+  if (u_shape < 1.5) {
+    // Simplex noise
+    shapeUV *= .001;
+
+    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);
+    shape = smoothstep(0.3, 0.9, shape);
+
+  } else if (u_shape < 2.5) {
+    // Warp
+    shapeUV *= .003;
+
+    for (float i = 1.0; i < 6.0; i++) {
+      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);
+      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);
+    }
+
+    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));
+    shape = smoothstep(0.02, 1., shape);
+
+  } else if (u_shape < 3.5) {
+    // Dots
+    shapeUV *= .05;
+
+    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);
+    float rand = hash11(stripeIdx * 10.);
+    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);
+    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);
+    shape = pow(abs(shape), 6.);
+
+  } else if (u_shape < 4.5) {
+    // Sine wave
+    shapeUV *= 4.;
+
+    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);
+
+  } else if (u_shape < 5.5) {
+    // Ripple
+
+    float dist = length(shapeUV);
+    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Swirl
+
+    float l = length(shapeUV);
+    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;
+    float twist = 1.2;
+    float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;
+    float mid = smoothstep(0., 1., pow(l, twist));
+    shape = mix(0., fract(offset), mid);
+
+  } else {
+    // Sphere
+    shapeUV *= 2.;
+
+    float d = 1. - pow(length(shapeUV), 2.);
+    vec3 pos = vec3(shapeUV, sqrt(max(0., d)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  switch (type) {
+    case 1: {
+      dithering = step(hash21(ditheringNoiseUV), shape);
+    } break;
+    case 2:
+    dithering = getBayerValue(pxSizeUV, 2);
+    break;
+    case 3:
+    dithering = getBayerValue(pxSizeUV, 4);
+    break;
+    default :
+    dithering = getBayerValue(pxSizeUV, 8);
+    break;
+  }
+
+  dithering -= .5;
+  float res = step(.5, shape + dithering);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const DitheringShapes = {
+  simplex: 1,
+  warp: 2,
+  dots: 3,
+  wave: 4,
+  ripple: 5,
+  swirl: 6,
+  sphere: 7
+};
+const DitheringTypes = {
+  "random": 1,
+  "2x2": 2,
+  "4x4": 3,
+  "8x8": 4
+};
+export {
+  DitheringShapes,
+  DitheringTypes,
+  ditheringFragmentShader
+};
+//# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dithering.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport {\r\n  type ShaderSizingParams,\r\n  type ShaderSizingUniforms,\r\n} from '../shader-sizing.js';\r\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\r\n\r\n/**\r\n * Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).\r\n *\r\n * SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep\r\n * u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any\r\n * transforms, so scaling/rotating only affects the underlying pattern shape.\r\n * No vertex shader outputs (v_objectUV, v_patternUV, etc.) are used.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\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 * - u_colorBack (vec4): Background color in RGBA\r\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\r\n * - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)\r\n * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)\r\n * - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)\r\n *\r\n * */\r\n\r\n// language=GLSL\r\nexport const ditheringFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform vec2 u_resolution;\r\nuniform float u_pixelRatio;\r\nuniform float u_originX;\r\nuniform float u_originY;\r\nuniform float u_worldWidth;\r\nuniform float u_worldHeight;\r\nuniform float u_fit;\r\nuniform float u_scale;\r\nuniform float u_rotation;\r\nuniform float u_offsetX;\r\nuniform float u_offsetY;\r\n\r\nuniform float u_pxSize;\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorFront;\r\nuniform float u_shape;\r\nuniform float u_type;\r\n\r\nout vec4 fragColor;\r\n\r\n${ simplexNoise }\r\n${ declarePI }\r\n${ proceduralHash11 }\r\n${ proceduralHash21 }\r\n\r\nfloat getSimplexNoise(vec2 uv, float t) {\r\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\r\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\r\n\r\n  return noise;\r\n}\r\n\r\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\r\nconst int bayer4x4[16] = int[16](\r\n0, 8, 2, 10,\r\n12, 4, 14, 6,\r\n3, 11, 1, 9,\r\n15, 7, 13, 5\r\n);\r\n\r\nconst int bayer8x8[64] = int[64](\r\n0, 32, 8, 40, 2, 34, 10, 42,\r\n48, 16, 56, 24, 50, 18, 58, 26,\r\n12, 44, 4, 36, 14, 46, 6, 38,\r\n60, 28, 52, 20, 62, 30, 54, 22,\r\n3, 35, 11, 43, 1, 33, 9, 41,\r\n51, 19, 59, 27, 49, 17, 57, 25,\r\n15, 47, 7, 39, 13, 45, 5, 37,\r\n63, 31, 55, 23, 61, 29, 53, 21\r\n);\r\n\r\nfloat getBayerValue(vec2 uv, int size) {\r\n  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));\r\n  int index = pos.y * size + pos.x;\r\n\r\n  if (size == 2) {\r\n    return float(bayer2x2[index]) / 4.0;\r\n  } else if (size == 4) {\r\n    return float(bayer4x4[index]) / 16.0;\r\n  } else if (size == 8) {\r\n    return float(bayer8x8[index]) / 64.0;\r\n  }\r\n  return 0.0;\r\n}\r\n\r\n\r\nvoid main() {\r\n  float t = .5 * u_time;\r\n\r\n  float pxSize = u_pxSize * u_pixelRatio;\r\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;\r\n  pxSizeUV /= pxSize;\r\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\r\n  vec2 normalizedUV = canvasPixelizedUV / u_resolution;\r\n\r\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\r\n  vec2 shapeUV = normalizedUV;\r\n\r\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\r\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\r\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\r\n  float r = u_rotation * PI / 180.;\r\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\r\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\r\n\r\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\r\n  vec2 boxSize = vec2(\r\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\r\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\r\n  );\r\n  \r\n  if (u_shape > 3.5) {\r\n    vec2 objectBoxSize = vec2(0.);\r\n    // fit = none\r\n    objectBoxSize.x = min(boxSize.x, boxSize.y);\r\n    if (u_fit == 1.) { // fit = contain\r\n      objectBoxSize.x = min(u_resolution.x, u_resolution.y);\r\n    } else if (u_fit == 2.) { // fit = cover\r\n      objectBoxSize.x = max(u_resolution.x, u_resolution.y);\r\n    }\r\n    objectBoxSize.y = objectBoxSize.x;\r\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\r\n\r\n    shapeUV *= objectWorldScale;\r\n    shapeUV += boxOrigin * (objectWorldScale - 1.);\r\n    shapeUV += vec2(-u_offsetX, u_offsetY);\r\n    shapeUV /= u_scale;\r\n    shapeUV = graphicRotation * shapeUV;\r\n  } else {\r\n    vec2 patternBoxSize = vec2(0.);\r\n    // fit = none\r\n    patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y);\r\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\r\n    if (u_fit == 1.) { // fit = contain\r\n      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);\r\n    } else if (u_fit == 2.) { // fit = cover\r\n      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);\r\n    }\r\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\r\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\r\n\r\n    shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\r\n    shapeUV += boxOrigin;\r\n    shapeUV -= boxOrigin / patternWorldScale;\r\n    shapeUV *= u_resolution.xy;\r\n    shapeUV /= u_pixelRatio;\r\n    if (u_fit > 0.) {\r\n      shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\r\n    }\r\n    shapeUV /= u_scale;\r\n    shapeUV = graphicRotation * shapeUV;\r\n    shapeUV += boxOrigin / patternWorldScale;\r\n    shapeUV -= boxOrigin;\r\n    shapeUV += .5;\r\n  }\r\n\r\n  float shape = 0.;\r\n  if (u_shape < 1.5) {\r\n    // Simplex noise\r\n    shapeUV *= .001;\r\n\r\n    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);\r\n    shape = smoothstep(0.3, 0.9, shape);\r\n\r\n  } else if (u_shape < 2.5) {\r\n    // Warp\r\n    shapeUV *= .003;\r\n\r\n    for (float i = 1.0; i < 6.0; i++) {\r\n      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);\r\n      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);\r\n    }\r\n\r\n    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));\r\n    shape = smoothstep(0.02, 1., shape);\r\n\r\n  } else if (u_shape < 3.5) {\r\n    // Dots\r\n    shapeUV *= .05;\r\n\r\n    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);\r\n    float rand = hash11(stripeIdx * 10.);\r\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\r\n    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);\r\n    shape = pow(abs(shape), 6.);\r\n\r\n  } else if (u_shape < 4.5) {\r\n    // Sine wave\r\n    shapeUV *= 4.;\r\n\r\n    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));\r\n    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);\r\n\r\n  } else if (u_shape < 5.5) {\r\n    // Ripple\r\n\r\n    float dist = length(shapeUV);\r\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\r\n    shape = waves;\r\n\r\n  } else if (u_shape < 6.5) {\r\n    // Swirl\r\n\r\n    float l = length(shapeUV);\r\n    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;\r\n    float twist = 1.2;\r\n    float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;\r\n    float mid = smoothstep(0., 1., pow(l, twist));\r\n    shape = mix(0., fract(offset), mid);\r\n\r\n  } else {\r\n    // Sphere\r\n    shapeUV *= 2.;\r\n\r\n    float d = 1. - pow(length(shapeUV), 2.);\r\n    vec3 pos = vec3(shapeUV, sqrt(max(0., d)));\r\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\r\n    shape = .5 + .5 * dot(lightPos, pos);\r\n    shape *= step(0., d);\r\n  }\r\n\r\n\r\n  int type = int(floor(u_type));\r\n  float dithering = 0.0;\r\n\r\n  switch (type) {\r\n    case 1: {\r\n      dithering = step(hash21(ditheringNoiseUV), shape);\r\n    } break;\r\n    case 2:\r\n    dithering = getBayerValue(pxSizeUV, 2);\r\n    break;\r\n    case 3:\r\n    dithering = getBayerValue(pxSizeUV, 4);\r\n    break;\r\n    default :\r\n    dithering = getBayerValue(pxSizeUV, 8);\r\n    break;\r\n  }\r\n\r\n  dithering -= .5;\r\n  float res = step(.5, shape + dithering);\r\n\r\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\r\n  float fgOpacity = u_colorFront.a;\r\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n  float bgOpacity = u_colorBack.a;\r\n\r\n  vec3 color = fgColor * res;\r\n  float opacity = fgOpacity * res;\r\n\r\n  color += bgColor * (1. - opacity);\r\n  opacity += bgOpacity * (1. - opacity);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface DitheringUniforms extends ShaderSizingUniforms {\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorFront: [number, number, number, number];\r\n  u_shape: (typeof DitheringShapes)[DitheringShape];\r\n  u_type: (typeof DitheringTypes)[DitheringType];\r\n  u_pxSize: number;\r\n}\r\n\r\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colorBack?: string;\r\n  colorFront?: string;\r\n  shape?: DitheringShape;\r\n  type?: DitheringType;\r\n  size?: number;\r\n}\r\n\r\nexport const DitheringShapes = {\r\n  simplex: 1,\r\n  warp: 2,\r\n  dots: 3,\r\n  wave: 4,\r\n  ripple: 5,\r\n  swirl: 6,\r\n  sphere: 7,\r\n} as const;\r\n\r\nexport type DitheringShape = keyof typeof DitheringShapes;\r\n\r\nexport const DitheringTypes = {\r\n  'random': 1,\r\n  '2x2': 2,\r\n  '4x4': 3,\r\n  '8x8': 4,\r\n} as const;\r\n\r\nexport type DitheringType = keyof typeof DitheringTypes;\r\n"],
+  "mappings": ";;;;;AACA;AAAA,OAGO;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AAgCrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB5C,YAAa;AAAA,EACb,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuOb,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.d.ts

@@ -0,0 +1,65 @@
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Static grid pattern made of circles, diamonds, squares or triangles.
+ *
+ * Fragment shader uniforms:
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorFill (vec4): Shape fill color in RGBA
+ * - u_colorStroke (vec4): Shape stroke color in RGBA, needs strokeWidth > 0
+ * - u_dotSize (float): Base size of each shape in pixels (1 to 100)
+ * - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)
+ * - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)
+ * - u_strokeWidth (float): Outline stroke width in pixels, needs colorStroke alpha > 0 (0 to 50)
+ * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
+ * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
+ * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, 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 dotGridFragmentShader: string;
+export interface DotGridUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colorFill: [number, number, number, number];
+    u_colorStroke: [number, number, number, number];
+    u_dotSize: number;
+    u_gapX: number;
+    u_gapY: number;
+    u_strokeWidth: number;
+    u_sizeRange: number;
+    u_opacityRange: number;
+    u_shape: (typeof DotGridShapes)[DotGridShape];
+}
+export interface DotGridParams extends ShaderSizingParams {
+    colorBack?: string;
+    colorFill?: string;
+    colorStroke?: string;
+    size?: number;
+    gapX?: number;
+    gapY?: number;
+    strokeWidth?: number;
+    sizeRange?: number;
+    opacityRange?: number;
+    shape?: DotGridShape;
+}
+export declare const DotGridShapes: {
+    readonly circle: 0;
+    readonly diamond: 1;
+    readonly square: 2;
+    readonly triangle: 3;
+};
+export type DotGridShape = keyof typeof DotGridShapes;