@paper-design/shaders 0.0.0-canary.390a3d9

package/dist/shaders/color-panels.js

@@ -0,0 +1,224 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } 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;
+
+${sizingVariablesDeclaration}
+
+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 / max(u_scale, 1e-6), 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';\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 / max(u_scale, 1e-6), 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 = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\n  \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 / max(u_length, .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;AAAA,6BAmEkB,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

@@ -0,0 +1,56 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * 2-color dithering effect over animated abstract shapes
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorFront (RGBA)
+ * - pxSize: px size relative to canvas resolution
+ * - u_shape (float used as integer):
+ * ---- 1: simplex noise pattern
+ * ---- 2: warp noise pattern
+ * ---- 3: columns of dots moving vertically
+ * ---- 4: sine wave
+ * ---- 5: ripple effect
+ * ---- 6: swirl animation
+ * ---- 7: rotating sphere
+ *  - u_type (float used as integer)
+ * ---- 1: random dithering
+ * ---- 2: 2x2 Bayer matrix
+ * ---- 3: 4x4 Bayer matrix
+ * ---- 4: 8x8 Bayer matrix
+ *
+ * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit
+ */
+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,223 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {
+  sizingUniformsDeclaration,
+  sizingUV,
+  drawSizingHelpers
+} 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;
+
+${sizingUniformsDeclaration}
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
+uniform float u_shape;
+uniform float u_type;
+uniform float u_pxSize;
+
+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;
+
+  #define USE_PATTERN_SIZING
+  #define USE_OBJECT_SIZING
+  #define USE_PIXELIZATION
+  // #define ADD_HELPERS
+
+  ${sizingUV}
+
+  vec2 dithering_uv = pxSizeUv;
+  vec2 ditheringNoise_uv = uv * u_resolution;
+  vec2 shape_uv = objectUV;
+  if (u_shape < 3.5) {
+    shape_uv = patternUV;
+  }
+
+  float shape = 0.;
+  if (u_shape < 1.5) {
+    // Simplex noise
+    shape_uv *= .001;
+
+    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);
+    shape = smoothstep(0.3, 0.9, shape);
+
+  } else if (u_shape < 2.5) {
+    // Warp
+    shape_uv *= .003;
+
+    for (float i = 1.0; i < 6.0; i++) {
+      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);
+      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);
+    }
+
+    shape = .15 / max(0.001, abs(sin(t - shape_uv.y - shape_uv.x)));
+    shape = smoothstep(0.02, 1., shape);
+
+  } else if (u_shape < 3.5) {
+    // Dots
+    shape_uv *= .05;
+
+    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
+    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
+    shape_uv *= 4.;
+
+    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
+
+  } else if (u_shape < 5.5) {
+    // Ripple
+
+    float dist = length(shape_uv);
+    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
+    shape = waves;
+
+  } else if (u_shape < 6.5) {
+    // Swirl
+
+    float l = length(shape_uv);
+    float angle = 6. * atan(shape_uv.y, shape_uv.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
+    shape_uv *= 2.;
+
+    float d = 1. - pow(length(shape_uv), 2.);
+    vec3 pos = vec3(shape_uv, 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(ditheringNoise_uv), shape);
+    } break;
+    case 2:
+      dithering = getBayerValue(dithering_uv, 2);
+      break;
+    case 3:
+      dithering = getBayerValue(dithering_uv, 4);
+      break;
+    default:
+      dithering = getBayerValue(dithering_uv, 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);
+
+  #ifdef ADD_HELPERS
+    vec2 helperBox = objectHelperBox;
+    vec2 boxSize = objectBoxSize;
+    if (u_shape < 3.5) {
+      helperBox = patternHelperBox;
+      boxSize = patternBoxSize;
+    }
+    ${drawSizingHelpers}
+  #endif
+
+  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';\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(fract(uv / float(size)) * 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 / max(0.001, 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 = 1. / pow(max(l, 1e-6), 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(max(0., 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  size?: 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.d.ts

@@ -0,0 +1,51 @@
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Static grid pattern
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorFill, u_colorStroke (vec4 RGBA)
+ * - u_dotSize (px): base shape size
+ * - u_sizeRange (0..1): randomizes the size of shape between 0 and u_dotSize
+ * - u_strokeWidth (px): the stroke (to be added to u_dotSize)
+ * - u_gapX, u_gapY (px): pattern spacing
+ * - u_opacityRange (0..1): variety of shape opacity
+ * - u_shape (float used as integer):
+ *   ---- 1: circle
+ *   ---- 2: square
+ *   ---- 3: triangle
+ *   ---- 4: diamond
+ *   ---- 5: cross
+ *
+ */
+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;